يعجبني هذا النوع من القوائم والتي تعتمد على تأثير مثل Slide ضمن تأثيرات jQuery وهي قد لا تكون قوائم من حيث البنية ولكنها على شكل قوائم ويكون الشكل عمودي وليس أفقي.

هذا الدرس يشرح كيفية عمل قائمة منزلقة بإستخدام مكتبة jQuery بسهولة وبشكل عمودي وسأستخدم صور سريعة لطرح فكرة الدرس، قبل أيام عرضت عدة مصادر سريعة حول مكتبة jQuery بدلاً من كتابة تفاصيل تجدها بسهولة عند بحثك في جوجل أو حتى طريقة عمل هذا الدرس.


إعتماد الدرس كما ذكرت سيكون على مكتبة jQuery ويمكن أن تكون بداية لكتابة دروس حول هذه المكتبة ولكن بالطرح الذي أراه مناسب للمستفيدين من المدونة.

تركيبة القائمة

القوائم التي سأصممها ستكون أشكالها عمودية وهي عادة نجدها في القائمة الجانبية عند تصفح المواقع، الشكل الذي اعتمدت عليه في تصميم القائمة موضحة الصورة التالية:

وهذه الصورة تبين جميع القوائم مفتوحة قبل أن أشرح تركيبها وهذا سيفيدنا أثناء كتابة شفرة HTML و CSS:

سأضع صورة وهي عبارة عن تصوّر لشكل القائمة وأشرح بها أوسمة HTML وأصناف CSS لتتضح الصورة أكثر بهذا الشكل:

شفرة HTML

نضع شفرة HTML قبل محتويات القائمة للتأكد من التصوّر الذي وضعناه في النقطة السابقة، أي بدون العناوين والنصوص:

 <!-- box-slide -->
 <div id="box-slide">

     <!-- box-content -->
     <div class="box-content">
         <div class="title"> .. </div>
         <div class="contain"> .. </div>
     </div>
     <!-- /box-content -->

     <!-- box-content -->
     <div class="box-content">
         <div class="title"> .. </div>
         <div class="contain"> .. </div>
     </div>
     <!-- /box-content -->

     <!-- box-content -->
     <div class="box-content">
         <div class="title"> .. </div>
         <div class="contain"> .. </div>
     </div>
     <!-- /box-content -->

     <!-- box-content -->
     <div class="box-content">
         <div class="title"> .. </div>
         <div class="contain"> .. </div>
     </div>
     <!-- /box-content -->

 </div>
 <!-- /box-slide -->

بعد إضافة العناوين والنصوص، سيكون محتوى الصندوق والذي سيحتوي على النصوص أو القوائم على سبيل المثال مخفي في جميع الأشكال التي سنضعها في الأمثلة وسنبين ذلك عند تنسيق الشكل بتقنية CSS:

 <!-- box-slide -->
 <div id="box-slide">

 <!-- box-content -->
     <div class="box-content">
         <div class="title"><h3><a href="#">القائمة الأولى</a></h3></div>
         <div class="contain"><p>مكان القائمة أو النصوص الخاصة بالقائمة الأولى، يمكنك إضافة المزيد.</p></div>
     </div>
 <!-- /box-content -->

 <!-- box-content -->
     <div class="box-content">
         <div class="title"><h3><a href="#">القائمة الثانية</a></h3></div>
         <div class="contain"><p>مكان القائمة أو النصوص الخاصة بالقائمة الثانية، يمكنك إضافة المزيد.</p></div>
     </div>
 <!-- /box-content -->

 <!-- box-content -->
     <div class="box-content">
         <div class="title"><h3><a href="#">القائمة الثالثة</a></h3></div>
         <div class="contain"><p>مكان القائمة أو النصوص الخاصة بالقائمة الثالثة، يمكنك إضافة المزيد.</p></div>
     </div>
 <!-- /box-content -->

 <!-- box-content -->
     <div class="box-content">
         <div class="title"><h3><a href="#">القائمة الرابعة</a></h3></div>
         <div class="contain"><p>مكان القائمة أو النصوص الخاصة بالقائمة الرابعة، يمكنك إضافة المزيد.</p></div>
     </div>
 <!-- /box-content -->

 </div>
 <!-- /box-slide -->

تنسيق CSS

الأصناف التي سيتم تنسيقها في شفرة CSS التالية هي box-slide# ويحتوي على جميع القوائم وهو ليس مهم بالدرجة الكبيرة، أما box-content. فيحتوي على مجموعة واحدة من العنوان والمحتوى الدال عليه، وبالنسبة للصنف title. فهو للعنوان و contain. لمحتوى القائمة الواحدة.

