+ + + + +
Share/Save/Bookmark

2009-09-05

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









هذا الدرس يعتمد كليا على تقنية الجى كويرى 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>



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

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

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



الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

12 اضف تعليق , التعليقات:

أبوشهد said...

د.وائل..شكرا على هذا الموضوع القيم

أحببت أن أنبهك أن الكود الأول في آخره خطأ.. وهو وضع
*/
هذا الخطأ أخذ مني يومين لاكتشافه لأني لا أفقه شيئا في البرمجة..
ولكني كلما أردت أن أحفظ التحرير يعطيني أرور ما أدري وين المشكلة لين الله سهلها.

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

وكل عام وأنت بخير

Wael said...

شكرا يا ابو شهد على الملاحظة

كل عام وانت بالف خير :)

pic-arabs said...

بليز بدي اعرف ازاي احط قطعة متعددة الاقسام داخل المدونة يعني مثلا اخبار نجوم افلام كوكتيل زي كدة يعني يكون كل الاقسام في الصفة الالى يعني مربع و فيه اسم القسم و صور اخر موضوع يعني الزئر يجي يدوس على القسم الي هو عايزه و يفوت بدل من labelle ارجو مساعدتي

Wael said...

pic-arabs
*********
الموضوع اصلا اسمه : اضافة قطعة متعددة الاقسام
الشرح هو اللى موجود هنا

♥ شـــذا ♥ روحــــي ♥ said...
This comment has been removed by the author.
♥ شـــذا ♥ روحــــي ♥ said...

والله يا اخي بارك الله فيك

شرحك مبسط وبسيط وسهل

ولكن اعتقد ان في بعض القوالب لا تقبل

لاني حولت وفاشلت

بارك الله فيك

تقبل تحياتي

♥ شـــذا ♥ روحــــي ♥ said...

الحمد لله

تمت بحمد لله ومية مية

تسلم ايدك يا اخ وائل وبارك الله فيك

مزيد من التقدم والرقي

Dr\ Amr said...

كلام جامد جدا يا باشا

بس عندى سؤال مهم جداااا

دلوقتى بعد منفذت كلامك

هاوز اعمل لكل قسم موضوع كامل

--((حـــبـــ وبكيت ـيـــت))-- said...

شكرا على مجهود حضرتك

Wael said...

Dr\ Amr

لازم يدويا
هاتعمل موضوع وتضيف فيه اللينكات المناسبة يدوياااا

el7hanona2010 said...

رووعه الدرس تسلم ايدك

كتير استفدت

جزاك الله خيرا

:)

أبو عبد الله said...

جزاك الله خير

لكن أخي كيف أقدر أحول عناوين الجدول إلى اليمين بدلاً من اليسار ..

+ كيف أقدر أكبر مربع المحتويات بمقاس معين أكبر من حجمه حالياً بـ10مرات؟

+ لما اضغط على زر محتوى صفحة أخرى تنزل الصفحة تلقائياً تحت مربع الزر .. كيف اقدر أخليه طبيعي؟

وتقبل أسئلتي ومروري بصدر رحب
.. وابدي اعجابي بمدونتك .. وبانتظار ردك

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

اضف تعليقك هنا

اضغط على عنوان البوست لتظهر التعليقات