Hozzon létre egy rejtett keresősávot HTML, CSS és JavaScript használatával

Az interaktív GUI-elemek megkönnyítik az alkalmazás használatát. A HTML alapértelmezés szerint több űrlap-összetevőt tartalmaz, de érdemes CSS-t használni, hogy illeszkedjenek a tervhez. Használhatja a JavaScriptet is a viselkedésük kiterjesztésére vagy módosítására.

Létrehozhat ilyen összetevőket olyan könyvtárak használatával, mint a Tailwind, de hasznos tudni, hogyan hozhatja létre őket a semmiből.

Ismerje meg, hogyan hozhat létre rejtett keresősávot HTML, CSS és JavaScript használatával.

Hozza létre a tartalomszerkezetet HTML-lel

Itt van a funkció HTML-kódja. Lesz egy szülőelem, amely egy bemenetet és egy gombelemet tartalmaz. A keresési ikonhoz is importálhat nagyszerű betűtípusú szkripteket. Ebben az esetben a nagyító kereső ikonját fogja használni.

html>
<htmllang="en">
<fej>
<metakarakterkészlet="UTF-8" />
<metahttp-equiv="X-UA-kompatibilis"tartalom="IE=él" />
<metanév="nézőablak"tartalom="szélesség = eszköz szélessége, kezdeti méret = 1,0" />

instagram viewer

<forgatókönyvsrc=" https://kit.fontawesome.com/d69fb28507.js"kereszteredet="névtelen">forgatókönyv>
<cím>Rejtett keresősávcím>
fej>

<test>
<divosztály="szülő">
<bemenetosztály="bemenet"típus="típus"helykitöltő="Keresés..." />
<gombosztály="btn">
<énosztály="fa-szilárd fa-nagyító">én>
gomb>
div>
test>
html>

A kezelőfelület stílusa CSS használatával

A CSS-fájlban meg kell adni a szülőelemnek a relatív pozíciót. A relatív pozíció lehetővé teszi a bemeneti és gombelemek mozgását a szülő körül. A CSS pozíció tulajdonság többféle elrendezést vezérel, ezért fontos megérteni.

A jobb láthatóság érdekében mindkét elemet középre igazítja. De az alkalmazásában bármikor beállíthatja a keresősávot. Ezenkívül mindkét elemnek azonos szélességet adjon meg, hogy ugyanolyan méretűnek tűnjön, és ne nagyobb legyen a másiknál.

Ezután meg kell adni a szülőnek egy aktív osztályt mind a bemeneti, mind a gombelemekhez. Ily módon a megadott módon átalakul, amikor az elem mozog.

* {
árrés: 0;
párnázás: 0;
doboz-méretezés: border-box;
}
test {
háttérszín: #d9d9d9;
magasság: 100vh;
kijelző: Flex;
align-ites: központ;
indokolja-tartalom: központ;
}
.szülő {
pozíció: relatív;
}
.bemenet {
vázlat: egyik sem;
határ: egyik sem;
határ-sugár: 100px;
párnázás: 5px 10px;
szélesség: 40px;
átmenet: szélesség 0.3skönnyedség;
}
.bemenet::helykitöltő {
szín: zöld;
}
.szülő.aktív.bemenet {
szélesség: 200px;
}
.btn {
szélesség: 40px;
párnázás: 5px 10px;
kurzor: mutató;
határ-sugár: 100px;
határ: egyik sem;
háttér: zöld;
kijelző: Sorban;
doboz-árnyék: 0 0 5pxrgba(0, 0, 0, 0.2);
pozíció: abszolút;
tetejére: 0;
bal: 0;
átmenet: átalakítani 0.3skönnyedség;
}
.szülő.aktív.btn {
átalakítani: lefordítaniX(210px);
}
.fa-szilárd {
szín: #ffffff;
}

Egy ilyen keresőgombnak kell lennie:

JavaScript funkció hozzáadása

Ezután írjon JavaScript kódot az elemekhez. Először válassza ki a szülő-, beviteli- és gombelemeket a JavaScript használatával querySelector() módszer.

Ezután adjon hozzá egy kattintásos eseményfigyelőt a gombhoz. Tehát kattintáskor a gomb a kiválasztott osztálynak megfelelően vált. Add hozzá a fókusz() módszer a fókusz beállítására a megadott elemre. Villogni kezd, amikor a keresősáv kinyílik.

hagyja bemenet = dokumentum.querySelector(".bemenet");
hagyja btn = dokumentum.querySelector(".btn");
hagyja szülő = dokumentum.querySelector(".szülő");
btn.addEventListener("kattintás", () => {
 parent.classList.toggle("aktív");
 input.focus();
});

Ha rákattint a gombra, megnyílik a keresősáv és fordítva. A következő ábrán látható módon jelenik meg:

Most, ha beírja az információkat, és rákattint a gombra, bezárul, amikor a rendszer keresi az információkat.

Klassz, nem? Láthatja ezt a kódot, és játszhat a keresősáv bekapcsolásával codepen.io. Tovább szabhatja a keresősávot, ha létrehoz egy keresősáv listája tételek közül. Ez megkönnyíti a felhasználók számára az alkalmazásban való keresést.

Egyéb létrehozható funkciók

Kezdőként a webfejlesztésben számos funkciót létrehozhat HTML, CSS és JavaScript segítségével. Létrehozhat felugró/modális ablakot, képcsúszkát, lábléc automatikus frissítőt és még sok mást.

Az ilyen kreatív projektek kiválóan alkalmasak programozási koncepciók tanulására. A készségeket a tanulás során alkalmazhatja, ami növeli a készség hasznosságát. Ezenkívül nagyszerű felhasználói felületeket hozhat létre, amelyeket Ön és felhasználói élvezni fognak. Ezzel az útmutatóval rejtett keresősávot és egyéb interaktív funkciókat hozhat létre webhelyén.