بالطبع هناك إضافات خاصة بأشكال القوائم مثل الصنف current. وهو للعنوان الذي تم الضغط عليه (خاص بأحد أشكال القوائم الموجودة في الأسفل) والصنف hide. لإخفاء محتوى القائمة وهو أيضاً أحد الأصناف التي سنستعملها في شكل من الأشكال، هذه الشفرة المجهزة للدرس:

 #box-slide{
     margin: 10px auto;
     width: 250px;
     text-align: right;
 }

 .box-content .title {
     margin: 1px 0 0;
     padding: 1.5px 5px 1px;
     width: 250px;
     height: 26px;
     -moz-border-radius-topleft: 7px;
     -moz-border-radius-topright: 7px;
     -moz-border-radius-bottomleft: 2px;
     -moz-border-radius-bottomright: 2px;
     -webkit-border-top-left-radius: 7px;
     -webkit-border-top-right-radius: 7px;
     -webkit-border-bottom-left-radius: 2px;
     -webkit-border-bottom-right-radius: 2px;
     background: #c5c5c5 url(box-light.png) repeat-x top;
 }
 .box-content .title h3 {
     margin: 0;
     padding: 4px 5px;
     font: bold 15px "Times New Roman";
     color: #353232;
 }
 .box-content .title h3 a {
     padding: 5px 0;
     color: #353232;
 }
 .box-content .title h3 a:hover {
     color: #ffffff;
 }
 .box-content .title.current {
     background-color: #5f5f5f;
 }
 .box-content .title.current h3 a {
     color: #fff;
 }
 .box-content .contain {
     margin: 1px 0 0;
     padding: 5px 5px;
     width: 248px;
     display: none;
     border: 1px solid #5f5f5f;
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
 }
 .box-content .contain p {
     font: 13px tahoma;
     color: #383737;
 }
 #box-slide .box-content .contain {
     border-color: #909090;
 }
 #box-slide .box-content .contain .hide { display: none; }

إستخدام مكتبة jQuery في عمل تأثيرات على القوائم

الآن نأتي لجزء التأثيرات وباستخدام مكتبة jQuery، قسمنا الأمثلة إلى ثلاثة سأشرح كل منها وشفرة Javascript الخاصة بها.

الشكل الأول: بسيط وعادي

الشكل الأول سيكون شكل عادي للقوائم بحيث فقط يتيح للمستخدم الضغط على عنوان القائمة وعرض محتويات القائمة بدون تحديد سرعة معينة، الأصناف والأوسمة التي سنستخدمها هي التي عرضناها في الأعلى في بداية الدرس، سترى الوصف بعد الشفرة التالية:

$(function(){
 $('#box-slide .box-content .title').click(function(){
 $(this).next().slideToggle(0);
 });
});

في الشفرة السابقة كان الإستخدام عادي جداً وسهل أيضاً بحيث يتم الضغط على عنوان القائمة فيظهر محتواها، في السطر الثالث حددنا الصنف الحالي الذي تم ضغطه وهو title. ثم العنصر الذي بعده وهو محتواه بإستخدام الخاصية next وبعد ذلك إستخدمنا تاثير slideToggle وهو للإنزلاق التبادلي مع كل حدث.

الشكل الثاني: ملاحظة الفتح والإغلاق

الشكل الثاني سيكون نفس الشكل السابق ولكن مع ملاحظة تأثير الإنزلاق أي أنه تغيير في السرعة في تأثير slideToggle إلى السرعة التي نريدها سنحدد في هذا الشكل وستكون 300 جزء من ألف جزء من الثانية، الشرح سيكون هو نفسه في الشفرة السابقة ولا داعي لإعادة الشرح.

$(function(){
     $('#box-slide .box-content .title').click(function(){
         $(this).next().slideToggle(300);
     });
});

الشكل الثالث: فتح نافذة واحدة على الأقل

الشكل الثالث ستفتح من خلالها نافدة واحدة وتبقى نافذة واحدة على مفتوحة بعد الضغط بحيث يتيح للمستخدم الضغط على عنوان القائمة وتمييز القائمة المفتوحة عن غيرها وإخفاء بقية محتوى القائمة المفتوح والغير مستخدم تلقائياً، سترى الوصف بعد الشفرة التالية:

$(function(){
     $('#box-slide .box-content .title').click(function(){
    
         $('#box-slide .box-content .title').removeClass('current');
         $('#box-slide .box-content .contain').addClass('hide');
         $(this).next().removeClass('hide');
        
         $('#box-slide .box-content .contain.hide').slideUp(300);
         $(this).addClass('current');
        
         $(this).next().slideDown(300);
     });
});

