Siit saate teada, kuidas luua tavalist HTML-i, CSS-i ja JavaScripti kasutades laienevat otsinguriba.

Interaktiivsed GUI elemendid muudavad teie rakenduse kasutamise lihtsamaks. HTML sisaldab vaikimisi mitut vormikomponenti, kuid soovite kasutada CSS-i, et need sobiksid teie kujundusega. Nende käitumise laiendamiseks või muutmiseks saate kasutada ka JavaScripti.

Selliseid komponente saate luua teeki nagu Tailwind kasutades, kuid kasulik on teada, kuidas neid ka nullist luua.

Siit saate teada, kuidas luua peidetud otsinguriba HTML-i, CSS-i ja JavaScripti abil.

Looge HTML-iga sisustruktuur

Siin on funktsiooni HTML-kood. Teil on ülemelement, mis sisaldab sisendit ja nupuelementi. Samuti impordite otsinguikooni jaoks suurepäraseid fonte sisaldavaid skripte. Sel juhul kasutate suurendusklaasi otsinguikooni.

html>
<htmllang="en">
<pea>
<metamärgistik="UTF-8" />
<metahttp-ekv="X-UA-ühilduv"sisu="IE = serv" />
<metanimi="vaateava"sisu="laius = seadme laius, esialgne skaala = 1,0" />
<stsenaariumsrc=" https://kit.fontawesome.com/d69fb28507.js"ristpäritolu="anonüümne">





instagram viewer

stsenaarium>
<pealkiri>Peidetud otsinguribapealkiri>
pea>


<keha>
<divklass="vanem">
<sisendklass="sisend"tüüp="tüüp"kohatäide="Otsing..." />


<nuppuklass="btn">
<iklass="fa-solid fa-suurendusklaas">i>
nuppu>
div>
keha>
html>

Stiilige liides CSS-i abil

CSS-failis peate andma vanemelemendile suhtelise asukoha. Suhteline asend võimaldab sisend- ja nupuelementidel liikuda vanema ümber. The CSS-i positsiooni omadus juhib mitut tüüpi paigutust, seega on oluline seda mõista.

Samuti joondate mõlemad elemendid parema nähtavuse tagamiseks keskele. Kuid oma rakenduses saate valida, et otsinguriba oleks alati, kui soovite. Samuti andke mõlemale elemendile sama laius, et need näeksid välja sama suurusega ja ei oleks teisest suuremad.

Seejärel tuleb anda vanemale aktiivne klass nii sisend- kui ka nupuelementide jaoks. Nii muundub see vastavalt määratud igale elemendi liigutamisele.

* {
marginaal: 0;
polsterdus: 0;
kasti suuruse määramine: ääris-kast;
}
keha {
taustavärv: #d9d9d9;
kõrgus: 100vh;
kuva: painduv;
joondada-üksused: Keskus;
õigustama-sisu: Keskus;
}


.vanem {
positsiooni: sugulane;
}


.sisend {
ülevaade: mitte ühtegi;
piir: mitte ühtegi;
piiriraadius: 100px;
polsterdus: 5px 10px;
laius: 40px;
üleminek: laius 0.3skergus;
}


.sisend::kohatäide {
värvi: roheline;
}


.vanem.aktiivne.sisend {
laius: 200px;
}


.btn {
laius: 40px;
polsterdus: 5px 10px;
kursor: osuti;
piiriraadius: 100px;
piir: mitte ühtegi;
taustal: roheline;
kuva: järjekorras;
kast-vari: 0 0 5pxrgba(0, 0, 0, 0.2);
positsiooni: absoluutne;
üleval: 0;
vasakule: 0;
üleminek: teisendada 0.3skergus;
}


.vanem.aktiivne.btn {
teisendada: tõlkidaX(210px);
}
.fa-tahke {
värvi: #ffffff;
}

Sul peaks olema otsingunupp, mis näeb välja selline:

Lisage JavaScripti funktsionaalsus

Järgmisena kirjutage elementide jaoks JavaScripti kood. Esmalt valige JavaScripti abil ema-, sisend- ja nupuelemendid querySelector() meetod.

Seejärel lisage nupule klõpsamissündmuste kuulaja. Nii et klõpsamisel lülitub nupp vastavalt valitud klassile. Lisage fookus () meetod fookuse seadmiseks määratud elemendile. See hakkab vilkuma alati, kui otsinguriba laieneb.

lase sisend = dokument.querySelector(".sisend");
lase btn = dokument.querySelector(".btn");
lase vanem = dokument.querySelector(".parent");
btn.addEventListener("klõpsake", () => {
 parent.classList.toggle("aktiivne");
 input.focus();
});

Kui klõpsate nupul, avaneb see otsinguriba ja vastupidi. See näeb välja nagu näidatud järgmisel diagrammil:

Nüüd, kui sisestate teabe ja klõpsate nuppu, sulgub süsteem teabe otsimisel.

Lahe, kas pole? Näete seda koodi ja saate mängida, kui otsinguriba on sisse lülitatud codepen.io. Saate otsinguriba veelgi kohandada, luues a otsinguriba loend esemetest. See muudab teie kasutajatel rakenduses otsingute tegemise lihtsamaks.

Muud funktsioonid, mida saate luua

Kui olete veebiarenduse algaja, saate HTML-i, CSS-i ja JavaScripti abil luua palju funktsioone. Saate luua hüpikakna/modaalse akna, pildiliuguri, jaluse automaatse värskendaja ja palju muud.

Sellised loomingulised projektid sobivad suurepäraselt programmeerimiskontseptsioonide õppimiseks. Saate oskusi neid õppides rakendada, mis suurendab oskuse kasulikkust. Samuti saate luua suurepäraseid kasutajaliideseid, mis teile ja teie kasutajatele meeldivad. Kasutage seda juhendit oma saidile peidetud otsinguriba ja muude interaktiivsete funktsioonide loomiseks.