إنشاء علامات تبويب (Tabs) بسهولة

سوف أشرح طريقة سهلة لإنشاء علامات تبويب (Tabs) بسهولة. الطريقة تعتمد على jQuery وسوف نستخدم idTabs.

صورة توضيحية للنتيجة النهائية:

20130523_203208

يمكن مشاهدة أمثلة حيّة في موقع idTabs.

1. jQuery idTabs

سوف نستدعي الملفات المطلوبة. أضف الأكواد التالية لملف الهيدر في داخل < head >:

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.js" type="text/javascript"></script>

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.idTabs.js" type="text/javascript"></script>

يمكن تحميل آخر نسخة من jquery هنا.
يمكن تحميل آخر نسخة من idTabs من هنا.

طبعًا الملفات نضعها في مجلد القلب أعلاه. بالمثال اعلاه تم وضع الملفين في داخل مجلد js الموجود في مجلد القالب.

2. HTML

أضف الأكواد التالية في المكان الذي تريد أن تظهر فيه علامات التبويب في القالب:

<div class="sidetabs" id="sidetabs">
	<ul>
		<li><a href="#tab1" class="selected">التبويب الأول</a></li>
		<li><a href="#tab2" class="">التبويب الثاني</a></li>
		<li><a href="#tab3" class="">التبويب الثالث</a></li>
	</ul>
	<div id="tab1" style="display: block;">
		نص في التبويب الأول
	</div>
	<div id="tab2" style="display: none;">
		نص في التبويب الثاني
	</div>
	<div id="tab3" style="display: none;">
		نص في التبويب الثالث
	</div>
</div>
<script type="text/javascript">
    $("#sidetabs ul").idTabs();
</script>

3. CSS

أضف الكود التالي إلى ملف الستايل:

/* Side Tabs */

.sidetabs {
    background: none repeat scroll 0 0 #181818;
    border: 1px solid #222222;
    color: #111111;
    margin: 8px auto;
    padding: 15px 20px;
    width: 250px;
}
.sidetabs li {
    float: right;
    list-style: none outside none;
}
.sidetabs ul {
	margin:0;
}
.sidetabs ul a {
    background: none repeat scroll 0 0 #444444;
    color: #FFFFFF;
    display: block;
	font: 12px Tahoma;
    margin: 1px 0 1px 1px;
    padding: 6px 10px;
    text-decoration: none !important;
}
.sidetabs ul a:hover {
    background: none repeat scroll 0 0 #111111;
    color: #FFFFFF;
}
.sidetabs ul a.selected {
    background: none repeat scroll 0 0 snow;
    border-bottom: 1px solid snow;
    color: #000000;
    cursor: default;
    margin-bottom: 0;
}
.sidetabs div {
    background: none repeat scroll 0 0 snow;
    clear: right;
    font: 12px Tahoma;
    padding: 10px 10px 8px;
}
.sidetabs div a {
    color: #000000;
}

7 تعليق

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

  2. جرب إستبدال السطر التالي:

    $("#sidetabs ul").idTabs();

    بـ

    jQuery("#sidetabs ul").idTabs();
  3. اهلا رشيد،
    الطريقة جميلة، ولكن كيف يمكن وضع الصفحات (وليس الأقسام) في تابز .. بمعنى كل صفحة من صفحات المدونة تكون في تاب.

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *