Направите скривену траку за претрагу са ХТМЛ-ом, ЦСС-ом и ЈаваСцрипт-ом

Интерактивни ГУИ елементи чине вашу апликацију лакшом за коришћење. ХТМЛ подразумевано укључује неколико компоненти обрасца, али ћете желети да користите ЦСС тако да одговарају вашем дизајну. Такође можете користити ЈаваСцрипт да проширите или измените њихово понашање.

Такве компоненте можете креирати користећи библиотеку као што је Таилвинд, али је корисно знати и како да их креирате од нуле.

Сазнајте како да направите скривену траку за претрагу користећи ХТМЛ, ЦСС и ЈаваСцрипт.

Креирајте структуру садржаја помоћу ХТМЛ-а

Ево ХТМЛ кода за ову функцију. Имаћете родитељски елемент који садржи улаз и елемент дугмета. Такође ћете увести скрипте одличне за фонт за икону за претрагу. У овом случају, користићете икону за претрагу са лупом.

хтмл>
<хтмлланг="ен">
<глава>
<метацхарсет="УТФ-8" />
<метахттп-екуив="Кс-УА-Цомпатибле"садржаја=„ИЕ=ивица“ />
<метаиме="виевпорт"садржаја="видтх=девице-видтх, инитиал-сцале=1.0" />

instagram viewer

<скриптасрц=" https://kit.fontawesome.com/d69fb28507.js"унакрсно порекло="анонимно">скрипта>
<наслов>Скривена трака за претрагунаслов>
глава>

<тело>
<дивкласа="родитељ">
<улазникласа="улазни"тип="тип"чувар места="Претрага..." />
<дугмекласа="бтн">
<икласа="фа-солид фа-лупа">и>
дугме>
див>
тело>
хтмл>

Стилизирајте интерфејс користећи ЦСС

У ЦСС датотеци морате родитељском елементу дати релативну позицију. Релативни положај омогућава елементима уноса и дугмета да се крећу око родитеља. Тхе ЦСС својство позиције контролише неколико типова распореда, тако да је важно разумети.

Такође ћете поравнати оба елемента у центру ради боље видљивости. Али у својој апликацији можете изабрати да имате траку за претрагу кад год желите. Такође, дајте оба елемента исту ширину тако да изгледају исте величине, а не један већи од другог.

Затим морате дати родитељу активну класу за елементе уноса и дугмета. На овај начин, он ће се трансформисати како је наведено кад год се елемент помери.

* {
маргина: 0;
паддинг: 0;
бок-сизинг: гранична кутија;
}
тело {
боја позадине: #д9д9д9;
висина: 100вх;
приказ: флек;
алигн-итемс: центар;
оправдати-садржај: центар;
}
.родитељ {
положај: релативан;
}
.улазни {
нацрт: ниједан;
граница: ниједан;
граница-радијус: 100пк;
паддинг: 5пк 10пк;
ширина: 40пк;
прелаз: ширина 0.3сублажити, лакоца;
}
.улазни::плацехолдер {
боја: зелен;
}
.родитељ.активан.улазни {
ширина: 200пк;
}
.бтн {
ширина: 40пк;
паддинг: 5пк 10пк;
курсор: показивач;
граница-радијус: 100пк;
граница: ниједан;
позадини: зелен;
приказ: у реду;
кутија-сенка: 0 0 5пкргба(0, 0, 0, 0.2);
положај: апсолутни;
топ: 0;
лево: 0;
прелаз: преобразити 0.3сублажити, лакоца;
}
.родитељ.активан.бтн {
преобразити: транслатеКс(210пк);
}
.фа-солид {
боја: #фффффф;
}

Требало би да имате дугме за претрагу овако:

Додајте ЈаваСцрипт функционалност

Затим напишите ЈаваСцрипт код за елементе. Прво изаберите родитељ, унос и елементе дугмета користећи ЈаваСцрипт куериСелецтор() методом.

Затим додајте слушалац догађаја клика на дугме. Дакле, када се кликне, дугме се пребацује у складу са изабраном класом. Додајте фокус() метод за постављање фокуса на наведени елемент. Почиње да трепери кад год се трака за претрагу прошири.

дозволити улаз = документ.куериСелецтор(".улазни");
дозволити бтн = документ.куериСелецтор(".бтн");
дозволити родитељ = документ.куериСелецтор(".родитељ");
бтн.аддЕвентЛистенер("кликни", () => {
 парент.цлассЛист.тоггле("активан");
 инпут.фоцус();
});

Ако кликнете на дугме, отвара се трака за претрагу и обрнуто. Изгледа као што је приказано на следећем дијаграму:

Сада, ако унесете информације и кликнете на дугме, затвара се док систем тражи информације.

Супер, зар не? Можете видети овај код и играти се са укљученом траком за претрагу цодепен.ио. Можете додатно да прилагодите траку за претрагу креирањем а листа траке за претрагу предмета. Ово олакшава вашим корисницима да претражују апликацију.

Друге функције које можете креирати

Као почетник у веб развоју, постоји много функција које можете креирати помоћу ХТМЛ-а, ЦСС-а и ЈаваСцрипт-а. Можете да креирате искачући/модални прозор, клизач слике, аутоматски ажурирање подножја и још много тога.

Такви креативни пројекти су одлични за учење концепта програмирања. Можете да примените вештине док их научите што повећава корисност вештине. Такође, можете да креирате сјајне корисничке интерфејсе у којима ћете ви и ваши корисници уживати. Користите овај водич да бисте креирали скривену траку за претрагу и друге интерактивне функције за своју веб локацију.