Vytvorte skrytý panel vyhľadávania pomocou HTML, CSS a JavaScriptu

Interaktívne prvky GUI uľahčujú používanie vašej aplikácie. HTML štandardne obsahuje niekoľko komponentov formulára, ale budete chcieť použiť CSS, aby vyhovovali vášmu dizajnu. Na rozšírenie alebo úpravu ich správania môžete použiť aj JavaScript.

Takéto komponenty môžete vytvoriť pomocou knižnice, ako je Tailwind, ale je užitočné vedieť, ako ich vytvoriť aj od začiatku.

Zistite, ako vytvoriť skrytý panel vyhľadávania pomocou HTML, CSS a JavaScriptu.

Vytvorte štruktúru obsahu pomocou HTML

Tu je kód HTML pre túto funkciu. Budete mať nadradený prvok, ktorý obsahuje prvok vstupu a tlačidla. Budete tiež importovať skripty s úžasným písmom pre ikonu vyhľadávania. V tomto prípade použijete ikonu vyhľadávania lupou.

html>
<htmllang="sk">
<hlavu>
<metaznakovú sadu="UTF-8" />
<metahttp-ekviv="X-UA-kompatibilné"obsahu="IE=okraj" />
<metanázov="výrez"obsahu="width=device-width, initial-scale=1.0" />
<skriptsrc=" https://kit.fontawesome.com/d69fb28507.js"crossorigin="anonymný">





instagram viewer
skript>
<titul>Panel skrytého vyhľadávaniatitul>
hlavu>

<telo>
<divtrieda="rodič">
<vstuptrieda="vstup"typu="typ"zástupný symbol="Vyhľadávanie..." />
<tlačidlotrieda="btn">
<itrieda="fa-solid fa-lupa">i>
tlačidlo>
div>
telo>
html>

Štýl rozhrania pomocou CSS

V súbore CSS musíte nadradenému prvku priradiť pozíciu relatívneho. Relatívna poloha umožňuje vstupným a tlačidlovým prvkom pohybovať sa okolo rodiča. The Vlastnosť pozície CSS ovláda niekoľko typov rozloženia, takže je dôležité mu porozumieť.

Oba prvky tiež zarovnáte na stred pre lepšiu viditeľnosť. Vo svojej aplikácii si však môžete zvoliť, že budete mať vyhľadávací panel, kedykoľvek budete chcieť. Tiež dajte obom prvkom rovnakú šírku, aby vyzerali rovnako veľké a nie jeden väčší ako druhý.

Potom musíte dať rodičovi aktívnu triedu pre vstupné aj tlačidlové prvky. Týmto spôsobom sa bude transformovať podľa špecifikácie vždy, keď sa prvok pohne.

* {
marža: 0;
vypchávka: 0;
box-size: border-box;
}
telo {
farba pozadia: #d9d9d9;
výška: 100vh;
displej: flex;
align-items: stred;
ospravedlniť-obsah: stred;
}
.rodič {
pozíciu: príbuzný;
}
.vstup {
obrys: žiadny;
hranica: žiadny;
hraničný polomer: 100px;
vypchávka: 5px 10px;
šírka: 40px;
prechod: šírka 00,3 sľahkosť;
}
.vstup::zástupný znak {
farba: zelená;
}
.rodič.aktívny.vstup {
šírka: 200px;
}
.btn {
šírka: 40px;
vypchávka: 5px 10px;
kurzor: ukazovateľ;
hraničný polomer: 100px;
hranica: žiadny;
pozadie: zelená;
displej: v rade;
box-shadow: 0 0 5pxrgba(0, 0, 0, 0.2);
pozíciu: absolútne;
top: 0;
vľavo: 0;
prechod: transformovať 00,3 sľahkosť;
}
.rodič.aktívny.btn {
transformovať: translateX(210px);
}
.fa-pevný {
farba: #ffffff;
}

Tlačidlo vyhľadávania by malo vyzerať takto:

Pridajte funkciu JavaScript

Ďalej napíšte kód JavaScript pre prvky. Najprv vyberte rodičovský prvok, vstupný prvok a prvky tlačidla pomocou JavaScriptu querySelector() metóda.

Potom k tlačidlu pridajte prijímač udalosti kliknutia. Takže po kliknutí sa tlačidlo prepína podľa zvolenej triedy. Pridajte zameranie() metóda na nastavenie zamerania na zadaný prvok. Začne blikať vždy, keď sa rozbalí vyhľadávací panel.

nech vstup = dokument.querySelector(".vstup");
nech btn = dokument.querySelector(".btn");
nech rodič = dokument.querySelector(".rodič");
btn.addEventListener("klik", () => {
 parent.classList.toggle("aktívny");
 input.focus();
});

Ak kliknete na tlačidlo, otvorí sa panel vyhľadávania a naopak. Vyzerá to, ako je znázornené na nasledujúcom diagrame:

Teraz, ak zadáte informácie a kliknete na tlačidlo, zatvorí sa, keď systém hľadá informácie.

Super, nie? Môžete vidieť tento kód a hrať sa so zapnutým vyhľadávacím panelom codepen.io. Panel vyhľadávania môžete ďalej prispôsobiť vytvorením a zoznam vyhľadávacieho panela položiek. Vašim používateľom to uľahčuje vyhľadávanie v aplikácii.

Ďalšie funkcie, ktoré môžete vytvoriť

Ako začiatočník vo vývoji webu môžete vytvoriť mnoho funkcií pomocou HTML, CSS a JavaScriptu. Môžete vytvoriť kontextové/modálne okno, posúvač obrázkov, automatickú aktualizáciu päty a mnoho ďalších.

Takéto kreatívne projekty sú skvelé na učenie sa konceptov programovania. Zručnosti môžete uplatniť, keď sa ich naučíte, čo zvyšuje užitočnosť zručnosti. Môžete tiež vytvoriť skvelé používateľské rozhrania, ktoré si vy a vaši používatelia užijete. Použite túto príručku na vytvorenie skrytého vyhľadávacieho panela a ďalších interaktívnych funkcií pre vašu lokalitu.