قطعة متعددة الأقسام

هذا الدرس يعتمد كليا على تقنية الجى كويرى JQuery وهى لمن لا يعرف عبارة عن حزمة من الجافاسكريبت تتيح لك عمل مالايمكنك ان تتخيله من التاثيرات والاضافات داخل الموقع ( لحسن الحظ ان البلوجر لا تمانع من وجود الجي كويرى داخل المدونة ) , وكنت احب ان ابدا من الدروس من الصفر فى تعليم تلك التقنية , لكن لان الوقت لا يسعنى الان سأبدأ فى التطبيقات مباشرة , مع تلميحات بسيطة .
الدرس الاول هنا هو عبارة عن قطعه متعددة الاقسام multi-tabs( او سمها كما شئت ) بالظبط مظهرها كما فى الصورة الاتية بعد الانتهاء من تشغيلها



اليكم الطريقة :

1 : صندوق الاكواد , اتبع المسار الاتى
لوحة التحكم - التخطيط - تحرير هتمل
dashboard > layout > template > edit html

2- ابحث عن

]]></b:skin>

ومباشرة فوق هذا السطر الصق الاكواد الاتية

/* pageTabs
*/
.pageTabs {width: 760px; height:150px; margin: 10px auto 0; font-size:11px;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 5px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
line-height: 2em;
color: #254588;
}
.tab_content img {
float: left;
margin: 10px 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
.tab_content p{
padding-bottom:10px;
}
/*

الان ابحث عن
</head>

وانسخ فوقها مباشرة الاتى :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){$(".tab_content").hide();$("ul.tabs li:first").addClass("active").show();$(".tab_content:first").show();$("ul.tabs li").click(function(){$("ul.tabs li").removeClass("active");$(this).addClass("active");$(".tab_content").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn(1000)})});
</script>

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

3- احفظ القالب

4- انشأ اداة جديده من نوع هتمل جافاسكريبت HTML/Javascript من صفحة عناصر المدونة , عن طريق الضغط على كلمة : اضافة اداة جديده add a page element

5- الصق فيها الكود الآتى :

<ul class="tabs">
<li><a href="#tab1">TAB1</a></li>
<li><a href="#tab2">TAB2</a></li>
<li><a href="#tab3">TAB3</a></li>
<li><a href="#tab4">TAB4</a></li>
<li><a href="#tab5">TAB5</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
محتويات القسم الأول
</div>

<div id="tab2" class="tab_content">
محتويات القسم الثانى
</div>

<div id="tab3" class="tab_content">
محتويات القسم الثالث
</div>

<div id="tab4" class="tab_content">
محتويات القسم الرابع
</div>

<div id="tab5" class="tab_content">
محتويات القسم الخامس
</div>

</div>

ماذا ستفعل الان ؟
هل لاحظت عبارات : محتويات القسم الاول , الثانى , الخ الخ الخ
مكان تلك الاسطر من المفترض ان تضع كود كل قطعه فى القسم الذى تحب ان تظهر فيه
لنفرض مثلا انك تحب اضافه عداد للزائرين : ضع الكود الذى ستحصل عليه مكان احدى تلك الاسطر
او نفرض انك تريد وضع عداد للزائرين , او وضع قائمة بريدية للزائرين , او غرفة محادثة او او او , هناك دروس كثيرة هنا فى نهايتها ستحصل على كود , بدلا من انشاء قطعه جديده من نوع هتمل / جافا سكريبت , يمكنك وضعها هنا فى قسم من تلك الاقسام , حسنا .

أخيرا : احفظ , وتاكد من النتيجة

ومتنساش تشترك فى المواضيع عشان يوصلك احدث الدروس من هنا

اكتب ايميلك هنا