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

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

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

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

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

أولاً:

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

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

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

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

استخدام تأثير 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);

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

——————-

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