إنشاء علامات تبويب (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;
}