البرمجةالدروس

كيف تصنع قائمة الـ Accordion باستخدام جي-كويري

السلام عليكم ورحمة الله وبركاته.. أرجو أن يكون الجميع بخير وصحة.

https://i0.wp.com/www.nawal-saad.com/labs/menu0.jpg?w=708

أصبحت الجي كويري تقدم مستوى احترافي وجميل لمبرمجي ومطوري المواقع نظرا لضخامة ما تقدمه ولتنوع التأثيرات. حتى أصبح الكثير يبحث عن الجديد وكيفية عمله في موقعه إن كان يتعلق بظهور القوائم أو الروابط أو المحتوى نفسه. مما لا شك فيه أن قوائم الموقع أو التي تحتوي على صفحات الموقع من الضروري أن تظهر بالشكل اللائق للموقع وللزائر. أصبح صنع شيء مميز مع الجي كويري أمراً سهلاً والحمد لله. سأشرح هنا كيفية صنع منيو بسيط يسمى بمنيو الأكورديون (نسبة إلى طريقة فتحة باب الأكورديون) وهناك من يسميه Toggle Menu.

منيو الأكورديون: هي قائمة أساسية تحتوي على عناوين فرعية، هذه العناوين الفرعية تظهر عند النقر على العنوان الأساسي في القائمة، ويصاحب ظهورها تأثيرات حركية بسيطة.

كل ما تحتاجه لتطبيق هذا الدرس: HTML editor (NotePad Plus Plus) g / معرفة بسيطة جدا بالـ HTML و CSS و J-query.

أولاً:

سأقوم بعمل هيكل القوائم الأساسية في الـ HTML عن طريق الـ ul tag ، لكن أولاً سأقوم بمناداة مكتبة الجي كويري في جزء الـ Head

https://i0.wp.com/www.nawal-saad.com/labs/menu1.jpg?w=708

ثم بعدها سأكتب قوائمي:

https://i0.wp.com/www.nawal-saad.com/labs/menu2.jpg?w=708

الآن نحتاج الـ CSS لعمل شكل القائمة لأنها الآن مجرد قائمة بدون شكل أو لون:

https://i0.wp.com/www.nawal-saad.com/labs/menu3.jpg?w=708

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

https://i0.wp.com/www.nawal-saad.com/labs/menu4.jpg?w=708

استخدام تأثير slide In / slide out effect سيساعدنا كثيرا في إضفاء حركة جميلة عند ظهور العناوين الفرعية للقائمة. وستلاحظ أنه أكثر سلاسة من تأثير fade in / out.

if(false == $(this).next().is(‘:visible’)) {

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

$(‘#menue > ul:eq(0)’).show();

عند تغيير الرقم صفر بين القوسين للـ 1 ستعرض عناصر القائمة الثانية وهكذا إذا أردت عرضهم كلهم أو إخفائهم كلهم بإزالته.

/

$(‘#menue > ul’).slideUp(200);

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

——————-

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

‫7 تعليقات

  1. ما شاء الله تبارك الله , مدونة في غاية الجمال .. أحب أهنيكم على هذا الموقع الجميل الذي لا طالما أستفدت منه .. أحتراف وإبداع ليس له مثيل .. موقع نفخر بكونه موقع عربي يفيدنا ويثرينا بالمعلومات الجديدة والقيمة والجديد بشتى انواعه بدون مانشوف كلمة – منقول للأمانة – تتكرر قدامنا زي كل مرة : )

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

    بالنسبة لصفحة المثال الموجودة في أخر الموضوع .. فتحتها في متصفح ( اكسبلورر 8 ) وما ضبطت عندي .. بس بعد ما فتحتها في الفاير فوكس صارت تمام .. فما أدري هل فيه حل عشان تكون متوافقة مع المتصفحين ؟!

    شاكر ومقدر لشخصكم الكريم .. وعقبال ما نشوف المدونة تنافس شركة مايكروسوفت يارب

  2. شكرا ليك اخي العزيز وطالما استفت من مدونتكم بس عندي استفسار لتعم الفائده علي الجميع في حاله ان البوتن عباره عن صوره فكيف سيتم التعامل معاها

اترك تعليقاً

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

زر الذهاب إلى الأعلى