Luo piilotettu hakupalkki HTML: llä, CSS: llä ja JavaScriptillä

Interaktiiviset GUI-elementit helpottavat sovelluksesi käyttöä. HTML sisältää oletuksena useita lomakekomponentteja, mutta sinun kannattaa käyttää CSS: ää, jotta ne sopivat suunnitteluasi. Voit myös käyttää JavaScriptiä laajentaaksesi tai muokataksesi niiden toimintaa.

Voit luoda tällaisia ​​​​komponentteja käyttämällä kirjastoa, kuten Tailwind, mutta on hyödyllistä tietää, miten ne luodaan myös tyhjästä.

Opi luomaan piilotettu hakupalkki HTML: n, CSS: n ja JavaScriptin avulla.

Luo sisältörakenne HTML: llä

Tässä on ominaisuuden HTML-koodi. Sinulla on yläelementti, joka sisältää syötteen ja painikeelementin. Tuot myös fonttimahtavaisia ​​skriptejä hakukuvaketta varten. Tässä tapauksessa käytät suurennuslasihakukuvaketta.

html>
<htmllang="en">
<pää>
<metamerkkisetti="UTF-8" />
<metahttp-ekv="X-UA-yhteensopiva"sisältö="IE = reuna" />
<metanimi="näkymä"sisältö="leveys = laitteen leveys, alkumittakaava = 1,0" />
<käsikirjoitussrc=" https://kit.fontawesome.com/d69fb28507.js"ristikkäinen alkuperä="anonyymi">

instagram viewer
käsikirjoitus>
<otsikko>Piilotettu hakupalkkiotsikko>
pää>

<kehon>
<divluokkaa="vanhempi">
<syöttöluokkaa="syöttö"tyyppi="tyyppi"paikanpitäjä="Hae..." />
<-painikettaluokkaa="btn">
<iluokkaa="fa-solid fa-suurennuslasi">i>
-painiketta>
div>
kehon>
html>

Muotoile käyttöliittymä CSS: n avulla

CSS-tiedostossa sinun on annettava yläelementille suhteellinen sijainti. Suhteellisen sijainnin ansiosta syöttö- ja painikeelementit voivat liikkua ylätason ympärillä. The CSS-sijaintiominaisuus ohjaa useita asettelutyyppejä, joten se on tärkeä ymmärtää.

Kohdistat myös molemmat elementit keskelle paremman näkyvyyden parantamiseksi. Mutta sovelluksessasi voit valita, että hakupalkki on käytettävissä milloin tahansa. Anna myös molemmille elementeille sama leveys, jotta ne näyttävät samankokoisilta eivätkä toista suurempia.

Sitten sinun on annettava vanhemmalle aktiivinen luokka sekä syöttö- että painikeelementeille. Tällä tavalla se muuttuu määritetyllä tavalla aina, kun elementti liikkuu.

* {
marginaali: 0;
pehmuste: 0;
laatikon kokoinen: raja-laatikko;
}
kehon {
taustaväri: #d9d9d9;
korkeus: 100vh;
näyttö: flex;
kohdista-kohteet: keskusta;
perustele-sisältö: keskusta;
}
.vanhempi {
asema: suhteellinen;
}
.input {
ääriviivat: ei mitään;
rajaa: ei mitään;
raja-säde: 100px;
pehmuste: 5px 10px;
leveys: 40px;
siirtyminen: leveys 0.3shelppous;
}
.input::paikanpitäjä {
väri: vihreä;
}
.vanhempi.aktiivinen.input {
leveys: 200px;
}
.btn {
leveys: 40px;
pehmuste: 5px 10px;
kohdistin: osoitin;
raja-säde: 100px;
rajaa: ei mitään;
tausta: vihreä;
näyttö: linjassa;
laatikko-varjo: 0 0 5pxrgba(0, 0, 0, 0.2);
asema: ehdoton;
alkuun: 0;
vasemmalle: 0;
siirtyminen: muuttaa 0.3shelppous;
}
.vanhempi.aktiivinen.btn {
muuttaa: kääntääX(210px);
}
.fa-kiinteä {
väri: #ffffff;
}

Sinulla pitäisi olla hakupainike, joka näyttää tältä:

Lisää JavaScript-toiminto

Kirjoita seuraavaksi elementeille JavaScript-koodi. Valitse ensin ylä-, syöttö- ja painikeelementit JavaScriptin avulla querySelector() menetelmä.

Lisää sitten napsautustapahtuman kuuntelija painikkeeseen. Joten kun sitä napsautetaan, painike vaihtuu valitun luokan mukaan. Lisää tarkennus () tapa asettaa tarkennus määritettyyn elementtiin. Se alkaa vilkkua aina, kun hakupalkki laajenee.

antaa syöttö = asiakirja.querySelector(".input");
antaa btn = asiakirja.querySelector(".btn");
antaa vanhempi = asiakirja.querySelector(".parent");
btn.addEventListener("klikkaus", () => {
 parent.classList.toggle("aktiivinen");
 input.focus();
});

Jos napsautat painiketta, se avaa hakupalkin ja päinvastoin. Se näyttää seuraavan kaavion mukaisesti:

Jos nyt kirjoitat tiedot ja napsautat painiketta, se sulkeutuu, kun järjestelmä etsii tietoja.

Siistiä, eikö? Voit nähdä tämän koodin ja leikkiä hakupalkin ollessa päällä codepen.io. Voit mukauttaa hakupalkkia lisää luomalla a hakupalkkiluettelo kohteista. Näin käyttäjien on helpompi tehdä hakuja sovelluksessa.

Muut luotavat ominaisuudet

Aloittelijana verkkokehityksessä on monia ominaisuuksia, joita voit luoda HTML: llä, CSS: llä ja JavaScriptillä. Voit luoda ponnahdusikkunan/modaalisen ikkunan, kuvan liukusäätimen, alatunnisteen automaattisen päivityksen ja monia muita.

Tällaiset luovat projektit ovat hyviä ohjelmointikonseptien oppimiseen. Pääset soveltamaan taitoja oppiessasi niitä, mikä lisää taidon hyödyllisyyttä. Lisäksi voit luoda upeita käyttöliittymiä, joista sinä ja käyttäjäsi nauttivat. Tämän oppaan avulla voit luoda piilotetun hakupalkin ja muita interaktiivisia ominaisuuksia sivustollesi.