Ustvarite skrito iskalno vrstico s HTML, CSS in JavaScript

Interaktivni elementi GUI olajšajo uporabo vaše aplikacije. HTML privzeto vključuje več komponent obrazca, vendar boste želeli uporabiti CSS, da bodo ustrezale vašemu dizajnu. Uporabite lahko tudi JavaScript, da razširite ali spremenite njihovo vedenje.

Takšne komponente lahko ustvarite s knjižnico, kot je Tailwind, vendar je koristno vedeti, kako jih ustvariti tudi iz nič.

Ugotovite, kako ustvariti skrito iskalno vrstico s HTML, CSS in JavaScript.

Ustvarite strukturo vsebine s HTML

Tukaj je koda HTML za funkcijo. Imeli boste nadrejeni element, ki vsebuje vnos in element gumba. Za ikono iskanja boste uvozili tudi čudovite skripte pisave. V tem primeru boste uporabili ikono za iskanje v obliki povečevalnega stekla.

html>
<htmljezik="en">
<glavo>
<metanabor znakov="UTF-8" />
<metahttp-ekviv="Združljivo z X-UA"vsebino="IE=rob" />
<metaime="viewport"vsebino="width=device-width, initial-scale=1.0" />
<scenarijsrc=" https://kit.fontawesome.com/d69fb28507.js"navzkrižni izvor="anonimno">





instagram viewer
scenarij>
<naslov>Skrita iskalna vrsticanaslov>
glavo>

<telo>
<divrazred="starš">
<vnosrazred="vnos"vrsta="tip"rezervirano mesto="Iskanje..." />
<gumbrazred="btn">
<jazrazred="fa-trdno fa-povečevalno-steklo">jaz>
gumb>
div>
telo>
html>

Oblikujte vmesnik z uporabo CSS

V datoteki CSS morate nadrejenemu elementu dati položaj relativnega. Relativni položaj omogoča premikanje elementov vnosa in gumbov okoli nadrejenega. The Lastnost položaja CSS nadzoruje več vrst postavitve, zato jo je pomembno razumeti.

Prav tako boste oba elementa poravnali na sredino za boljšo vidljivost. Toda v svoji aplikaciji lahko izberete, da imate iskalno vrstico kadar koli želite. Prav tako dajte obema elementoma enako širino, da bosta videti enako velika in ne bosta večja od drugega.

Nato morate nadrejenemu elementu dati aktivni razred za elemente vnosa in gumba. Na ta način se bo preoblikoval, kot je določeno, kadar koli se element premakne.

* {
marža: 0;
oblazinjenje: 0;
velikost škatle: border-box;
}
telo {
Barva ozadja: #d9d9d9;
višina: 100vh;
zaslon: flex;
align-items: center;
justify-content: center;
}
.starš {
položaj: relativno;
}
.vnos {
oris: nič;
meja: nič;
mejni polmer: 100px;
oblazinjenje: 5px 10px;
premer: 40px;
prehod: premer 0.3senostavnost;
}
.vnos::rezervirano mesto {
barva: zelena;
}
.starš.aktiven.vnos {
premer: 200px;
}
.btn {
premer: 40px;
oblazinjenje: 5px 10px;
kazalec: kazalec;
mejni polmer: 100px;
meja: nič;
ozadje: zelena;
zaslon: v vrsti;
box-shadow: 0 0 5pxrgba(0, 0, 0, 0.2);
položaj: absolutno;
vrh: 0;
levo: 0;
prehod: transformirati 0.3senostavnost;
}
.starš.aktiven.btn {
transformirati: translateX(210px);
}
.fa-trdno {
barva: #ffffff;
}

Gumb za iskanje bi moral biti videti takole:

Dodajte funkcijo JavaScript

Nato napišite kodo JavaScript za elemente. Najprej z JavaScriptom izberite nadrejene elemente, elemente vnosa in gumb querySelector() metoda.

Nato gumbu dodajte poslušalca dogodka klika. Tako se ob kliku gumb preklopi glede na izbrani razred. Dodajte fokus() metoda za nastavitev fokusa na določen element. Začne utripati vsakič, ko se iskalna vrstica razširi.

pustiti vnos = dokument.querySelector(".input");
pustiti btn = dokument.querySelector(".btn");
pustiti starš = dokument.querySelector(".parent");
btn.addEventListener("klik", () => {
 parent.classList.toggle("aktiven");
 input.focus();
});

Če kliknete na gumb, se odpre iskalna vrstica in obratno. Videti je, kot je prikazano v naslednjem diagramu:

Zdaj, če vnesete informacije in kliknete gumb, se zapre, ko sistem išče informacije.

Kul, kajne? To kodo si lahko ogledate in se poigrate z vključeno iskalno vrstico codepen.io. Iskalno vrstico lahko dodatno prilagodite tako, da ustvarite seznam iskalne vrstice predmetov. To vašim uporabnikom olajša iskanje v aplikaciji.

Druge funkcije, ki jih lahko ustvarite

Kot začetnik v spletnem razvoju lahko ustvarite veliko funkcij s HTML, CSS in JavaScript. Ustvarite lahko pojavno/modalno okno, drsnik za slike, samodejno posodabljanje noge in še veliko več.

Takšni kreativni projekti so odlični za učenje konceptov programiranja. Spretnosti lahko uporabite, ko se jih naučite, kar poveča uporabnost spretnosti. Poleg tega lahko ustvarite odlične uporabniške vmesnike, v katerih boste uživali vi in ​​vaši uporabniki. S tem priročnikom ustvarite skrito iskalno vrstico in druge interaktivne funkcije za vaše spletno mesto.