Ակորդեոնի մենյու ՝ 4 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:47

Ստեղծեք բազմամակարդակ ակորդեոնի ընտրացանկ ՝ օգտագործելով միայն HTML և CSS:

Մինչ ես օգտագործում եմ Raspberry Pi իմ նախագծերի համար, այն կարող է գործարկվել ցանկացած վեբ սերվերի վրա:

Որոշակի վեբ տարր ստեղծելու օրինակների փոխարեն, նպատակն է ունենալ կաղապար, որը ներառում է իմ նախագծերում օգտագործվող յուրաքանչյուր տարրի աշխատանքային օրինակներ: Ավելի հեշտ է փոփոխել այն, ինչ աշխատում է, այնուհետև փորձել այն գործի դնել:

Ակորդեոնի ընտրացանկը կարող է օգտագործվել որպես Raspberry Pi սարքի միջերես `համակարգչի, պահոցի կամ բջջային հեռախոսի միջոցով: Մինչ ես օգտագործում եմ Raspberry Pi- ն, որն աշխատում է lighttpd- ով, ցանկացած սարքավորում և վեբ սերվեր կարող են օգտագործվել:

Raspberry Pi- ի յուրաքանչյուր նախագիծ պետք է ունենա ինտերֆեյս: Էկրանի համեմատաբար փոքր չափի պատճառով բջջային հեռախոսներն ամենից սահմանափակումն են: Ակորդեոնի ընտրացանկը մոտենում է հեռախոսի սահմաններին `ընդլայնելով (+) և փլուզելով (-) ուղղահայաց ՝ թույլ տալով ցանկի շատ տարրեր, որքան պահանջվում է:

Համացանցում ակորդեոնի ընտրացանկի բազմաթիվ օրինակներ կան: Քանի որ ինձ դուր է գալիս OpenHAB- ի կամ OpenSprinkler- ի արտաքին տեսքը, ես նման բան էի ուզում:

Մինչ այժմ իմ Raspberry Pi նախագծի ընտրացանկերը շատ պարզ էին: Ես շատ ժամանակ չեմ ծախսել արտաքին տեսքի վրա: Իմ ինտերֆեյսների մեծ մասը գրված էր միայն HTML- ով և չէր օգտագործում CSS: Ես UI դիզայներ չեմ և արտաքին տեսքի վրա աշխատելն իմ հարմարավետության գոտուց դուրս է: Քանի որ ես շատ հաճախ չեմ աշխատում կայքերում, ես բազմիցս սովորել և մոռացել եմ CSS- ը: Ես ուզում էի մեկ անգամ ճաշացանկը դարձնել տեսք և զգացում, ճիշտ ձևակերպել այն, այնուհետև նորից օգտագործել այն:

Իմ դիմումներում ինձ անհրաժեշտ է ընտրացանկը ՝ աջակցելու համար.

• հղումներ դեպի այլ կայքեր կամ սարքեր,
• ցուցադրել արժեքներ կամ կարգավիճակ և
• թույլ տալ արժեքների թարմացում:

Վերջին երկուսը պահանջում են ավելին, քան HTML- ը և CSS- ը:

Քանի որ ես նախապես չգիտեմ, թե քանի մենյուի տարր է ինձ պետք լինելու, ակորդեոնի ընտրացանկը թույլ է տալիս ճկունություն `ցանկը ըստ ցանկության ընդլայնելու:

CSS- ի և HTML- ի իմ մեկնաբանությունները կարող են մի փոքր վերևում լինել, բայց ես կարող եմ դիտել մեկնաբանությունները և իմանալ, թե ինչպես փոխել ցանկը `իմ կարիքները բավարարելու համար, առանց CSS- ի նորից սովորելու: Մեկնաբանությունները նաև հեշտացնում են ինձ հասկանալ, թե ինչպես է CSS- ն ազդում HTML- ի վրա ՝ առանց երկուսի միջև այս ու այն կողմ շրջվելու:

Ես ունեի մի քանի այլ պահանջներ.

• Երբեմն իմ տունը կորցնում է ինտերնետի հասանելիությունը: Այսպիսով, ես չեմ կարող ունենալ, որ ընտրացանկի համակարգը կախված լինի արտաքին կայքերի հղումներից, որը ներառում է արտաքին տառատեսակներ, API- ներ կամ javascript
• Իմ ընտանիքն ունի ընտրովի համակարգչային նախասիրություններ և օգտագործում է iPhone, android, MAC, համակարգիչ և iPads, պլանշետներ, ինչպես նաև քրոմ, firefox, safari և IE: Theանկը պետք է գործի այս բոլորի վրա

Մի երկու շաբաթ անցկացրեցի ակորդեոնի ընտրացանկի տարբեր իրագործումներ փորձելով: Խմբագրել դրանք, հարմարեցնել դրանք և հրաժարվել դրանցից: Կայքը ՝ 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

Պատկերների համար գրացուցակ կազմեք և անցեք այդ գրացուցակին

$ մկդիր 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

Եթե դուք չունեք ազնվամորի 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 սցենար Բազմաստիճան ակորդեոնի ընտրացանկ ՝ օգտագործելով միայն HTML և CSS
• W3Schools ակորդեոնի ընտրացանկ
• W3Schools CSS
• W3Schools HTML

Քայլ 3. Հավելված. Թարմացումներ

Քայլ 4. Հավելված. Խնդիրների վերացում

Ահա որոշ գաղափարներ, որոնք կարող են օգնել.

• HTML- ը php echo հայտարարություններում ձևավորելու համար վերջում ավելացրեք «\ r» ՝ վերադարձի նշան տեղադրելու համար
• Ենթամենյուի խմբային ID- ն պետք է լինի եզակի: Եթե ենթացանկի խմբի ID- ն եզակի չէ, ապա նրա ենթացանկի տարրերը կներառվեն խմբի ID- ի առաջին ատյանում