Cov Ntawv Qhia Accordion: 4 Kauj Ruam

2024 Tus sau: John Day | [email protected]. Kawg hloov kho: 2024-01-30 09:26

Tsim cov ntawv qhia zaub mov ntau qib uas siv tsuas yog HTML thiab CSS.

Thaum kuv siv Raspberry Pi rau kuv cov haujlwm, qhov no tuaj yeem ua haujlwm ntawm txhua lub web server.

Hloov chaw ntawm kev muab piv txwv ntawm yuav ua li cas los tsim ib lub vev xaib tshwj xeeb, lub hom phiaj yog kom muaj tus qauv uas suav nrog piv txwv ua haujlwm ntawm txhua lub ntsiab lus siv hauv kuv cov phiaj xwm. Nws yooj yim dua los hloov qee yam uas ua haujlwm, tom qab ntawd sim ua kom nws ua haujlwm.

Cov ntawv qhia zaub mov tuaj yeem siv los ua kev sib txuas rau Raspberry Pi ntaus ntawv ntawm lub khoos phis tawj, ncoo lossis xov tooj ntawm tes. Thaum kuv siv Raspberry Pi khiav lighttpd, txhua yam khoom siv thiab web server tuaj yeem siv tau.

Txhua qhov haujlwm Raspberry Pi yuav tsum muaj kev cuam tshuam. Vim tias nws qhov me me me me, cov xov tooj ntawm tes yog qhov txwv tshaj plaws. Cov ntawv qhia zaub mov tau txais nyob ib ncig ntawm lub xov tooj txwv los ntawm kev nthuav dav (+) thiab kev sib tsoo (-) ntsug uas tso cai rau ntau yam khoom noj raws li xav tau.

Muaj ntau qhov piv txwv ntawm cov ntawv qhia zaub mov accordion hauv lub vev xaib. Vim tias kuv nyiam qhov saib thiab hnov ntawm OpenHAB lossis OpenSprinkler, kuv xav tau qee yam zoo sib xws.

Txog tam sim no, kuv li Raspberry Pi qhov phiaj xwm tau yooj yim heev. Kuv tsis siv sijhawm ntau ntawm kev saib thiab mloog. Feem ntau ntawm kuv qhov cuam tshuam tau sau tsuas yog hauv HTML thiab tsis siv CSS. Kuv tsis yog tus tsim qauv UI thiab ua haujlwm ntawm saib-thiab-xav nyob sab nraum ntawm kuv qhov chaw xis nyob. Vim tias kuv tsis ua haujlwm ntawm cov vev xaib ntau zaus, Kuv tau kawm thiab tsis nco qab CSS ntau zaus. Kuv xav ua cov ntawv qhia zaub mov zoo ib yam, ua kom raug, thiab tom qab ntawd rov siv nws.

Hauv kuv daim ntawv thov, kuv xav tau cov ntawv qhia zaub mov los txhawb nqa:

• txuas mus rau lwm lub vev xaib lossis khoom siv,
• tso saib qhov tseem ceeb lossis xwm txheej thiab
• pub hloov tshiab rau qhov muaj nuj nqis.

Ob qhov kawg xav tau ntau dua li HTML thiab CSS.

Txij li thaum kuv tsis paub ua ntej, muaj pes tsawg cov ntawv qhia zaub mov kuv yuav xav tau, cov ntawv qhia zaub mov accordion tso cai rau hloov pauv cov ntawv qhia raws li xav tau.

Kuv cov lus hauv CSS thiab HTML yuav yog me ntsis saum toj kawg nkaus, tab sis kuv tuaj yeem saib cov lus pom thiab paub hloov pauv cov ntawv qhia zaub mov kom tau raws li qhov kuv xav tau yam tsis tau kawm CSS ntxiv. Cov lus hais kuj ua rau kuv nkag siab yooj yim npaum li cas CSS cuam tshuam rau HTML yam tsis tig rov qab-thiab-tawm ntawm ob.

