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

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

أحببت أن أعرفكم على هذه المكتبة الخاصة بواجهة الاستخدام بعد ما تعرفت عليها من خلال مدونة Noupe الشهيرة في مجال تصميم وتطوير الويب والتي بالمناسبة عملنا مع صاحبتها مقابلة شخصية من هنا, فأحببت أن أضيفها لكم وأشرحها بأسلوبي, وأرجو أن ينال الشرح والأمثلة والتطبيقات على رضاك عزيزي المطور وأختي المطورة.

يمكنك مشاهدة الكثير من الأمثلة في موقع المكتبة من هنا [أمثلة jQuery Tools] تتكون المكتبة من 6 أنواع من استخدامات واجهة المستخدم وهي:

  • Tabs الألسنة
  • Tooltibs صندوق التلميحات
  • Overlay النافذة المنبثقة
  • Expose التركيز على عنصر
  • Scrollable القائمة المتحركة
  • Flashembed تضمين الفلاش

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

سنتطرق إلى كل واحدة بحدة بإذن الله تعالى فواصل معنا بعد الفاصل وسأسعد بانضمامكم معنا..

مقدمة

في البداية سأخبرك كيف تجهز هذه المكتبة في موقعك وهي بسيطة جداً وبأبسط ما يمكن أن يكون, كل ما عليك هو وضع الكود التالي في الصفحة التي تريد أن تستخدم فيها هذه المكتبة:

هذا الكود دائماً يضاف ما بين <head> و </head> وهكذا تكون انتهيت من تجهيزك لاستخدام المكتبة في الصفحة بكل بساطة

لكن قد تود بدل من استخدام المكتبة بالطريقة السابقة بحيث يتم استخدام رابط من موقع المكتبة فيمكنك تحميل المكتبة مفتوحة المصدر من خلال موقع المكتبة [تحميل jQuery Tools] واستبدال عنوان ملف المكتبة بالامتداد الذي تم وضعه فيه.

بعد ذلك ستصبح اكواد الصفحة الأساسية شبيهه بأكواد هذه الصفحة:




jQuery Tools Demo  


وعلى هذا الأساس يمكننا التقدم باستخدام المكتبة بأنواعها المتوفرة التي سنشرح استخدام كل واحده بالخطوات التالية.

1/ Tabs الألسنة

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

لمشاهدة المثال اضغط هنا

tabcool

ولكن نحن سنتطرق إلى البداية والشكل الأبسط للعمل عليه ليكون متدرج التوسع فيه حسب ما تراه مناسب لك.

ما سنقوم نحن بعمله حالياً هو مثل هذه الصورة بأبسط ما يمكن لنتعلم الأساسيات.

اضغط هنا لمشاهدة المثال حياً

Aviary Picture 1

ملاحظة: مشاهدة مصدر الصفحة أحياناً يغنيك عن الدرس كله إذا اتضح لك طريقة عملها من خلال المصدر فلا تبخل على نفسك بمشاهدة المصدر والاستفادة منه.

تصميم صفحات الويب تعتمد بشكل أساسي على لغتين وهما HTML و CSS فالـ HTML هو لتحديد العناصر والـ CSS هو لتحديد شكل العناصر بكل سهوله وهناك لغة الجافاسكريبت والتي تعتمد على البرمجة المنطقية لعمل أوامر منطقية لتغيير أي قيمة في الصفحة وعمل تأثير معين عليها.

سنبدأ في كتابة الـ HTML الذي يمثل عناصر الصفحة وطبعاً عناصر الصفحة التي تظهر في جسم الصفحة دائماً يتم إضافتها في داخل الوسم وسأقوم بإضافتها كالتالي:



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

سهله جداً وبعدها نضيف كود الـ Javascript في الـ

$(function() {
    $("ul.tabs").tabs("div.panes > div");
});

كود بسيط جداً وطبعاً لا ننسى الكود الذي استدعيناه في مقدمة الموضوع لأنه هو المكتبة.

هكذا انتهينا من عمل الألسنة فقط لا غير! ولو تجربها ستظهر لك الآلية التي تقوم بها الألسنة وهي قوائم ولكل قائمة محتوى يتم إظهار ما يناسبه في كل مره تختار لسان وجرب بنفسك.

Aviary Picture 2

لكن لتجميل شكلها يجب علينا التعامل مع الـ CSS وهي المهمة الأصعب والأهم ولكنها سهلة وميسرة لمن لديه الخبرة في استخدامها والتعامل معها.

هناك في الكود الخاص بنا في الـ HTML أربع عناصر مهمه وهي

سس