Naučite kako izraditi proširivu traku za pretraživanje pomoću običnog HTML-a, CSS-a i JavaScripta.

Interaktivni GUI elementi čine vašu aplikaciju lakšom za korištenje. HTML prema zadanim postavkama uključuje nekoliko komponenti obrasca, ali trebali biste upotrijebiti CSS kako bi odgovarale vašem dizajnu. Također možete koristiti JavaScript da proširite ili izmijenite njihovo ponašanje.

Takve komponente možete izraditi pomoću biblioteke kao što je Tailwind, ali korisno je znati i kako ih izraditi od nule.

Saznajte kako stvoriti skrivenu traku za pretraživanje koristeći HTML, CSS i JavaScript.

Stvorite strukturu sadržaja pomoću HTML-a

Evo HTML koda za značajku. Imat ćete nadređeni element koji sadrži element unosa i gumba. Također ćete uvesti font-awesome skripte za ikonu pretraživanja. U ovom slučaju, koristit ćete ikonu za pretraživanje u obliku povećala.

html>
<htmljezik="en">
<glava>
<metaskup znakova="UTF-8" />
<metahttp-ekviv="X-UA-kompatibilno"sadržaj="IE=rub" />
<metaIme="viewport"sadržaj="width=device-width, initial-scale=1.0" />





instagram viewer


<skriptasrc=" https://kit.fontawesome.com/d69fb28507.js"unakrsno podrijetlo="anonimno">skripta>
<titula>Skrivena traka za pretraživanjetitula>
glava>


<tijelo>
<divrazreda="roditelj">
<ulaznirazreda="ulazni"tip="tip"rezerviranog mjesta="Traži..." />


<dugmerazreda="btn">
<jarazreda="fa-čvrsto fa-povećalo">ja>
dugme>
div>
tijelo>
html>

Stilizirajte sučelje koristeći CSS

U CSS datoteci morate nadređenom elementu dati položaj relativnog. Relativni položaj omogućuje elementima unosa i gumba da se kreću oko roditelja. The CSS svojstvo pozicije kontrolira nekoliko vrsta rasporeda, pa ga je važno razumjeti.

Također ćete poravnati oba elementa u sredini radi bolje vidljivosti. Ali u svojoj aplikaciji možete odabrati traku za pretraživanje kad god želite. Također, dajte oba elementa iste širine kako bi izgledali iste veličine, a ne jedan veći od drugog.

Tada roditelju morate dati aktivnu klasu i za elemente unosa i za elemente gumba. Na taj način će se transformirati kako je navedeno kad god se element pomakne.

* {
margina: 0;
podstava: 0;
dimenzioniranje kutije: rubni okvir;
}
tijelo {
boja pozadine: #d9d9d9;
visina: 100vh;
prikaz: savijati;
align-items: centar;
opravdati-sadržaj: centar;
}


.roditelj {
položaj: relativna;
}


.ulazni {
obris: nikakav;
granica: nikakav;
granični radijus: 100px;
podstava: 5px 10px;
širina: 40px;
tranzicija: širina 0.3solakšati;
}


.ulazni::rezerviranog mjesta {
boja: zelena;
}


.roditelj.aktivan.ulazni {
širina: 200px;
}


.btn {
širina: 40px;
podstava: 5px 10px;
kursor: pokazivač;
granični radijus: 100px;
granica: nikakav;
pozadina: zelena;
prikaz: u redu;
kutija-sjena: 0 0 5pxrgba(0, 0, 0, 0.2);
položaj: apsolutni;
vrh: 0;
lijevo: 0;
tranzicija: transformirati 0.3solakšati;
}


.roditelj.aktivan.btn {
transformirati: prevestiX(210px);
}
.fa-čvrsto {
boja: #ffffff;
}

Trebali biste imati gumb za pretraživanje koji izgleda ovako:

Dodajte JavaScript funkcionalnost

Zatim napišite JavaScript kod za elemente. Prvo odaberite nadređene elemente, elemente unosa i gumba pomoću JavaScripta querySelector() metoda.

Zatim gumbu dodajte slušatelja događaja klika. Dakle, kada se klikne, gumb se mijenja prema odabranoj klasi. Dodajte usredotočenost() metoda za postavljanje fokusa na navedeni element. Počinje treperiti kad god se traka za pretraživanje proširi.

neka unos = dokument.querySelector(".ulazni");
neka btn = dokument.querySelector(".btn");
neka roditelj = dokument.querySelector(".roditelj");
btn.addEventListener("klik", () => {
 parent.classList.toggle("aktivan");
 unos.fokus();
});

Ako kliknete na gumb, otvara se traka za pretraživanje i obrnuto. Izgleda kao što je prikazano na sljedećem dijagramu:

Sada, ako upišete informacije i kliknete gumb, on se zatvara dok sustav traži informacije.

Cool, zar ne? Možete vidjeti ovaj kod i igrati se s uključenom trakom za pretraživanje codepen.io. Traku za pretraživanje možete dodatno prilagoditi stvaranjem popis trake za pretraživanje predmeta. To vašim korisnicima olakšava pretraživanje u aplikaciji.

Ostale značajke koje možete izraditi

Kao početnik u razvoju weba, postoje mnoge značajke koje možete stvoriti pomoću HTML-a, CSS-a i JavaScripta. Možete stvoriti skočni/modalni prozor, klizač slike, automatski ažurirati podnožje i još mnogo toga.

Takvi kreativni projekti izvrsni su za učenje koncepata programiranja. Možete primijeniti vještine dok ih učite, što povećava korisnost vještine. Također, možete stvoriti sjajna korisnička sučelja u kojima ćete uživati ​​vi i vaši korisnici. Upotrijebite ovaj vodič za stvaranje skrivene trake za pretraživanje i drugih interaktivnih značajki za vaše web mjesto.