تستطيع أن ترى وصف ما كتبته في الأعلى على هذه القائمة:

  • السطر 2: إنشاء دالة لحدث click (أعني عند الضغط على الصنف title.)
  • السطر 4: حدف الصنف current. من جميغ عناوين القوائم التي تحمل الصنف title.
  • السطر 5: إضافة الصنف hide. من محتوى القائمة والتي تمثل الصنف contain.
  • السطر 6: حذف الصنف .hide من المحتوى القائمة الحالية ( والعملية هي أن يُفتح محتوى القائمة التي ضغطنا على عنوانها ) وتم تحديد محتوى القائمة مباشرة عبر الخاصية next
  • السطر 8: إنزلاق جميع المحتويات التي تحمل الصنف hide. إلى الأعلى (أعني إغلاقها)
  • السطر 9: إضافة الصنف current. إلى عنوان القائمة الحالية (التي تم ضغطها)
  • السطر 11: إنزلاق محتوى القائمة الحالية إلى الأسفل (فتح القائمة)
  • السطر 11: تم تحديد سرعة الإنزلاق بـ 300 جزء من ألف جزء من الثانية

تلاحظ أن صنف hide. و current. تم إضافتهم عن طريق الشفرة لأستخدام الأول في إخفاء المحتويات والثاني في تغيير لون عنوان القائمة لكي تدل على أنك ضغطت عليها.

هل تريد إظهار نافذة واحدة مفتوحة عند زيارة الصفحة؟ بدلاً من أن تجد النافذة مغلقة يمكن جعلها مفتوحة عند زيارة الصفحة ثم يقوم المستخدم بإختيار القائمة التي يريدها ويتم إغلاقها، ببساطة أضف صنف current. إلى عنوان القائمة و صنف آخر تضيفه إلى محتوى القائمة التي تريد أن تراها مفتوحة عند فتح الصفحة.

مثلاً، إذا أردنا جعل القائمة الأولى مفتوحة عند فتح الصفحة نضيف صنف current. إلى عنوان القائمة الأولى ونكتب صنف آخر يفتح محتوى القائمة فليكن display. ستكون شفرة القائمة الأولى بهذا الشكل:

<div class="box-content">
	<div class="title current"><h3><a href="#">القائمة الأولى</a></h3></div>
	<div class="contain display">
		<p>مكان القائمة أو النصوص الخاصة بالقائمة الأولى، يمكنك إضافة المزيد.</p>
	</div>
</div>

أما بالنسبة لصنف display. تستطيع تحذفه وتضيف تنسيق أو صنف آخر من عندك لأن الصنف display. يحتوي على خاصية واحدة:

.display {
	display: block;
}

إضافات jQuery

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

ولكن يوجد طريقة عمل لها عبر مكتبة jQuery UI ويمكنك رؤية صفحة المثال الخاص لعمل إنزلاق القوائم في مكتبة jQuery UI وأما عن طريق مكتبة jQuery Tools ستجد طريقة عملها في قسم Tabs بالتحديد لاحظ الأمثلة التالية:

سأكتفي بوضع مثال خاص بمكتبة jQuery Tools، في الرابطين السابقين ستجد بداخل كل صفحة منهما طريقة عمل الشكل، وهو يعتمد على نفس الشكل الذي شرحته هنا، سأعرض مثال على إنزلاق القوائم بإستخدام مكتبة jQuery Tools، الشفرة التي أعددتها للمثال وضعتها بهذا الشكل وتستطيع إختيار أسماء الأصناف مثل ما تريد وإضافتها إلى خاصية tabs الموجودة في الإضافة:

<div id="accordion">

     <h2>القائمة الأولى</h2>
     <div style="display:block"><p>مكان القائمة أو النصوص الخاصة بالقائمة الأولى، يمكنك إضافة المزيد.</p></div>

     <h2>القائمة الثانية</h2>
     <div><p>مكان القائمة أو النصوص الخاصة بالقائمة الثانية، يمكنك إضافة المزيد.</p></div>
    
     <h2>القائمة الثالثة</h2>
     <div><p>مكان القائمة أو النصوص الخاصة بالقائمة الثالثة، يمكنك إضافة المزيد.</p></div>

</div>

بعد إستدعاء مكتبة jQuery مع مكتبة jQuery Tools يمكنك تنفيذ الإنزلاق، لاحظ أنك تستطيع إستدعاء المكتبة مباشرة عبر الموقع بوضع هذه الشفرة لديك وهو ما سيوفر عليك الوقت:

<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>

أما بالنسبة لعمل الإنزلاق فسيكون عن طريق دالة أو خاصية tabs التابعة لمكتبة jQuery Tools:

$(function(){
     $("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
 });

سيكون الشكل الأخير جاهز بسهولة بإستخدام مكتبة jQuery Tools، يمكنك مشاهدة المثال مباشرةً إذا أردت.