myTabs.js إضافة jQuery بسيطة من تطويري لإضافة التبويبات إلى الموقع

الإضافة تعمل في اتجاهين:

1- تقوم بقراءة اسم الهاشتاج (Hashtag) من الـ URL فإذا كان هنالك عنصر موجود بنفس الاسم قامت بتنشيطه عن طريق دالة قمت بإنشائها. وإن لم يكن هنالك اسم عنصر مطابق للهاشتاج تقوم بتنشيط العنصر الافتراضي (Default).

2- عند النقر على أحد التبيوبات يتم إسناد الـخاصية (href) الموجودة في العنصر على عنوان الـ URL ومن ثم البحث عن عنصر بنفس الإسم يتم تنشيطه.

يجب أن تحتوي جميع التبويبات على الخاصية data-switch . ويجب أن تحتوي جميع صناديق محتوى التبويبات على الخاصية data-content.

مثال:- التبويب الخاص بالاشعارات (Notifications) يجب أن تكون الخاصية

data-switch="notifications"

وأما صندوق المحتوى المرتبط معها فيجب أن يحتوي على الخاصية:

data-content="notifications"

وكذلك الخاصية href الموجودة في التبويب يجب أن تكون:

href="#notifications"

وبهذه الطريقة تقوم الإضافة بربط العناصر ببعضها.

لتنشيط عنصر معين بعد التأكد من أنه العنصر المناسب يتم عن طريق:-

$('myTabs_switch.active').activate();

لتقوم بتنشيط التبويب.

$('myTabs_contents.active').activate();

لتقوم بتنشيط العنصر المرافق لها (صندوق المحتويات) ..

أما لإلغاء تنشيط العنصر السابق (النشط حالياً) :

$('myTabs_contents.active').deactivate();

الحمد لله .. أخيراً أحدهم استطاع فهم الكود

شكراً عزيزي على تعليقك..