Akordeona izvēlne: 4 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:54

Izveidojiet daudzlīmeņu akordeona izvēlni, izmantojot tikai HTML un CSS.

Kamēr es saviem projektiem izmantoju Raspberry Pi, to var palaist jebkurā tīmekļa serverī.

Tā vietā, lai sniegtu piemērus, kā izveidot konkrētu tīmekļa elementu, mērķis ir izveidot veidni, kas ietver katra manā projektā izmantotā elementa darba piemērus. Ir vieglāk modificēt kaut ko, kas darbojas, un pēc tam mēģināt to panākt.

Akordeona izvēlni var izmantot kā saskarni ar Raspberry Pi ierīci, izmantojot datoru, paliktni vai mobilo tālruni. Kamēr es izmantoju Raspberry Pi skriešanas lighttpd, var izmantot jebkuru aparatūru un tīmekļa serveri.

Katram Raspberry Pi projektam jābūt saskarnei. Tā kā displejs ir salīdzinoši mazs, mobilie tālruņi ir visierobežojošākie. Akordeona izvēlne apiet tālruņa robežas, paplašinot (+) un sakļaujot (-) vertikāli, ļaujot pēc iespējas vairāk izvēlnes vienumu.

Tīmeklī ir daudz akordeona izvēlņu piemēru. Tā kā man patīk OpenHAB vai OpenSprinkler izskats, es gribēju kaut ko līdzīgu.

Līdz šim mana Raspberry Pi projekta ēdienkartes ir bijušas ļoti vienkāršas. Es netērēju daudz laika izskatam. Lielākā daļa manu saskarņu tika rakstītas tikai HTML formātā un neizmantoja CSS. Es neesmu lietotāja saskarnes dizainere, un darbs pie izskata ir ārpus manas komforta zonas. Tā kā es ļoti bieži nestrādāju vietnēs, esmu vairākas reizes iemācījies un aizmirsis CSS. Es gribēju vienreiz izskatīt un izjust ēdienkarti, sakārtot to un pēc tam atkārtoti izmantot.

Manās lietojumprogrammās ir nepieciešama izvēlne, lai atbalstītu:

• saites uz citām vietnēm vai ierīcēm,
• parādīt vērtības vai statusu un
• atļaut atjaunināt vērtības.

Pēdējiem diviem ir nepieciešams vairāk nekā HTML un CSS.

Tā kā es iepriekš nezinu, cik daudz izvēlnes vienību man vajadzēs, akordeona izvēlne ļauj elastīgi paplašināt izvēlni pēc nepieciešamības.

Mani komentāri CSS un HTML var nedaudz pārspēt, taču es varu apskatīt komentārus un zināt, kā mainīt izvēlni atbilstoši savām vajadzībām, nepārzinot CSS. Komentāri arī ļauj man saprast, kā CSS ietekmē HTML, nepārvietojoties uz priekšu un atpakaļ starp abiem.

Man bija vēl dažas prasības:

• Dažreiz mana māja zaudē piekļuvi internetam. Tāpēc es nevaru likt izvēlņu sistēmai būt atkarīgai no saitēm uz ārējām vietnēm, kas ietver ārējos fontus, API vai javascript
• Manai ģimenei ir eklektiskas datoru gaumes un tiek izmantoti iPhone, android, MAC, personālie datori un iPad, planšetdatori, kā arī hroms, Firefox, safari un IE. Izvēlnei ir jādarbojas uz visiem šiem

Pāris nedēļas pavadīju, izmēģinot dažādus akordeona ēdienkartes variantus. To rediģēšana, pielāgošana un atteikšanās no tiem. Vietnei CSS Scripts ir daudzlīmeņu izvēlne, kas atbilda visām manām prasībām un ir šīs pamācības pamatā.

1. darbība. Soli pa solim instalēšana

Atveriet termināļa logu MacBook vai personālajā datorā un izpildiet šādas komandas:

Aizstājiet vienumus ♣ ar faktiskajām vērtībām.

Piesakieties Raspberry Pi

$ ssh pi@♣ aveņu-pi-ip-adrese ♣

Pārejiet uz galveno direktoriju

$ cd /var /www

Lejupielādējiet index.html un mainiet atļaujas un faila īpašnieku

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

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

Izveidojiet attēlu direktoriju un pārejiet uz šo direktoriju

$ mkdir img

$ cd img

Lejupielādējiet attēlus un nomainiet īpašnieku.

$ 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/ aveņu-pi-p.webp

Dublējiet galveno direktoriju un izveidojiet css direktoriju un pārvietojieties tajā

$ cd..

$ mkdir css $ cd css

Lejupielādējiet stila lapu un mainiet faila atļaujas un īpašnieku

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

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

Ja jums nav aveņu pi, varat lejupielādēt šos failus Mac vai personālajā datorā. Lai palaistu izvēlni no Mac vai PC, vai nu

• veiciet dubultklikšķi uz index.html vai
• atlasiet index.html, ar peles labo pogu noklikšķiniet un atveriet ar izvēlēto pārlūkprogrammu.

Ja izmantojat Raspberry Pi, tam ir jādarbojas tīmekļa serverim. Datorā vai Mac atveriet pārlūkprogrammu un URL logā ievadiet:

♣ aveņu-pi-ip-adrese ♣/index.html

Manam serverim ir nepieciešams drošs savienojums (noņemiet atstarpes ap kolu):

♣aveņu-pi-ip-adrese♣/index.html

Un tas darbojas!

2. solis: Pielikums: Atsauces

• CSS skripts Daudzlīmeņu akordeona izvēlne, izmantojot tikai HTML un CSS
• W3Schools akordeona ēdienkarte
• W3Schools CSS
• W3Schools HTML

3. solis: Pielikums: Atjauninājumi

4. solis: Pielikums: Traucējummeklēšana

Šeit ir dažas idejas, kas varētu palīdzēt:

• Lai formatētu HTML php atbalss paziņojumos, beigās pievienojiet "\ r", lai ievadītu atgriešanās rakstzīmi
• Apakšizvēlnes grupas ID ir jābūt unikālam. Ja apakšizvēlnes grupas ID nav unikāls, tās apakšizvēlnes vienumi tiks iekļauti grupas ID pirmajā instancē