قائمة الأكورديون: 4 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:38

قم بإنشاء قائمة أكورديون متعددة المستويات باستخدام HTML و CSS فقط.

بينما أستخدم Raspberry Pi لمشاريعي ، يمكن تشغيل هذا على أي خادم ويب.

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

يمكن استخدام قائمة الأكورديون كواجهة لجهاز Raspberry Pi عبر جهاز كمبيوتر أو لوحة أو هاتف محمول. أثناء استخدام Raspberry Pi لتشغيل lighttpd ، يمكن استخدام أي جهاز وخادم ويب.

يجب أن يكون لكل مشروع Raspberry Pi واجهة. نظرًا لحجم الشاشة الصغير نسبيًا ، فإن الهواتف المحمولة هي الأكثر تقييدًا. تتخطى قائمة الأكورديون حدود الهاتف عن طريق توسيع (+) والطي (-) عموديًا للسماح بالعديد من عناصر القائمة كما هو مطلوب.

هناك العديد من الأمثلة على قوائم الأكورديون على الويب. نظرًا لأنني أحب شكل وأسلوب OpenHAB أو OpenSprinkler ، فقد أردت شيئًا مشابهًا.

حتى الآن ، كانت قوائم مشروع Raspberry Pi بسيطة للغاية. لم أقضي الكثير من الوقت على الشكل والمظهر. تمت كتابة معظم واجهاتي بتنسيق HTML فقط ولم تستخدم CSS. أنا لست مصممًا لواجهة المستخدم وأعمل على الشكل والمظهر خارج منطقة راحتي. نظرًا لأنني لا أعمل على مواقع الويب كثيرًا ، فقد تعلمت ونسيت CSS عدة مرات. كنت أرغب في إجراء مظهر القائمة وإحساسها مرة واحدة ، والحصول عليها بشكل صحيح ، ثم إعادة استخدامها.

في تطبيقاتي ، أحتاج إلى القائمة لدعم:

• روابط لمواقع أو أجهزة أخرى ،
• عرض القيم أو الحالة و
• السماح بتحديث القيم.

يتطلب الأخيران أكثر من HTML و CSS.

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

قد تكون تعليقاتي في CSS و HTML أعلى قليلاً ، لكن يمكنني إلقاء نظرة على التعليقات ومعرفة كيفية تغيير القائمة لتلبية احتياجاتي دون إعادة تعلم CSS. تسهل التعليقات أيضًا بالنسبة لي فهم كيفية تأثير CSS على HTML دون التقليب ذهابًا وإيابًا بين الاثنين.

كان لدي بعض المتطلبات الأخرى:

• يفقد منزلي أحيانًا الوصول إلى الإنترنت. لذلك ، لا يمكنني جعل نظام القائمة يعتمد على روابط لمواقع خارجية ، والتي تتضمن خطوطًا خارجية أو واجهات برمجة تطبيقات أو جافا سكريبت
• تتمتع عائلتي بأذواق أجهزة كمبيوتر انتقائية وتستخدم أجهزة iPhone و android و MAC و PC و iPads والأجهزة اللوحية ، بالإضافة إلى Chrome و Firefox و Safari و IE. القائمة يجب أن تعمل على كل هؤلاء

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

الخطوة 1: التثبيت خطوة بخطوة

افتح نافذة المحطة الطرفية على جهاز MacBook أو الكمبيوتر الشخصي وقم بتشغيل الأوامر التالية:

استبدل العناصر الموجودة في ♣ بالقيم الفعلية.

تسجيل الدخول إلى Raspberry Pi

$ ssh pi @ ♣ raspberry-pi-ip-address

التغيير إلى الدليل الرئيسي

$ cd / var / www

قم بتنزيل index.html ، وقم بتغيير الأذونات ومالك الملف

sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/index.html"

sudo chmod 774 $ index.html $ sudo chown pi index.html

قم بعمل دليل للصور وانتقل إلى هذا الدليل

$ mkdir img

$ cd img

تحميل الصور وتغيير المالك.

sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/tv.png"

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/menu-icon.png" $ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/ raspberry-pi-p.webp

قم بالنسخ الاحتياطي إلى الدليل الرئيسي ، وقم بإنشاء دليل css وانتقل إليه

$ cd..

$ mkdir css $ cd css

قم بتنزيل ورقة الأنماط وتغيير الأذونات ومالك الملف

sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/style.css"

$ sudo chmod 744 style.css $ sudo chown pi style.css

إذا لم يكن لديك raspberry pi ، فيمكنك تنزيل هذه الملفات على جهاز Mac أو كمبيوتر شخصي. لتشغيل القائمة من جهاز Mac أو كمبيوتر شخصي ، إما

• انقر نقرًا مزدوجًا فوق index.html أو
• حدد index.html ، وانقر بزر الماوس الأيمن ، وافتحه باستخدام المتصفح الذي تختاره.

في حالة استخدام Raspberry Pi ، يجب تشغيل خادم ويب. افتح متصفحًا على جهاز الكمبيوتر أو جهاز Mac ، وفي نافذة URL ، أدخل:

♣ raspberry-pi-ip-address ♣ / index.html

يتطلب خادمي اتصالاً آمنًا (إزالة المسافات حول النقطتين):

♣raspberry-pi-ip-address♣/index.html

ويعمل!

الخطوة 2: الملحق: المراجع

• CSS script قائمة الأكورديون متعددة المستويات باستخدام HTML و CSS فقط
• قائمة W3Schools الأكورديون
• W3Schools CSS
• W3Schools HTML

الخطوة 3: الملحق: التحديثات

الخطوة 4: الملحق: استكشاف الأخطاء وإصلاحها

فيما يلي بعض الأفكار التي قد تساعد:

• لتنسيق HTML في عبارات ارتداد php ، أضف "\ r" في النهاية لوضع حرف إرجاع
• يجب أن يكون معرف المجموعة لقائمة فرعية فريدًا. إذا لم يكن معرف مجموعة القائمة الفرعية فريدًا ، فسيتم تضمين عناصر القائمة الفرعية في أول مثيل لمعرف المجموعة