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

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

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

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

tabs-npss

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

كما طرحنا سابقاً في أي صفحة نريد أن نستخدم مكتبة 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;
}

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

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

tabs-npss

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

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

  • الصراحة درس رائع جدا ومميز بارك الله فيك

    مكتبة مميزة جدا جدا ومريحة للعمل وأدواتها كثيرة جدا

    جزاكم الله خير

  • M@H!OO

    شكرا لك يا عبد المالك ..

  • fahad

    متابع ..

  • شكراً لكم جزيلاً على المرور والمتابعة 🙂

  • احمد

    شكراء

    شرح رائع جدا و انمنى لك دوام التوفيق
    وهل تعتبر هذه المكتبة أفضل و مستقرة اكثر من مكتبة jquery ui

    شكرا لك اخي الكريم على ما تبذلة من وقتك

  • ممتاز عبد الملك دروس جميلة ومفيدة راح اضعها بمفضلتي وفور طلب اي شئ راح ارجعها ..شكرا علي طرحك الجميل

تعليقات عبر الفيسبوك