Sukurkite paslėptą paieškos juostą naudodami HTML, CSS ir JavaScript

Interaktyvūs GUI elementai palengvina jūsų programos naudojimą. Pagal numatytuosius nustatymus HTML apima kelis formos komponentus, tačiau norėsite naudoti CSS, kad jie atitiktų jūsų dizainą. Taip pat galite naudoti „JavaScript“, kad išplėstumėte arba pakeistumėte jų elgesį.

Tokius komponentus galite sukurti naudodami biblioteką, pvz., Tailwind, tačiau naudinga žinoti, kaip juos sukurti nuo nulio.

Sužinokite, kaip sukurti paslėptą paieškos juostą naudojant HTML, CSS ir JavaScript.

Sukurkite turinio struktūrą naudodami HTML

Štai funkcijos HTML kodas. Turėsite pirminį elementą, kuriame yra įvestis ir mygtuko elementas. Taip pat importuosite nuostabius paieškos piktogramos scenarijus. Tokiu atveju naudosite didinamojo stiklo paieškos piktogramą.

html>
<htmllang="en">
<galva>
<metasimbolių rinkinys="UTF-8" />
<metahttp-equiv=„Suderinamas su X-UA“turinys="IE = kraštas" />
<metavardas="žiūros sritis"turinys="plotis = įrenginio plotis, pradinė skalė = 1,0" />





instagram viewer

<scenarijussrc=" https://kit.fontawesome.com/d69fb28507.js"kryžminė kilmė="Anoniminis">scenarijus>
<titulą>Paslėpta paieškos juostatitulą>
galva>

<kūnas>
<divklasė="tėvas">
<įvestisklasė="įvestis"tipo="tipas"vietos rezervuaras="Paieška..." />
<mygtukąklasė="btn">
<iklasė="fa-solid fa-didinamasis stiklas">i>
mygtuką>
div>
kūnas>
html>

Sukurkite sąsajos stilių naudodami CSS

CSS faile pirminiam elementui turite nurodyti santykinę padėtį. Santykinė padėtis leidžia įvesties ir mygtukų elementams judėti pirminiame elemente. The CSS pozicijos nuosavybė valdo kelis išdėstymo tipus, todėl svarbu tai suprasti.

Taip pat sulygiuosite abu elementus centre, kad būtų geriau matoma. Tačiau savo programoje galite pasirinkti, kad paieškos juosta būtų bet kada. Be to, abu elementai turi būti tokio paties pločio, kad jie atrodytų tokio paties dydžio ir nebūtų vienas didesni už kitą.

Tada turite suteikti tėvui aktyvią klasę tiek įvesties, tiek mygtukų elementams. Tokiu būdu jis bus transformuojamas, kaip nurodyta, kai elementas juda.

* {
marža: 0;
kamšalas: 0;
dėžutės dydžio: kraštinė-dėžė;
}
kūnas {
fono spalva: #d9d9d9;
aukščio: 100vh;
ekranas: lankstus;
išlyginti elementus: centras;
pateisinti-turinys: centras;
}
.tėvas {
padėtis: giminaitis;
}
.įvestis {
kontūras: nė vienas;
siena: nė vienas;
pasienio spindulys: 100px;
kamšalas: 5px 10px;
plotis: 40px;
perėjimas: plotis 0.3slengvumas;
}
.įvestis::placeholder {
spalva: žalias;
}
.tėvas.aktyvus.įvestis {
plotis: 200px;
}
.btn {
plotis: 40px;
kamšalas: 5px 10px;
žymeklį: rodyklė;
pasienio spindulys: 100px;
siena: nė vienas;
fone: žalias;
ekranas: eilutę;
dėžutė-šešėlis: 0 0 5pxrgba(0, 0, 0, 0.2);
padėtis: absoliutus;
viršuje: 0;
paliko: 0;
perėjimas: transformuoti 0.3slengvumas;
}
.tėvas.aktyvus.btn {
transformuoti: išverstiX(210px);
}
.fa-kietas {
spalva: #ffffff;
}

Turėtumėte turėti paieškos mygtuką, kuris atrodytų taip:

Pridėti „JavaScript“ funkciją

Tada parašykite elementų JavaScript kodą. Pirmiausia pasirinkite pirminius, įvesties ir mygtuko elementus naudodami „JavaScript“. querySelector() metodas.

Tada prie mygtuko pridėkite spustelėjimo įvykių klausytoją. Taigi paspaudus mygtukas persijungia pagal pasirinktą klasę. Pridėkite fokusuoti () būdas nustatyti fokusą į nurodytą elementą. Jis pradeda mirksėti, kai išsiplečia paieškos juosta.

leisti įvestis = dokumentas.querySelector(".input");
leisti btn = dokumentas.querySelector(".btn");
leisti tėvas = dokumentas.querySelector(".parent");
btn.addEventListener("spausti", () => {
 parent.classList.toggle("aktyvus");
 input.focus();
});

Jei spustelėsite mygtuką, atsidarys paieškos juosta ir atvirkščiai. Tai atrodo taip, kaip parodyta šioje diagramoje:

Dabar, jei įvesite informaciją ir spustelėsite mygtuką, sistema užsidarys, kai ieškos informacijos.

Puiku, ar ne? Galite pamatyti šį kodą ir žaisti su įjungta paieškos juosta codepen.io. Galite toliau tinkinti paieškos juostą sukurdami a paieškos juostos sąrašas daiktų. Taip naudotojams lengviau atlikti paieškas programoje.

Kitos funkcijos, kurias galite sukurti

Kaip žiniatinklio kūrimo naujokas, yra daug funkcijų, kurias galite sukurti naudodami HTML, CSS ir JavaScript. Galite sukurti iššokantįjį / modalinį langą, vaizdo slankiklį, poraštės automatinį naujinimo priemonę ir daug daugiau.

Tokie kūrybiniai projektai puikiai tinka mokytis programavimo koncepcijų. Jūs galite pritaikyti įgūdžius, kai juos išmoksite, o tai padidina įgūdžių naudingumą. Be to, galėsite sukurti puikias vartotojo sąsajas, kurios patiks jums ir jūsų vartotojams. Naudokite šį vadovą norėdami sukurti paslėptą paieškos juostą ir kitas interaktyvias svetainės funkcijas.