Kuv muaj ob peb lwm txoj cai:

• Qee zaum kuv lub tsev poob kev siv internet. Yog li, kuv tsis tuaj yeem muaj cov ntawv qhia zaub mov nyob ntawm qhov txuas mus rau cov vev xaib sab nraud, uas suav nrog cov fonts sab nraud, APIs lossis javascript
• Kuv tsev neeg muaj lub khoos phis tawj nyiam thiab siv iPhone, Android, MACs, PC thiab iPads, ntsiav tshuaj, ntxiv rau, chrome, firefox, safari thiab IE. Cov ntawv qhia zaub mov yuav tsum khiav ntawm txhua qhov no

Kuv tau siv ob peb lub lis piam sim ua ntau yam kev ua zaub mov accordion. Kho lawv, yoog raws lawv thiab tso lawv tseg. Lub vev xaib, CSS Scripts, muaj ntau qib ntawv qhia zaub mov uas ua tau raws li txhua qhov kuv xav tau thiab tsim cov hauv paus ntawm cov lus qhia no.

Kauj ruam 1: Step-by-Step Install

Qhib lub davhlau ya nyob twg qhov rai ntawm MacBook lossis PC thiab khiav cov lus txib hauv qab no:

Hloov cov khoom hauv with nrog qhov muaj txiaj ntsig tiag.

Nkag mus rau hauv Raspberry Pi

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

Hloov mus rau cov npe loj

$ cd /var /www

Rub tawm index.html, thiab hloov kev tso cai thiab tus tswv ntawm cov ntawv

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

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

Ua cov npe rau cov duab thiab txav mus rau hauv cov npe ntawd

$ mkdir cov img

$ cd img

Rub tawm cov duab thiab hloov tus tswv.

$ 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

Thaub qab rau cov npe tseem ceeb, thiab tsim cov css directory thiab txav mus rau nws

cd ua $..

$ mkdir css $ cd css

Rub tawm daim ntawv style, thiab hloov kev tso cai thiab tus tswv ntawm cov ntawv

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

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

Yog tias koj tsis muaj raspberry pi, tom qab ntawd koj tuaj yeem rub tawm cov ntawv no rau Mac lossis PC. Txhawm rau khiav cov ntawv qhia zaub mov los ntawm Mac lossis PC, ib yam nkaus

• ob npaug nias rau index.html, lossis
• xaiv index.html, nyem rau sab xis, thiab qhib nrog qhov browser uas koj xaiv.

Yog tias siv Raspberry Pi, nws yuav tsum tau khiav lub vev xaib. Qhib qhov browser ntawm koj lub PC lossis Mac, thiab hauv qhov URL nkag mus:

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

Kuv tus neeg rau zaub mov xav tau kev sib txuas ruaj ntseg (tshem tawm thaj chaw ib ncig ntawm txoj hnyuv):

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

Thiab nws ua haujlwm!

Kauj Ruam 2: Cov Ntawv Ntxiv: Cov neeg ua tim khawv

• CSS tsab ntawv Multilevel accordion ntawv qhia zaub mov siv tsuas yog HTML thiab CSS
• W3Schools accordion ntawv qhia zaub mov
• W3Schools CSS
• W3Schools HTML

Kauj Ruam 3: Cov Ntawv Ntxiv: Hloov tshiab

Kauj Ruam 4: Cov Ntawv Ntxiv: Troubleshooting

Nov yog qee cov tswv yim uas yuav pab tau:

• Txhawm rau ua hom ntawv HTML hauv php echo nqe lus, ntxiv "\ r" thaum kawg muab tso ua tus cim
• Cov pab pawg-id rau cov ntawv qhia zaub mov yuav tsum yog qhov tshwj xeeb. Yog tias sub-menu's group-id tsis muaj qhov tshwj xeeb ces nws cov ntawv qhia zaub mov yuav raug suav nrog ua piv txwv thawj zaug ntawm pab pawg-id