Аккордеоны цэс: 4 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:02

Зөвхөн HTML болон CSS ашиглан олон түвшний баян хуур цэс үүсгээрэй.

Би төслүүддээ Raspberry Pi ашигладаг боловч энэ нь ямар ч вэб сервер дээр ажиллах боломжтой.

Тодорхой вэб элементийг хэрхэн бий болгох жишээг өгөхийн оронд миний төсөлд ашигласан элемент бүрийн ажлын жишээг агуулсан загвартай болох зорилго тавьсан. Ажиллаж байгаа зүйлийг өөрчлөх, дараа нь ажиллуулахыг оролдох нь илүү хялбар байдаг.

Аккордеоны цэсийг компьютер, дэвсгэр эсвэл гар утсаар дамжуулан Raspberry Pi төхөөрөмжийн интерфейс болгон ашиглаж болно. Би lighttpd дээр ажилладаг Raspberry Pi ашиглаж байхад ямар ч техник хангамж, вэб сервер ашиглаж болно.

Raspberry Pi төсөл бүр интерфэйстэй байх ёстой. Дэлгэцийн хэмжээ харьцангуй бага тул гар утас хамгийн хязгаарлагдмал байдаг. Аккордеоны цэс нь утасны хязгаарыг тойрч (+) өргөтгөж (-) босоо байдлаар буулгаж, шаардлагатай бол цэсийн олон зүйлийг зөвшөөрдөг.

Вэб дээр баян хуур цэс хийх олон жишээ бий. OpenHAB эсвэл OpenSprinkler-ийн гадаад төрх байдал надад таалагддаг тул би үүнтэй төстэй зүйлийг хүсч байсан.

Өнөөг хүртэл миний Raspberry Pi төслийн цэс маш энгийн байсан. Би гадаад төрхдөө нэг их цаг зарцуулаагүй. Миний ихэнх интерфэйсүүд зөвхөн HTML дээр бичигдсэн бөгөөд CSS ашигладаггүй. Би UI дизайнер биш бөгөөд гадаад төрхөөрөө ажиллах нь миний тав тухтай бүсээс гадуур юм. Би вэбсайт дээр байнга ажилладаггүй тул CSS -ийг олон удаа сурч, мартсан. Би цэсийг нэг удаа харагдуулж, зөв болгоод дараа нь дахин ашиглахыг хүссэн.

Миний аппликешнд надад дараах цэс хэрэгтэй байна.

• бусад вэбсайт эсвэл төхөөрөмжүүдийн холбоосууд,
• утга эсвэл статусыг харуулах ба
• үнэт зүйлсийн шинэчлэлтийг зөвшөөрөх.

Сүүлийн хоёр нь HTML болон CSS -ээс ихийг шаарддаг.

Надад хичнээн цэс хэрэгтэй болохыг би урьдчилан мэдэхгүй байгаа тул баян хуурын цэс нь уян хатан байдлаар цэсийг шаардлагатай хэмжээгээр өргөжүүлэх боломжийг олгодог.

Миний CSS болон HTML дээр бичсэн сэтгэгдлүүд арай дээгүүр байж магадгүй, гэхдээ би сэтгэгдлүүдийг хараад CSS-ийг дахин сурахгүйгээр өөрийн хэрэгцээнд нийцүүлэн цэсийг хэрхэн өөрчлөх талаар мэдэж болно. Сэтгэгдлүүд нь CSS нь HTML хооронд хэрхэн нөлөөлж байгааг ойлгоход хялбар болгодог.

Надад өөр хэд хэдэн шаардлага байсан:

• Заримдаа манай байшин интернетгүй болно. Тиймээс, цэсийн систем нь гадаад фонт, API эсвэл javascript агуулсан гадаад вэбсайтуудын холбоосоос хамааралтай байж чадахгүй
• Манай гэр бүл компьютерын амттай бөгөөд iPhone, android, MAC, PC, iPad, таблет, хром, firefox, safari, IE ашигладаг. Эдгээр бүх зүйл дээр цэс ажиллах ёстой

Би баян хуур цэсийн янз бүрийн хувилбаруудыг туршиж үзэхэд хэдэн долоо хоног зарцуулсан. Тэднийг засах, дасан зохицох, татгалзах. CSS скрипт вэбсайт нь миний бүх шаардлагыг хангасан олон түвшний цэстэй бөгөөд энэхүү зааварчилгааны үндэс суурь болно.

Алхам 1: Алхам алхмаар суулгах

MacBook эсвэл PC дээр терминалын цонхыг нээгээд дараах тушаалуудыг ажиллуулна уу.

In -ийн зүйлсийг бодит утгуудаар солих.

Raspberry Pi руу нэвтэрнэ үү

$ ssh pi@♣ бөөрөлзгөнө-pi-ip-хаяг ♣

Үндсэн лавлах болгон өөрчлөх

$ 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/ бөөрөлзгөнө-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 эсвэл PC дээр татаж авах боломжтой. Цэсийг Mac эсвэл PC -ээс ажиллуулахын тулд

• index.html дээр хоёр дарна уу
• index.html -ийг сонгоод хулганы баруун товчийг дараад хүссэн хөтөчөө нээнэ үү.

Хэрэв Raspberry Pi ашиглаж байгаа бол энэ нь вэб сервер ажиллуулж байх ёстой. Компьютер эсвэл Mac дээрээ хөтөчийг нээгээд URL цонхонд дараахийг оруулна уу.

♣ бөөрөлзгөнө-pi-ip-хаяг ♣/index.html

Миний сервер аюулгүй холболт шаарддаг (бүдүүн гэдэсний эргэн тойрон дахь хоосон зайг арилгах):

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

Тэгээд ажилладаг!

Алхам 2: Хавсралт: Ашигласан материал

• CSS скрипт Зөвхөн HTML болон CSS ашиглан олон түвшний баян хуур цэс
• W3Schools баян хуур цэс
• W3Schools CSS
• W3Schools HTML

Алхам 3: Хавсралт: Шинэчлэлтүүд

Алхам 4: Хавсралт: Алдааг олж засварлах

Энд туслах зарим санаанууд байна:

• HTML -ийг php echo мэдэгдэлд форматлахын тулд төгсгөлд нь "\ r" гэж нэмж буцаах тэмдэгт оруулна уу
• Дэд цэсийн бүлгийн ID өвөрмөц байх ёстой. Хэрэв дэд цэсний group-id өвөрмөц биш бол дэд цэсийн зүйлүүдийг group-id-ийн эхний жишээнд оруулах болно.