مكتبة jQuery Tools، المكتبة المفقودة للويب – 2 Tabs

سلسلة دروس مكتبة jQuery Tools، المكتبة المفقودة للويب

تكلمنا عن مكتبة jQuery Tools هذه المكتبة الجديدة وعن مدى إمكانياتها السهلة والجميلة وسنتابع في هذا الموضوع طريقنا حول نفس الخطوة السابقة وهي الـ Tabs لم أتصور أننا سنأخذ أكثر من موضوع لخطوة واحدة فقط، ولكن لجمال هذه المكتبة وإعجابي بها فوجدت من الأفضل المتابعة في شرح هذه الخطوة وخاصة بوجود الخاصيتين المميزتين في الألسنة وهي ميزة (التالي والسابق) وكذلك ميزة (تشغيل – إيقاف)، وما يميز هذه المكتبة أيضاً سهولة عمل هذه الخصائص فيها ولكني أجد أصعب خطوة للمبتدئين فيها هي الـ CSS التي تعتمد عليها في شكل الأداة.

هذا هو الشكل الذي سنتطرق لشرحه، اضغط عليه لمشاهدة العرض حياً

وكما تفضلت لكم حرصت كثيراً بأن يكون سهل جداً وبدون صور لكي تسهل تنفيذه في البداية مع وجود الشكل الجميل فيه

كما طرحنا سابقاً في أي صفحة نريد أن نستخدم مكتبة jQuery Tools نقوم باستدعاءها في داخل الوسم كالتالي

لكن في هذه الحالة يجب عليك أن تكتب الرابط الآخر الذي يحتوي على النسخة الكاملة والذي بعنوان full كالتالي

واضح جداً نكمل فسنقوم الآن بإنشاء عناصر الـ HTML والتي دائماً تكون داخل الوسم وهي كالتالي:

محتوى اللسان 1
محتوى اللسان 2
محتوى اللسان 3



< السابق

	
	
	

التالي >

هذا الجزء لا يحتاج لشرح كثير فقد قمنا بعرضه في الشرح الأول، ولكن إضافة على ذلك قمنا بإضافة الرابطين التالي والسابق ومن المهم جعل اسم الكلاس الخاص بهما forward و backward لأنه هذا اسمه في المسجل في المكتبة، وطبعاً يمكنك تغييره بكتابة دالة معينة ولكن لا حاجة لذلك, بعد إضافة هذه العناصر نقوم بإضافة الكود البرمجي بالجافاسكريبت لتنفيذ عملية الألسنة على هذه العناصر من المحتوى مع الألسنة مع الزرين التالي والسابق نضيف التالي:

$(function() {
$("div.tabs").tabs(".panes > div", {effect: 'fade', fadeOutSpeed: 'slow',
rotate:true} ).slideshow();
});

فقط لا غير وسيتم تشغيل المطلوب حيث لم يتبقَ الآن إلا عملية التصميم وهي الـ CSS، ونلاحظ أننا لم نكتب أي كود برمجي لعملية التالي والسابق وذلك من قوة المكتبة وكذلك لاستخدامنا الاسم الافتراضي بالكلاس كما شرحناه قبل قليل، الكود البرمجي يحتوي على rotate:true وذلك لدعم إمكانية الالتفاف في الألسنة بالعودة لأول لسان بعد الأخير, فلو لم نقم بإضافتها فيتم الإيقاف عند آخر لسان وهذه ميزه كذلك يمكن استخدمها.

الآن ستكون النتيجة مرضية بالنسبة لعملية التالي والسابق ولكن بالنسبة لعملية تشغيل وإيقاف لم نعملها ولكنها سهلة جداً فنقوم بإضافة الأزرار التالي في النهاية:

تشغيل
إيقاف

تم إضافة الأوامر الخاصة بتشغيل وإيقاف الألسنة في الخاصية OnClick بشكل واضح وبسيط فقط لا غير
لكن قبل تجربة عمل التنفيذ فبالنسبة للـ CSS أهم نقطه ليتم تشغيل الـ Tabs بطريقة سليمة هي هذا الكود

.panes div {
display:none;
}

وهنا سأضيف كامل الكود الخاص بالـ CSS ويكتب بالكامل كالتالي:

body {
font-family:Tahoma;
font-size:8pt;
}

.clear {
clear:both;
}

.box {
width:200px;
margin:0 auto;
}

.panes {
position:relative;
width:200px;
height:100px;
margin-bottom:10px;
border:1px solid #e2e2e2;
background:#f3f3f3;
}

.panes div {
display:none;
width:190px;
height:90px;
text-align:center;
position:absolute;
top:0px;
right:0px;
padding:5px;
}

.tabs {
float:right;
padding-right:35px;
padding-top:2px;
width:65px;
}

.navigationbar {
width:200px;
}

.forward, .backward {
float:right;
display:block;
width:50px;
text-align:center;
font-weight:bold;
cursor:pointer;
font-size:7pt;
}

.backward:hover , .forward:hover {
color:red;
}

.tabs a {
display:block;
float:right;
width:8px;
height:8px;
background:black;
margin-left:5px;
}

.current {
background:red !important;
}

.controls {
text-align:center;
margin-top:10px;
}

.play, .stop {
border:1px solid #202020;
font-family:Tahoma;
font-size:7pt;
padding:5px;
background:#464646;
color:#ffffff;
}

تلاحظون أغلبها مساحات وحدود وألوان فلا يوجد ما هو مهم عدا بعض الأجزاء التي تمثل جزء مهم من العملية مثل تغيير مؤشر التالي والسابق إلى يد وغيرها, فإذا لم تتضح لك أي مسألة اطرحها هنا وسنناقشها بإذن الله.

باقي جزء أخير في هذا الدرس وهو التعليقات, نعم تعليقاتكم هي جزء من الدرس ومنكم نستفيد دائماً، وكذلك للاستفادة من المناقشات المترابطة بأسئلة وأجوبة.

لتحميل المثال على الدرس من هنا | لمشاهدة مثال عليه من هنا

→ مكتبة jQuery Tools، المكتبة المفقودة للويب – 1 Tabs | مكتبة jQuery Tools، المكتبة المفقودة للويب – 3 Tabs ←