[ درس ] تنقل عن طريق tabs بدون تحديث الصفحة عن طريق ajax جزء 1

سلام عليكم و رحمة الله تعالي و بركاته وبعد أحبائي اليوم جايب لكم موضوع مشوق
وهو عبارة عن طريقة عمل بما يعرف ب tabs وانتقال فيما بينها بشكل سلس وبدون تحديث الصفحة وراح أشرح وحدة وحدة وبكل ما استطعت
علي بركة الله و يسم الله

أولا سوف ننشأ صفحة جديدة عن طريق محررنا أي محرر تستعمل و ليريحك أوكي وراح نسميها index.php علي سبيل المثال أوكي..الان سنضع في محتواها النص الرمجي التالي
رمز PHP:

// هنا سوف نضع أكواد الاجاكس

حسنا الأكيد أن كل شيئ مفهوم يدون شك لأنها فقط html بسيط جدا أوكي
الان سوف نضيف دالة الني تتحقق تفعيل الأجاكس في المتصفح المستخدم ..جميل وسوف نضيفها بين وسمscript الذي قلنا خاص ب javascript أي هنا
رمز PHP:

// هنا سوف نضع أكواد الاجاكس

أي سيصبح الكود كتالي :
رمز PHP:

<span style="color: #000000">


//check browser
function FactoryXMLHttpRequest() {
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if(window.ActiveXObject) {
var msxmls = new Array(
'Msxml2.XMLHTTP.5.0',
'Msxml2.XMLHTTP.4.0',
'Msxml2.XMLHTTP.3.0',
'Msxml2.XMLHTTP',
'Microsoft.XMLHTTP');
for (var i = 0; i <span style="color: #007700"> var XMLHTPP = FactoryXMLHttpRequest();

أنشأناه وأحلنا اليه الدالة الني أنشأناها لتأكد من دعم متصفح المستخدم ajax ..أوكي لا تحاول حفظها أنا عن نفسي لم أحفظها بعد لكن سأحاول ه:nosweat: أوكي الان سوف نعمل ثلاث روابط اذ أن كل رابط يمثل tab واحدة مثلا contact - about - profile
أي أننا اذا ضغطنا علي واجدة اي منهما سوف يعطينا محتواها بدون تحديث صفحة بكل تأكيد :bleh:
أوكي ضعنا نحول الكلام الي تطبيق عملي سنضع بين وسوم body أكواد بسيط جدا عبارة عن ما سلف ذكره أوكي :
رمز PHP:

contact - about - profile

ووضعنا الروابط داخل div من اختيارنا وحددنا لها id من اختيارنا أوكي
سيصبح الكود لحد الان كتالي :
رمز PHP:

<span style="color: #000000">


//check browser
function FactoryXMLHttpRequest() {
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if(window.ActiveXObject) {
var msxmls = new Array(
'Msxml2.XMLHTTP.5.0',
'Msxml2.XMLHTTP.4.0',
'Msxml2.XMLHTTP.3.0',
'Msxml2.XMLHTTP',
'Microsoft.XMLHTTP');
for (var i = 0; i <span style="color: #007700"> function getpage(type,div){

}

أوكي.. الان سنضيف لها متغير سيأخد قيمة البرامتر الثاني الذي سيكون لأخد ايدي div سنسميه مثلا put
أوكي...أي كتالي :
رمز PHP:

var put = document.getElementById(div);

بسيطة..أكيد..وبرامتر الأول أيضا سنضعه في متغير نختاره نحن أوكي ..وسيحتوي كما قلنا علي رابط الذي سنرسل له طلب لكي يعكينا محتوي كل tab
أي سنضيف أيضا :
رمز PHP:

var url = type ;

سأكمل الجزء الثاني غدا ان شاء الله
تحياتي







أكثر...