[jquery] التاب بأسهل الطرق

[وحيد]

بسم الله الرحمن الرحيم

توجد الكثير والعديد من الطرق لعمل التاب (tabs) أو علامات التبويب ، ولكل طريقة مميزاتها واستخداماتها المختلفة ..

ساتحدث اليوم عن ابسط طريقة من وجهة نظري لعمل التاب ، وهي الطريقة المستخدمة في الصفحة الرئيسية لإمبراطورية وحيد (http://wh-em.com)

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

وهي مبنية على مكتبة الجافا سكريبت المشهورة jquery ، ولن أتطرق لشرح لها وللاستزادة حول هذه المكتبة :


موقع الشركة الرسمي (http://jquery.com/)
المستندات والوثائق (http://docs.jquery.com/Main_Page)
الإضافات (http://plugins.jquery.com/)


بالتأكيد في البداية سنحتاج إلى استدعاء المكتبة وأنا دوما أفضل استدعائها من خلال موقع الشركة نفسها لآخر نسخة بالكود التالي :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>


بعدها لدينا الإضافة الخاصة بالتابز (كافة الملفات مرفقة) :

كود الاستدعاء :

<script type="text/javascript" src="simpleTabs.js"></script>

كود الإعدادات :


<script type="text/javascript">
$(document).ready(function() {
$("#simpleTabs").simpleTabs({
fadeSpeed: "slow", // fast or slow
defautContent: 2,
autoNav: "false", // true or false
closeTabs : "true" // true or false
});
});
</script>

وإليكم شرح للإعدادات المتوفرة :

$("#simpleTabs").simpleTabs({

هنا نحدد اسم الطبقة التي ستحمل التبويبات الخاصة بنا ومحتوى كل تبويبة :

fadeSpeed: "slow", // fast or slow

هذه تحدد سرعة التأثير عند الانتقال من تاب إلى آخر .

defautContent: 1,

لتحديد علامة التبويب الافتراضية التي ستظهر عند تحميل الصفحة .

autoNav: "false", // true or false

إذا أردت تشغيل الانتقال التلقائي بمجرد تحميل الصفحة يتم التنقل إلى التابات الآخرى بشكل تلقائي .

closeTabs : "true" // true or false

لإظهار أو اخفاء زر الاغلاق لإخفاء محتوى التابات .



بعد الإعدادات لدينا الطبقة الأساسية التي قمنا بتعريفها في الأعلى :

<div id="simpleTabs">

</div>


سنضع داخلها قائمة بالتابات الأساسية التي نريدها وتكون بالشكل التالي :


<div class="simpleTabs-nav">
<ul>
<li id="simpleTabs-nav-1">الأولى</li>
<li id="simpleTabs-nav-2">الثانية</li>
<li id="simpleTabs-nav-3">الثالثة</li>
<li id="simpleTabs-nav-4">الرابعة</li>
<li id="simpleTabs-nav-5">الخامسة</li>
</ul>
</div>



لاحظ التسلسل الرقمي للمعرف الخاص بكل تاب (simpleTabs-nav-1)

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

ونضيف ايضا داخل الطبقة الأساسية لبابلابلابل الكود التالي :


<div id="simpleTabs-content-1" class="simpleTabs-content">
محتوى الأولى
</div>
<div id="simpleTabs-content-2" class="simpleTabs-content">
محتوى الثانية
</div>
<div id="simpleTabs-content-3" class="simpleTabs-content">
محتوى الثالثة
</div>
<div id="simpleTabs-content-4" class="simpleTabs-content">
محتوى الرابعة
</div>
<div id="simpleTabs-content-5" class="simpleTabs-content">
محتوى الخامسة
</div>




لاحظ ايضا المعرفات وتسلسلها (simpleTabs-content-2) والتي يجب ربطها مع عنوان كل تاب

بكذا انتهينا من بناء التاب الخاص بنا

المتبقي فقط بعض التحسينات باستخدام الـ CSS :

<style type="text/css">
body{
background:url(images/bg.png) repeat-x top center #FFF;
font-family:Tahoma, Geneva, sans-serif;
font-size:10pt;
}
#simpleTabs{
width: 90%;
margin:0 auto;
}
.simpleTabs-nav ul{
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
.simpleTabs-nav li{
float: right;
padding: 5px;
color: #666;
cursor: pointer;
font-size:11pt;
font-family:tahoma;
border-left:solid 1px #ccc;
border-right:solid 1px #ccc;
border-top:solid 1px #ccc;
margin:0 5px 0 5px ;
background:url(images/button4.gif);
}
.simpleTabs-nav li:hover{
background: #fff;
color:#666;
border-left:solid 1px #ccc;
border-right:solid 1px #ccc;
border-top:solid 1px #ccc;
}
.simpleTabs-nav li.close{
float: left;
border-left:solid 1px #ccc;
border-right:solid 1px #ccc;
border-top:solid 1px #ccc;
padding:5px 10px 5px 10px;
}
.simpleTabs-nav li.actif{
color: #B8252D;
background: #1c84ef;
font-size:11pt;
font-weight:bold;
padding:5px 10px 5px 10px;
background:url(images/button4a.gif);
border-bottom:none;
}
.simpleTabs-content{
clear: both;
padding: 20px;
background:#CBCBCB;
font-family:tahoma;
border-left:solid 1px #ccc;
border-right:solid 1px #ccc;
border-bottom:solid 1px #ccc;
}
</style>


يمكنك تحسينها وتعديل الصور والألوان بمايناسبك

اتمنى الشرح المبسط واضح

وكما ذكرت لكم هناك الكثير من البدائل الآخرى والتي فيها المزيد من المميزات ، وانا افضل هذه الطريقة لبساطتها وصغر حجم الاضافة الخاصة بها ، وإليكم المزيد من المصادر (انجليزية) :

50+ Nice Clean CSS Tab-Based Navigation Scripts (http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/)
12 BEST JQUERY TAB INTERFACE CREATION PLUGINS AND TUTORIALS (http://fresherswisdom.com/web-designing/146-web-programming/987-12-best-jquery-tab-interface-creation-plugins-and-tutorials.html)



المثال كاملا مرفق ..
مع التحية ،