Izveidojiet slēptās meklēšanas joslu, izmantojot HTML, CSS un JavaScript

Interaktīvie GUI elementi atvieglo lietojumprogrammas lietošanu. HTML pēc noklusējuma ietver vairākus veidlapas komponentus, taču vēlēsities izmantot CSS, lai tie atbilstu jūsu dizainam. Varat arī izmantot JavaScript, lai paplašinātu vai mainītu to darbību.

Šādus komponentus var izveidot, izmantojot bibliotēku, piemēram, Tailwind, taču ir noderīgi zināt, kā tos izveidot arī no jauna.

Uzziniet, kā izveidot slēptu meklēšanas joslu, izmantojot HTML, CSS un JavaScript.

Izveidojiet satura struktūru, izmantojot HTML

Šeit ir funkcijas HTML kods. Jums būs vecāku elements, kas satur ievadi un pogas elementu. Jūs arī importēsit satriecošus skriptus meklēšanas ikonai. Šajā gadījumā jūs izmantosit palielināmā stikla meklēšanas ikonu.

html>
<htmllang="lv">
<galvu>
<metarakstzīmju kopa="UTF-8" />
<metahttp-ekv="X-UA saderīgs"saturu="IE = mala" />
<metanosaukums="skata logs"saturu="platums = ierīces platums, sākotnējais mērogs = 1,0" />





instagram viewer

<skriptssrc=" https://kit.fontawesome.com/d69fb28507.js"krusta izcelsme="Anonīms">skripts>
<virsraksts>Slēptā meklēšanas joslavirsraksts>
galvu>

<ķermeni>
<divklasē="vecāks">
<ievadeklasē="ievade"veids="tips"vietturis="Meklēt..." />
<poguklasē="btn">
<iklasē="fa-solid fa-lupa">i>
pogu>
div>
ķermeni>
html>

Veidojiet interfeisa stilu, izmantojot CSS

CSS failā vecākajam elementam ir jānorāda relatīvā pozīcija. Relatīvā pozīcija ļauj ievades un pogas elementiem pārvietoties pa vecāku elementu. The CSS pozīcijas īpašums kontrolē vairākus izkārtojuma veidus, tāpēc tas ir svarīgi saprast.

Jūs arī izlīdzināsit abus elementus centrā, lai nodrošinātu labāku redzamību. Taču savā lietojumprogrammā varat izvēlēties, lai meklēšanas josla būtu jebkurā laikā. Turklāt piešķiriet abiem elementiem vienādu platumu, lai tie izskatītos vienāda izmēra un nebūtu lielāki par otru.

Tad jums ir jāpiešķir vecākam aktīva klase gan ievades, gan pogas elementiem. Tādā veidā tas tiks pārveidots, kā norādīts ikreiz, kad elements pārvietojas.

* {
starpība: 0;
polsterējums: 0;
kastes izmēra noteikšana: apmale-box;
}
ķermeni {
fona krāsa: #d9d9d9;
augstums: 100vh;
displejs: flex;
izlīdzināt vienumus: centrs;
attaisnot-saturs: centrs;
}
.vecāks {
pozīciju: radinieks;
}
.ievade {
kontūru: neviens;
robeža: neviens;
robeža-rādiuss: 100px;
polsterējums: 5px 10px;
platums: 40px;
pāreja: platums 0.3svieglumu;
}
.ievade::vietturis {
krāsa: zaļš;
}
.vecāks.aktīvs.ievade {
platums: 200px;
}
.btn {
platums: 40px;
polsterējums: 5px 10px;
kursors: rādītājs;
robeža-rādiuss: 100px;
robeža: neviens;
fons: zaļš;
displejs: rindā;
kaste-ēna: 0 0 5pxrgba(0, 0, 0, 0.2);
pozīciju: absolūts;
tops: 0;
pa kreisi: 0;
pāreja: pārveidot 0.3svieglumu;
}
.vecāks.aktīvs.btn {
pārveidot: tulkotX(210px);
}
.fa-ciets {
krāsa: #ffffff;
}

Jums vajadzētu būt meklēšanas pogai, kas izskatās šādi:

Pievienojiet JavaScript funkcionalitāti

Pēc tam ierakstiet elementu JavaScript kodu. Vispirms atlasiet vecāku, ievades un pogas elementus, izmantojot JavaScript querySelector() metodi.

Pēc tam pogai pievienojiet klikšķu notikumu uztvērēju. Tātad, noklikšķinot, poga pārslēdzas atbilstoši atlasītajai klasei. Pievienojiet fokuss () metode, lai iestatītu fokusu uz norādīto elementu. Tas sāk mirgot ikreiz, kad tiek paplašināta meklēšanas josla.

ļaut ievade = dokumentu.querySelector(".input");
ļaut btn = dokumentu.querySelector(".btn");
ļaut vecāks = dokumentu.querySelector(".parent");
btn.addEventListener("klikšķis", () => {
 parent.classList.toggle("aktīvs");
 ievade.focus();
});

Noklikšķinot uz pogas, tiek atvērta meklēšanas josla un otrādi. Tas parādās, kā parādīts nākamajā diagrammā:

Tagad, ja ievadāt informāciju un noklikšķiniet uz pogas, sistēma tiek aizvērta, kad sistēma meklē informāciju.

Forši, vai ne? Varat redzēt šo kodu un spēlēt, kad ir ieslēgta meklēšanas josla codepen.io. Varat vēl vairāk pielāgot meklēšanas joslu, izveidojot a meklēšanas joslu saraksts no vienumiem. Tādējādi lietotājiem ir vieglāk veikt meklēšanu lietotnē.

Citas iespējas, kuras varat izveidot

Kā iesācējs tīmekļa izstrādē varat izveidot daudzas funkcijas, izmantojot HTML, CSS un JavaScript. Varat izveidot uznirstošo/modālo logu, attēla slīdni, kājenes automātisko atjauninātāju un daudz ko citu.

Šādi radoši projekti ir lieliski piemēroti programmēšanas koncepciju apguvei. Jūs varat izmantot prasmes, kad tās apgūstat, kas palielina prasmes lietderību. Turklāt jūs varat izveidot lieliskas lietotāja saskarnes, kas patiks jums un jūsu lietotājiem. Izmantojiet šo rokasgrāmatu, lai savai vietnei izveidotu slēptu meklēšanas joslu un citas interaktīvas funkcijas.