Ebben az oktatóanyagban létrehozunk egy legördülő keresési űrlapot, amely tökéletesen illeszkedik a mobil felület kialakításához. Az elem megvalósításához csak a CSS használható - nincs JavaScript vagy további jelölés. Egyszerű és hatékony módszer egy kompakt keresési űrlap megvalósításához.

Időpont egyeztetés

Mobileszközökön minden pixelt számolnak. Az űrlap megjelenítéséhez szükséges hely minimalizálása érdekében kezdetben kompakt formában jelenik meg, és a bemeneti fókusz (: fókusz) fogadásakor kibővül. Ez a megközelítés helyet takarít meg a többi interfészelem és tartalom számára.

HTML jelölés

Az űrlaphoz HTML5 -öt használnak. A kód nagyon egyszerű:

A keresési űrlap alapértelmezett nézetének visszaállítása a Webkit böngészőkben

Alapértelmezés szerint a Webkit böngészőkben a keresési űrlap így néz ki:

Annak érdekében, hogy a keresési űrlap normál szövegbeviteli mezőnek tűnjön, hozzá kell adnia a következő stílusokat:

Bemenet (-webkit-megjelenés: szövegmező; -webkit-box-méretezés: content-box; font-family: örököl; font-size: 100%;) input ::-webkit-search-decoration, input ::-webkit- keresés-törlés-gomb (kijelző: nincs;)

Kialakítjuk a keresési űrlapot

A beviteli mező szabályos szélessége 55 képpont lesz, és 130 képpont méretűre bővül a: fókusz állapotban. Az átmeneti tulajdonság az animációhoz, a box-shadow pedig a ragyogó hatáshoz használatos.

Bemenet (háttér: #ededed url (img / search-icon.png) nem ismétlődő 9 képpont középpont; szegély: szilárd 1 képpont #ccc; kitöltés: 9 képpont 10 képpont 9 képpont 32 képpont; szélesség: 55 képpont; / * Alapértelmezett szélesség * / -webkit- szegély -sugár: 10em; -moz-border-sugár: 10em; border-sugar: 10em; -webkit-átmenet: minden .5s; -moz-átmenet: minden .5s; átmenet: minden .5s;) bemenet: fókusz (szélesség : 130px; / * Szélesség fókuszban * / háttér-szín: #fff; border-color: # 6dcff6; -webkit-box-shadow: 0 0 5px rgba (109,207,246, .5); -moz-box- shadow: 0 0 5px rgba (109,207,246, .5); box-shadow: 0 0 5px rgba (109,207,246, .5); / * Glow effect * /)

B példa

A B példában a keresési űrlap jelentősen minimalizálódik - csak az ikon jelenik meg szöveg nélkül. Vegye figyelembe, hogy a keresőmező párnázási és szélességi tulajdonságai kerek gombbá változtak. A szöveg láthatatlanná tételéhez használja a color: átlátszó tulajdonságot.

# demo-b bemenet (szélesség: 15 képpont; kitöltés-bal: 10 képpont; szín: átlátszó; kurzor: mutató;) # demo-b bemenet: lebegés (háttér-szín: #fff;) # demo-b bemenet: fókusz (szélesség : 130 képpont; padding-left: 32px; color: # 000; background-color: #fff; kurzor: auto;)

Böngésző kompatibilitás

A leírt módszer minden nagyobb böngészőben működik: Chrome, Firefox, Safari és IE8 +. Az IE7 és régebbi böngészőkben a funkció nem működik, mivel nem támogatják a: focus pszeudo-osztályt és a keresési mező típusát.

Oktatóanyag a mobilbarát és reszponzív keresősáv létrehozásáról

Ma szeretnénk megmutatni, hogyan lehet megvalósítani a fenti képhez hasonló hatást. A cél a mobileszközökkel és a régebbi böngészőkkel (IE 8+) való kompatibilitás javítása. Még ha első pillantásra ez egyszerű dolognak tűnik is, azt mondom, hogy több trükköt kellett alkalmaznunk ahhoz, hogy az egész mechanizmus a kívánt módon működjön.

Általánosságban elmondható, hogy mit szeretnénk elérni a keresési karakterlánccal:

• kezdetben csak a kereső ikonnal ellátott gombot jelenítse meg
• amikor rákattint az ikonra, a keresősávra kell lépnie
• a komponensnek rugalmasnak kell lennie abban az értelemben, hogy használható reagáló felületen
• amikor a felhasználó beír valamit a sorba, az űrlapot az Enter gomb megnyomásával vagy a keresés gombra kattintva kell elküldeni
• ha a mező nyitva van, és nem adtak meg adatokat, és megnyomjuk a keresés gombot, a beviteli mezőnek bezárulnia kell
• akkor is be kell zárnunk a beviteli mezőt, ha a keresőmezőn kívülre kattintunk, akár üres, akár nem
• ha a JavaScript le van tiltva, a keresőmezőnek kibontva kell megjelennie
• az érintőképernyős eszközökkel való jobb együttműködés érdekében támogatást kell adnia az érintési eseményekhez

Most, hogy megvan minden, amit tennünk kell, kezdjük a jelöléssel.

Jelölés

A jelölésben a fő tárolót, az űrlapot, a szövegmezőt és a beküldés gombot használjuk, valamint egy span elemet az ikonhoz:

Valójában használhat egy pszeudoelemet az ikonhoz, de mivel nem cserélhető elemekre tervezték, amelyek űrlap elemek, egyszerűen használjuk az elemet span.

Most, hogy minden elem a helyén van, formázzuk őket.

CSS

Követelményeink alapján először győződjön meg arról, hogy van egy gombunk látható keresési ikonnal. Minden mást el kell rejteni. De gondoljunk egy lépést tovább, és képzeljük el, mi történik, ha kibővítjük a keresési karakterláncot (a fő tárolóval). Hogyan csináljuk ezt? Az ingatlant használjuk túlcsordulás: rejtettés az sb-search tároló szélességének megváltoztatása feltárja a beviteli mezőt.

Tehát először stilizáljuk az sb-search tárolót. Hadd lebegjen jobbra, és adjuk meg túlcsordulás: rejtett... Eredeti szélessége 60 képpont lesz, de mivel 100% -os szélességre szeretnénk animálni, ez problémákat okoz a mobil böngészőkben (iOS). Nem szeretik a pixel százalékos átmeneteket. Ebben az esetben egyszerűen nem hajtják végre az átállást. Ehelyett állítsuk be a minimális szélességet 60 képpontra, a szélességet pedig 0 százalékra.

Hozzáadunk egy átmenetet a szélességhez a -webkit-backface-visibility: hidden tulajdonsággal is, amely megszabadítja a nem kívánt „faroktól” a mobilböngészőkben (iOS):

Sb-keresés (pozíció: relatív; margin-top: 10 képpont; szélesség: 0%; min-szélesség: 60 képpont; magasság: 60 képpont; úszó: jobb; túlcsordulás: rejtett; -webkit-átmenet: szélesség 0,3 s; -moz-átmenet : szélesség 0.3s; átmenet: szélesség 0.3s; -webkit-backface-láthatóság: rejtett;)

A téglalapon kívül semmi nem jelenik meg.

Most pozícionáljuk a beviteli mezőt. Százalékos szélességeket használunk, hogy a szülőelem kibontásakor a beviteli mező vele bővüljön. A megfelelő magasság, betűméret és margók beállítása biztosítja, hogy a szöveg középre kerüljön (a sormagasság nem az elvárt módon fog működni az IE8-ban, ezért inkább margókat használunk). A beviteli mező abszolút pozicionálása nem szükséges, de megoldja azt a csúnya problémát, hogy néha, amikor a keresőmező rövid ideig zárva van, a gomb jobb oldalán jelenik meg.

Sb-search-input (pozíció: abszolút; felül: 0; jobb: 0; szegély: nincs; körvonal: nincs; háttér: #fff; szélesség: 100%; magasság: 60 képpont; margó: 0; z-index: 10; kitöltés: 20 képpont 65 képpont 20 képpont 20 képpont; font-family: örököl; font-size: 20 képpont; szín: # 2c3e50;) input.sb-search-input (-webkit-megjelenés: nincs; -webkit-border-sugár: 0px;)

Ezenkívül eltávolítjuk a WebKit motor szabványos böngészőbeviteli mezőinek stílusait.

Állítsuk be a szöveg színeit az egyes böngészők egyedi tulajdonságai segítségével:

Sb-search-input ::-webkit-input-placeholder (szín: # efb480;). Sb-search-input: -moz-placeholder (szín: # efb480;). Sb-search-input ::-moz-placeholder (szín: # efb480;) .sb-search-input: -ms-input-placeholder (szín: # efb480;)

Most vigyázzunk a kereső ikonra az űrlap elküldése gombján. Azt akarjuk, hogy ugyanazon a helyen legyenek, egymás alatt, ezért helyezzük el őket a jobb sarokhoz képest, és adjuk meg ugyanolyan méretüket. Mivel ezeket egymásra kell helyezni, abszolút elhelyezzük őket:

Sb-ikon-keresés, .sb-keresés-benyújtás (szélesség: 60 képpont; magasság: 60 képpont; kijelző: blokk; pozíció: abszolút; jobb: 0; felső: 0; kitöltés: 0; margó: 0; sormagasság: 60 képpont ; text-align: center; kurzor: mutató;)

Kezdetben azt szeretnénk, ha a keresési ikon kattintható lenne, és amikor kibővítjük a keresőmezőt, azt szeretnénk, ha az űrlap elküldése gomb kattintható lenne. Tehát kezdetben a beküldés gombot z -index = -1 értékre állítjuk, és átláthatóvá tesszük, hogy mindig láthassuk span keresési ikonnal:

Sb-search-submitted (háttér: #fff; / * IE * / -ms-filter esetén: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"; / * IE 8 * / filter: alpha (opacity = 0 ); / * IE 5-7 * / opacitás: 0; szín: átlátszó; szegély: nincs; körvonal: nincs; z-index: -1;)

Miért nem teszi csak átláthatóvá a hátterét? Mert IE -ben nem működik, mert az elem nem kattintható. Tehát szilárd hátteret használunk, és az átlátszóságot 0 -ra állítjuk.

A keresési ikon kezdetben magas z-indexű lesz, mivel azt szeretnénk, hogy minden tetején megjelenjen. Egy pszeudoelem használata : korábban keresési ikon hozzáadásához:

Sb-icon-search (szín: #fff; háttér: # e67e22; z-index: 90; font-size: 22px; font-family: "icomoon"; beszél: nincs; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased;) .sb-icon-search: before (tartalom: "\ e000";)

Ne felejtse el feltüntetni az ikon betűtípust a CSS legelején:

@ font-face (font-family: "icomoon"; src: url ("../ fonts / icomoon / icomoon.eot"); src: url ("../ fonts / icomoon / icomoon.eot? #iefix" ) formátum ("embedded-opentype"), url ("../ fonts / icomoon / icomoon.woff") formátum ("woff"), url ("../ fonts / icomoon / icomoon.ttf") formátum (" truetype "), url (" ../ fonts / icomoon / icomoon.svg # icomoon ") formátum (" svg "); font-weight: normal; font-style: normal;)

Az imént meghatározott stílusokkal egyszerűen megváltoztathatjuk az sb-search tároló szélességét 100% -ra az sb-search-open osztály hozzárendelésével. JavaScript nélkül a keresőmező alapértelmezés szerint megnyílik:

Sb-search.sb-search-open, .no-js .sb-search (szélesség: 100%;)

Változtassuk meg a keresési ikon színét, és tegyük a küldés gomb mögé, a z-indexet alacsonyabb értékre állítva:

Sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search (háttér: # da6d0d; szín: #fff; z-index: 11;)

Végezetül állítsuk a beküldés gomb z-indexét magasabb értékre, hogy rákattinthassunk:

Sb-search.sb-search-open .sb-search-benyújtás, .no-js .sb-keresés .sb-keresés-benyújtás (z-index: 90;)

Az összes ismertetett stílus mellett térjünk rá a JavaScriptre.

JavaScript

Kezdjük az sb-search-open osztály váltásával. Hozzáadjuk az osztályt, amikor a fő tárolóra kattintunk (sb-search), és eltávolítjuk, amikor az űrlap elküldésének gombjára kattintunk, de csak akkor, ha semmi nincs írva a mezőben. Ellenkező esetben csak az űrlapot küldjük be. Annak érdekében, hogy ne távolítsa el az osztályt, amikor a beviteli mezőre kattint (mivel az aktiválási szabályaink a teljes tárolóra vannak beállítva), meg kell akadályoznia a kattintási esemény buborékolását ezen az elemen. Ez azt jelenti, hogy a beviteli mezőre kattintva nem indul kattintási esemény a szülőelemeknél.

; (function (window) (function UISearch (el, options) (this.el = el; this.inputEl = el.querySelector ("form> input.sb-search-input"); this._initEvents ();) UISearch .prototype = (_initEvents: function () (var self = this, initSearchFn = function (ev) (if (! classie.has (self.el, "sb-search-open"))) (// open ev.preventDefault ( ); self.open ();) else if (classie.has (self.el, "sb-search-open") && /^\s*$/.test(self.inputEl.value)) (// bezár self.close ();)) this.el.addEventListener ("click", initSearchFn); this.inputEl.addEventListener ("click", function (ev) (ev.stopPropagation ();));), open: function () (classie.add (this.el, "sb-search-open");), close: function () (classie.remove (this.el, "sb-search-open");)) // add a globális névtér ablakába.UISearch = UISearch;)) (ablak);

Ezután eseményeket kell hozzáadnunk az sb-search-open osztály eltávolításához, ha rákattintunk valahova a keresősávunkon kívül. Annak érdekében, hogy ez működjön, gondoskodnia kell a buborékolt eseményekről is, amikor a fő tárolóra kattint.

; (function (window) (function UISearch (el, options) (this.el = el; this.inputEl = el.querySelector ("form> input.sb-search-input"); this._initEvents ();) UISearch .prototype = (_initEvents: function () (var self = this, initSearchFn = function (ev) (ev.stopPropagation (); if (! classie.has (self.el, "sb-search-open")))// /open ev.preventDefault (); self.open ();) else if (classie.has (self.el, "sb-search-open") && /^\s*$/.test(self.inputEl.value )) (// close self.close ();)) this.el.addEventListener ("click", initSearchFn); this.inputEl.addEventListener ("click", function (ev) (ev.stopPropagation ();)) ;), open: function () (var self = this; classie.add (this.el, "sb-search-open"); // bezárja a keresési mezőt, ha kattintás történt valahol a tárolón kívül var bodyFn = function (ev) (self.close (); this.removeEventListener ("click", bodyFn);); document.addEventListener ("click", bodyFn);), close: function () (classie.remove (this.el, "sb-search-open");)) // adott sim a globális névtér ablakába.UISearch = UISearch; )) (ablak);

Egy másik dolog, amire vigyázni kell, az extra szóközök eltávolítása a karakterlánc elejéről és végéről.

Ezenkívül, ha rákattint a keresés ikonra, a fókuszt a beviteli mezőre kell mozgatnia. Mivel ez rángatózó megjelenítést okoz a mobileszközökön (iOS), mivel a billentyűzet egyszerre nyílik, valahogy meg kell akadályoznunk a billentyűzet megnyílását ilyen esetekben. Amikor bezárjuk a keresőmezőt, el kell távolítanunk a fókuszt. Ez kijavítja azokat a problémákat, amikor egyes eszközökön a keresési mező bezárása után egy villogó kurzor továbbra is megjelenik.

; (függvény (ablak) bb \ d + | meego). + mobil | avantgo | bada \ / | szeder | blézer | compal | elaine | fennec | hiptop | iemobile | ip (hone | od) | írisz | Kindle | lge | maemo | midp | mmp | netfront | opera m (ob | in) i | tenyér (os)? | telefon | p (ixi | re) \ / | pengető | zseb | psp | sorozat (4 | 6) 0 | symbian | treo | fel \. ( böngésző | link) | vodafone | wap | windows (ce | phone) | xda | xiino / i.test (a) || / 1207 | 6310 | 6590 | 3gso | 4thp | 50i | 770s | 802s | a wa | abac | ac (er | oo | s \ -) ​​| ai (ko | rn) | al (av | ca | co) | amoi | an (ex | ny | yw) | aptu | ar (ch | go) | as (te | us) | attw | au (di | \ -m | r | s) | avan | be (ck | ll | nq) | bi (lb | rd) | bl (ac | az) | br (e | v) w | bumb | bw \ - (n | u) | c55 \ / | capi | ccwa | cdm \ - | cella | chtm | cldc | cmd \ - | co (mp | nd) | craw | da (it | ll | ng) | dbte | dc \ -s | devi | dica | dmob | do (c | p) o | ds (12 | \ -d) | el (49 | ai) | em (l2 | ul) | er (ic | k0) | esl8 | ez (0 | os | wa | ze) | fetc | fly (\ -| _) | g1 u | g560 | gén | gf \ -5 | g \ -mo | go (\. w | od) | gr (hirdetés | un) | haie | hcit | hd \ - (m | p | t) | hei \ - | szia (pt | ta) | hp (i | ip) | hs \ -c | ht (c (\ - | | _ | a | g | p | s | t) | tp) | hu (aw | tc) | i \ - (20 | go | ma) | i230 | iac (| \ - | \ /) | ibro | ötlet | ig01 | ikom | im1k | inno | ipaq | írisz | ja (t | v) a | jbro | jemu | jigs | kddi | keji | kgt (| \ /) | klon | kpt | kwc \ - | kyo (c | k) | le (nem | xi) | lg (g | \ / (k | l | u) | 50 | 54 | \ -) ​​| libw | hiúz | m1 \ -w | m3ga | m50 \ / | ma (te | ui | xo) | mc (01 | 21 | ca) | m \ -cr | me (rc | ri) | mi (o8 | oa | ts) | mmef | mo (01 | 02 | bi | de | do | t (\ - | | o | v) | zz) | mt (50 | p1 | v) | mwbp | mywa | n10 | n20 | n30 (0 | 2) | n50 (0 | 2 | 5) | n7 (0 (0 | 1) | 10) | ne ((c | m) \ - | on | tf | wf | wg | wt) | nok (6 | i) | nzph | o2im | op (ti | wv) | oran | owg1 | p800 | pan (a | d | t) | pdxg | pg (13 | \ - (| c)) | phil | pire | pl (ay | uc) | pn \ -2 | po (ck | rt | se) | prox | psio | pt \ -g | qa \ -a | qc (07 | 12 | 21 | 32 | 60 | \ -| i \ -) ​​| qtek | r380 | r600 | raks | rim9 | ro (ve | zo) | s55 \ / | sa (ge | ma | mm | ms | ny | va) | sc (01 | h \ - | oo | p \ -) ​​| sdk \ / | se (c (\ - | 0 | 1 ) | 47 | mc | nd | ri) | sgh \ - | shar | sie (\ - | m) | sk \ -0 | sl (45 | id) | sm (al | ar | b3 | it | t5) | így (ft | ny) | sp (01 | h \ - | v \ - | v) | sy (01 | mb) | t2 (18 | 50) | t6 (00 | 10 | 18) | ta (gt | lk ) | tcl \ - | tdg \ - | tel (i | m) | tim \ - | t \ -mo | to (pl | sh) | ts (70 | m \ - | m3 | m5) | tx \ -9 | fel (\ .b | g1 | si) | utst | v400 | v750 | veri | vi (rg | te) | vk (40 | 5 | \ -v) | vm40 | voda | vulc | vx (52 | 53 | 60 | 61 | 70 | 80 | 81 | 83 | 85 | 98) | w3c (\ - |) | webc | pünkösd | wi (g | nc | nw) | wmlb | wonu | x700 | yas \ - | az Ön | zte \ - /i.test(a.substr(0,4)))check = true)) (navigator.userAgent || navigator.vendor || window.opera); visszatérési ellenőrzés; ) // http://www.jonathantneal.com/blog/polyfills-and-prototypes/! String.prototype.trim && (String.prototype.trim = function () (return this.replace (/ ^ \ s + | \ s + $ / g, "");)); function UISearch (el, options) (this.el = el; this.inputEl = el.querySelector ("form> input.sb-search-input"); this._initEvents ();) UISearch.prototype = (_initEvents: function () (var self = this, initSearchFn = function (ev) (ev.stopPropagation (); // extra felesleges szóköz eltávolítása self.inputEl.value = self.inputEl.value.trim (); if (! classie.has (self .el, "sb-search-open")) (// open ev.preventDefault (); self.open ();) else if (classie.has (self.el, "sb-search-open") &&/ ^\ s*$/. test (self.inputEl.value)) (// close self.close ();)) this.el.addEventListener ("click", initSearchFn); this.inputEl.addEventListener ("click") , függvény (ev) (ev.stopPropagation ();));), open: function () (var self = this; classie.add (this.el, "sb-search-open"); // fókusz áthelyezése a beviteli mező, ha (! mobilecheck ()) (this.inputEl.focus ();) // bezárja a keresési mezőt, ha kattanás történt valahol a tárolón kívül var bodyFn = function (ev) (self.close (); this . removeEventListener ("cl ick ", bodyFn); ); document.addEventListener ("kattintson", bodyFn); ), close: function () (this.inputEl.blur (); classie.remove (this.el, "sb-search-open");)) // be a globális névtér ablakba. UISearch = UISearch; )) (ablak);

Ahhoz, hogy mindez zökkenőmentesen működjön mobileszközökön, be kell állítania a megfelelő érintési eseményeket. Hozzáadásával preventDefault funkcióba initSearchFn megakadályozza az érintés és kattintás események egyidejű aktiválását mobileszközökön.

; (függvény (ablak) bb \ d + | meego). + mobil | avantgo | bada \ / | szeder | blézer | compal | elaine | fennec | hiptop | iemobile | ip (hone | od) | írisz | Kindle | lge | maemo | midp | mmp | netfront | opera m (ob | in) i | tenyér (os)? | telefon | p (ixi | re) \ / | pengető | zseb | psp | sorozat (4 | 6) 0 | symbian | treo | fel \. ( böngésző | link) | vodafone | wap | windows (ce | phone) | xda | xiino / i.test (a) || / 1207 | 6310 | 6590 | 3gso | 4thp | 50i | 770s | 802s | a wa | abac | ac (er | oo | s \ -) ​​| ai (ko | rn) | al (av | ca | co) | amoi | an (ex | ny | yw) | aptu | ar (ch | go) | as (te | us) | attw | au (di | \ -m | r | s) | avan | be (ck | ll | nq) | bi (lb | rd) | bl (ac | az) | br (e | v) w | bumb | bw \ - (n | u) | c55 \ / | capi | ccwa | cdm \ - | cella | chtm | cldc | cmd \ - | co (mp | nd) | craw | da (it | ll | ng) | dbte | dc \ -s | devi | dica | dmob | do (c | p) o | ds (12 | \ -d) | el (49 | ai) | em (l2 | ul) | er (ic | k0) | esl8 | ez (0 | os | wa | ze) | fetc | fly (\ -| _) | g1 u | g560 | gén | gf \ -5 | g \ -mo | go (\. w | od) | gr (hirdetés | un) | haie | hcit | hd \ - (m | p | t) | hei \ - | szia (pt | ta) | hp (i | ip) | hs \ -c | ht (c (\ - | | _ | a | g | p | s | t) | tp) | hu (aw | tc) | i \ - (20 | go | ma) | i230 | iac (| \ - | \ /) | ibro | ötlet | ig01 | ikom | im1k | inno | ipaq | írisz | ja (t | v) a | jbro | jemu | jigs | kddi | keji | kgt (| \ /) | klon | kpt | kwc \ - | kyo (c | k) | le (nem | xi) | lg (g | \ / (k | l | u) | 50 | 54 | \ -) ​​| libw | hiúz | m1 \ -w | m3ga | m50 \ / | ma (te | ui | xo) | mc (01 | 21 | ca) | m \ -cr | me (rc | ri) | mi (o8 | oa | ts) | mmef | mo (01 | 02 | bi | de | do | t (\ - | | o | v) | zz) | mt (50 | p1 | v) | mwbp | mywa | n10 | n20 | n30 (0 | 2) | n50 (0 | 2 | 5) | n7 (0 (0 | 1) | 10) | ne ((c | m) \ - | on | tf | wf | wg | wt) | nok (6 | i) | nzph | o2im | op (ti | wv) | oran | owg1 | p800 | pan (a | d | t) | pdxg | pg (13 | \ - (| c)) | phil | pire | pl (ay | uc) | pn \ -2 | po (ck | rt | se) | prox | psio | pt \ -g | qa \ -a | qc (07 | 12 | 21 | 32 | 60 | \ -| i \ -) ​​| qtek | r380 | r600 | raks | rim9 | ro (ve | zo) | s55 \ / | sa (ge | ma | mm | ms | ny | va) | sc (01 | h \ - | oo | p \ -) ​​| sdk \ / | se (c (\ - | 0 | 1 ) | 47 | mc | nd | ri) | sgh \ - | shar | sie (\ - | m) | sk \ -0 | sl (45 | id) | sm (al | ar | b3 | it | t5) | így (ft | ny) | sp (01 | h \ - | v \ - | v) | sy (01 | mb) | t2 (18 | 50) | t6 (00 | 10 | 18) | ta (gt | lk ) | tcl \ - | tdg \ - | tel (i | m) | tim \ - | t \ -mo | to (pl | sh) | ts (70 | m \ - | m3 | m5) | tx \ -9 | fel (\ .b | g1 | si) | utst | v400 | v750 | veri | vi (rg | te) | vk (40 | 5 | \ -v) | vm40 | voda | vulc | vx (52 | 53 | 60 | 61 | 70 | 80 | 81 | 83 | 85 | 98) | w3c (\ - |) | webc | pünkösd | wi (g | nc | nw) | wmlb | wonu | x700 | yas \ - | az Ön | zte \ - /i.test(a.substr(0,4)))check = true)) (navigator.userAgent || navigator.vendor || window.opera); visszatérési ellenőrzés; ) // http://www.jonathantneal.com/blog/polyfills-and-prototypes/! String.prototype.trim && (String.prototype.trim = function () (return this.replace (/ ^ \ s + | \ s + $ / g, "");)); function UISearch (el, options) (this.el = el; this.inputEl = el.querySelector ("form> input.sb-search-input"); this._initEvents ();) UISearch.prototype = (_initEvents: function () (var self = this, initSearchFn = function (ev) (ev.stopPropagation (); // extra felesleges szóköz eltávolítása self.inputEl.value = self.inputEl.value.trim (); if (! classie.has (self .el, "sb-search-open")) (// open ev.preventDefault (); self.open ();) else if (classie.has (self.el, "sb-search-open") &&/ ^\ s*$/. test (self.inputEl.value)) (// close ev.preventDefault (); self.close ();)) this.el.addEventListener ("click", initSearchFn); this. el .addEventListener ("touchstart", initSearchFn); this.inputEl.addEventListener ("click", function (ev) (ev.stopPropagation ();)); this.inputEl.addEventListener ("touchstart", function (ev) (ev .stopPropagation ();));), open: function () (var self = this; classie.add (this.el, "sb-search-open"); // helyezze a fókuszt a beviteli mezőbe, ha (! mobilecheck ()) ( this.inputEl.focus (); ) // bezárja a keresési mezőt, ha valahol kattintás történt a tárolón kívül var bodyFn = function (ev) (self.close (); this.removeEventListener ("click", bodyFn); this.removeEventListener ("touchstart", bodyFn );); document.addEventListener ("kattintson", bodyFn); document.addEventListener ("touchstart", bodyFn); ), close: function () (this.inputEl.blur (); classie.remove (this.el, "sb-search-open");)) // be a globális névtér ablakba. UISearch = UISearch; )) (ablak);

És végül azoknak a böngészőknek, amelyek nem támogatják addEventListenerés removeEventListener, Jonathan Neal EventListener -jét fogjuk használni.

// EventListener | @jon_neal | //github.com/jonathantneal/EventListener! window.addEventListener && window.Element && (function () (function addToPrototype (név, módszer) (Window.prototype = HTMLDocument.prototype = Element.prototype = method;) var registry =; addToPrototype ("addEventListener", function (típus, figyelő) (var target = this; registry.unshift ((__listener: function (event)) (event.currentTarget = target; event.pageX = event.clientX + document.documentElement.scrollLeft); event.pageY = event.clientY + document.documentElement.scrollTop; event.preventDefault = function () (event.returnValue = false); event.relatedTarget = event.fromElement || null; event.stopPropagation = function () (esemény. cancelBubble = true); event.relatedTarget = event.fromElement || null; event.target = event.srcElement || target; event.timeStamp = + new Date; listener.call (cél, esemény);), hallgató: hallgató, target: target, type: type)); this.attachEvent ("on" + type, registry .__ listener);)); add ToPrototype ("removeEventListener", function (type, listener) (for (var index = 0, length = registry.length; index< length; ++index) { if (registry.target == this && registry.type == type && registry.listener == listener) { return this.detachEvent("on" + type, registry.splice(index, 1).__listener); } } }); addToPrototype("dispatchEvent", function (eventObject) { try { return this.fireEvent("on" + eventObject.type, eventObject); } catch (error) { for (var index = 0, length = registry.length; index < length; ++index) { if (registry.target == this && registry.type == eventObject.type) { registry.call(this, eventObject); } } } }); })();

És itt van! Remélem, tetszett ez az útmutató, és valami hasznosat tanult belőle!

Webhely keresőmező A weboldal felhasználói felületének egyik legfontosabb eleme. Segítségével a felhasználó megtalálhatja a kívánt tartalmat az Ön webhelyén.

Ebben az oktatóanyagban megtudhatja, hogyan hozhat létre jelölést egy keresőmezőhöz HTML5 használatával, és hogyan alakíthatja ki az űrlapelemeket CSS3 -szolgáltatások használatával szkriptek nélkül.

1. HTML jelölés

Keresés

Elem

a keresési űrlap tárolója, a keresési mező az elem használatával jön létre vagy , és az elem segítségével létre lehet hozni az adatokat a szerverre küldő gombot vagy .

Mi a különbség tól től ? Mindkét mező egysoros szövegmezőt hoz létre a szövegbevitelhez, de a type = "search" hozzáadásra került a HTML5 szabványhoz, és szemantikai tipp a böngészők számára. Minden böngésző, kivéve Mozilla Firefox, tegyen egy tisztító keresztet a dobozba. Eltávolításához módosíthatja a mező típusát type = "text" értékre.

Mi a különbség tól től

? Nincs különbség az első vagy a második módszerrel létrehozott beküldési gombok működésében. A különbség az, hogy az elem tartály, ezért más elemek is elhelyezhetők benne, például képek vagy ikonok.

Az űrlapmezőkhöz kétféleképpen adhat hozzá szöveget:
1)
A megjelenített szöveg színe szürke lesz. A következő szabályok segítségével tetszőleges színt állíthat be a tipp szövegéhez, módosíthatja a mező stílusát és hátterét. Ezek a választók nem kombinálhatók egyetlen szabályba, különben nem működnek.

Bemenet ::-webkit-input-placeholder (szín: # B6C0A5; font-style: dőlt; háttér: # E0EFCA;) input: -moz-placeholder (szín: # B6C0A5; font-style: italic; background: # E0EFCA; ) input: -ms-input-placeholder (szín: # B6C0A5; font-style: dőlt; háttér: # E0EFCA;)

2)
A megjelenített szöveg színe fekete lesz. A színt a szín tulajdonság segítségével állíthatja be, például:

Bemenet (szín: fehér;)

Ne felejtse el csatlakozni a kijelző ikonjaihoz.

2. Keresés mező ikon gombbal

* (doboz méretezése: szegélydoboz;) űrlap (pozíció: relatív; szélesség: 300 képpont; margó: 0 automatikus;) bemenet (szélesség: 100%; magasság: 42 képpont; kitöltés-bal: 10 képpont; szegély: 2 képpont szilárd # 7BA7AB ; szegély sugár: 5 képpont; körvonal: nincs; háttér: # F9F0DA; szín: # 9E9C9C;) gomb (pozíció: abszolút; felső: 0; jobb: 0 képpont; szélesség: 42 képpont; magasság: 42 képpont; szegély: nincs; háttér: # 7BA7AB; border-sugar: 0 5px 5px 0; kurzor: mutató;) gomb: előtt (content: "\ f002"; font-family: FontAwesome; font-size: 16px; color: # F9F0DA;)

3. Keresés mező egy gombbal

* (doboz méretezése: szegélydoboz;) űrlap (pozíció: relatív; szélesség: 300 képpont; margó: 0 automatikus;) bemenet, gomb (szegély: nincs; körvonal: nincs; szegély sugár: 3 képpont;) bemenet (szélesség: 100%; magasság: 42 képpont; háttér: # F9F0DA; padding-left: 15px;) gomb (magasság: 26px; szélesség: 26px; pozíció: abszolút; felül: 8px; jobb: 8px; háttér: # F15B42; kurzor: mutató; ) gomb: előtt (content: "\ f105"; font-family: FontAwesome; color: # F9F0DA; font-size: 20px; font-weight: bold;)

4. Keresőmező "lapos" stílusban

* (doboz méretezése: szegélydoboz;) űrlap (pozíció: relatív; szélesség: 300 képpont; margó: 0 automatikus; háttér: # A3D0C3;) bemenet, gomb (szegély: nincs; körvonal: nincs; háttér: átlátszó;) bemenet (szélesség: 100%; magasság: 42 képpont; kitöltés-bal: 15 képpont;) gomb (magasság: 42 képpont; szélesség: 42 képpont; pozíció: abszolút; felül: 0; jobb: 0; kurzor: mutató;) gomb: előtt (tartalom: "\ f002"; font-family: FontAwesome; font-size: 16px; color: # F9F0DA;)

5. Keresőmező vastag alsó szegéllyel

* (doboz méretezése: szegélydoboz;) űrlap (pozíció: relatív; szélesség: 300 képpont; margó: 0 automatikus; háttér: # F9F0DA; szegély alsó: 4 képpont szilárd # be290e;) bemenet, gomb (szegély: nincs; körvonal : nincs; háttér: átlátszó;) bemenet (szélesség: 100%; magasság: 42 képpont; kitöltés-bal: 15 képpont;) gomb (magasság: 42 képpont; szélesség: 42 képpont; pozíció: abszolút; felül: 0; jobb: 0; kurzor: mutató;) gomb: előtt (content: "\ f178"; font-family: FontAwesome; font-size: 20px; color: # be290e;)

6. Keresőmező változó szegélyszínnel

* (doboz méretezése: szegélydoboz;) űrlap (pozíció: relatív; szélesség: 300 képpont; margó: 0 automatikus;) bemenet, gomb (körvonal: nincs; háttér: átlátszó;) bemenet (szélesség: 100%; magasság: 42 képpont) ; padding-left: 15px; border: 3px solid # F9F0DA;) gomb (szegély: nincs; magasság: 42 képpont; szélesség: 42 képpont; pozíció: abszolút; felül: 0; jobb: 0; kurzor: mutató;) gomb: előtt ( content: "\ f002"; font-family: FontAwesome; font-size: 16px; color: # F9F0DA;) input: focus (szegély-szín: # 311c24;)

7. A keresőmező elhagyása

A keresési mező akkor jelenik meg, ha az ikonra kattint.

* (doboz méretezése: szegélydoboz;) űrlap (pozíció: relatív; szélesség: 300 képpont; margó: 0 automatikus; magasság: 42 képpont;) bemenet (magasság: 42 képpont; szélesség: 0; kitöltés: 0 42 képpont 0 15 képpont; szegély: nincs; szegély-alul: 2 képpont szilárd átlátszó; körvonal: nincs; háttér: átlátszó; átmenet: .4s köb-bezier (0, 0,8, 0, 1); pozíció: abszolút; felül: 0; jobb: 0; z-index : 2;) bemenet: fókusz (szélesség: 300 képpont; z-index: 1; szegély-alsó: 2 képpont szilárd # F9F0DA;) gomb (háttér: # 683B4D; szegély: nincs; magasság: 42 képpont; szélesség: 42 képpont; pozíció: abszolút ; felső: 0; jobb: 0; kurzor: mutató;) gomb: előtt (content: "\ f002"; font-family: FontAwesome; font-size: 16px; color: # F9F0DA;)

8. Növekvő keresési mező

* (doboz méretezése: szegélydoboz;) űrlap (szélesség: automatikus; úszó: jobb; margó-jobb: 30 képpont;) bemenet (szélesség: 250 képpont; magasság: 42 képpont; kitöltés-bal: 15 képpont; szegélysugár: 42 képpont; szegély: 2 képpont szilárd # 324b4e; háttér: # F9F0DA; körvonal: nincs; pozíció: relatív; átmenet: .3s lineáris;) bemenet: fókusz (szélesség: 300 képpont;) gomb (szélesség: 42 képpont; magasság: 42 képpont; háttér: nincs; szegély: nincs; pozíció: abszolút; felül: -2 képpont; jobb: 0;) gomb: előtt (tartalom: "\ f002"; font -family: FontAwesome; color: # 324b4e;)

Sok ember számára az interneten történő információkeresés hatékonysága éppen a farkast tápláló láb. Hol találhatok naprakész és naprakész információkat? Hol lehet olcsóbban vásárolni és drágábban eladni? Hol találhatja meg a legpontosabb utasításokat bizonyos feladatok elvégzésére? Hol lehet online filmeket nézni? Annak érdekében, hogy a felhasználók ezekre és hasonló kérdésekre a lehető legpontosabban válaszoljanak, a keresőmotorok évről évre javítják a webhelyek elküldésének már kifinomult mechanizmusait. Keresési eredmények konkrét felhasználói kérésekhez. A keresőmotorok célja, hogy a lehető legmagasabb minőségű webhelyre juttassák el az embereket, hogy választ kapjanak a feltett kérdésekre.

A keresőmotorokon kívül maguk a keresőmotorok is rendelkeznek keresőszűrőkkel, így bármely felhasználó szűkítheti az információs keresés körét, vagy megadhatja kérését.

Tekintsünk az alábbiakban néhány keresési bővítményt, amelyek kiegészíthetik a népszerű böngészőket, és ennek eredményeként növelhetik az interneten történő információkeresés hatékonyságát.

Keresési bővítmények a Google Chrome számára

Keresés az aktuális webhelyen

Nem minden webhely rendelkezik belső keresőmotorral, és az ilyen erőforrásokon hosszú ideig kell futnia szakaszokról szakaszokra, hogy konkrét információkat keressen. A webhelyen belüli keresés beépített böngészőbővítménye egy univerzális eszköz, amely mindig kéznél lesz, függetlenül attól, hogy milyen webhelyet keres fel. Mindössze annyit kell tennie, hogy megtalálja a szükséges információkat a webhelyen belül, hogy beír egy kulcsszót egy kis keresőmezőbe, amely akkor jelenik meg, ha a böngésző sávján lévő kiterjesztés gombra kattint.

A keresőmotor keresési eredményei egy új böngészőlapon nyílnak meg, és kiválasztják egy adott webhely oldalait, ahol a kulcsszó megtalálható.

Az aktuális webhely keresése egy előre telepített Google keresőmotorral valósul meg, de a kiterjesztési paraméterekben telepíthet egy másik keresőmotort - Yandex, Yahoo vagy Bing. Ehhez hívja a kiterjesztés gomb helyi menüjét, és válassza ki a "Parameters" parancsot.

A kiterjesztési lehetőségek egy új böngésző lapon nyílnak meg, ahol kiválaszthatunk egy másik keresőmotort. És már keres is az oldalon.

Alternatív keresés Google

A Yandex keresőmotor kezdetben lehetővé teszi, hogy egyetlen kattintással két másik keresőmotorban - a Google -ban és a Bingben - keressen információt, bár a keresőmotorokba mutató linkek a beírt kulcskérdéssel együtt a keresés legalján találhatók. eredményoldal.

De a Google e tekintetben önzőbb - a keresési eredményekben szó sincs versengő keresőmotorokról. Ez a helyzet kijavítható az "Alternatív Google Keresés" bővítmény bevezetésével a Google Chrome -ban.

Mint állandóan hozzá a melléklethez kulcsszó A "Torrent" a torrentkövetők keresési eredményeinek megtekintéséhez egyszerűbb egy speciális bővítmény telepítése ezekre a célokra: TMS (Torrents MultiSearch).

A kiterjesztés gomb be van ágyazva a böngésző eszköztárába, és ha rákattint, megnyit egy kis keresési mezőt a lekérdezés megadásához.

A keresési eredmények külön lapon jelennek meg, és ez csak a Runet torrentkövetőin található tartalom lesz, nem a vareznik webhelyeken, szoftvereken és médiaportálokon vagy hivatalos webhelyeken.

A torrentkövetők keresési eredményei között a talált tartalom szűrhető a fájl mérete vagy a feltöltés dátuma alapján. További kulcsszavak megadhatók a keresés szűkítéséhez.

A keresési eredmények külön -külön is megtekinthetők az egyes torrentkövetőkhöz, és külön -külön a tartalomtípusokhoz, például filmekhez, zenéhez, szoftverekhez.

Ezenkívül a TMS kiterjesztés be van ágyazva a böngésző helyi menüjébe, így az internetes oldalakon kiemelt szavakat vagy kifejezéseket elküldheti a torrentkövetők keresésére anélkül, hogy szükségtelen gondot okozna a másolás és beillesztés.

Kontextus szerinti keresés

A Google Chrome egy kontextus szerinti keresési funkciót valósított meg, amely alapértelmezés szerint egyetlen böngészőbe telepített keresőmotort használ. A "Kontextus szerinti keresés" bővítmény célja, hogy növelje azoknak a keresőmotoroknak a számát, amelyek segítségével bármely kiválasztott szó kereshető a webhely oldalain.

A kiterjesztés kezdetben lehetővé teszi a legnépszerűbb torrentkövető, a RuTracker, a Wikipedia és a Kinopoisk.Ru portál keresését.

Más keresőmotorok, így rajtuk keresztül közvetlenül a böngésző helyi menüjéből lehet információt keresni, hozzáadódnak a bővítmény paramétereihez. Nyissuk meg a Google Chrome menüt, válasszuk a "Beállítások" lehetőséget, és lépjünk a böngészőben telepített bővítmények szakaszába.

A bővítmények listájában válassza ki, amire szükségünk van - "Kontextus szerinti keresés". Kattintson a "Beállítások" linkre.

Keressen bővítményeket az Opera számára

Keresés a webhelyen belül

A kiterjesztés gomb a böngésző eszköztárán található, és ha rákattint, hívhatja a kulcskérdés megadásához szükséges keresőmezőt, valamint megváltoztathatja a keresőmotort.

A kiterjesztés beállításaiban előre telepített Yandex és Google kiegészíthető más keresőmotorokkal. Hívja fel a bővítmény gomb helyi menüjét, és válassza a "Beállítások" parancsot.

Ugyanúgy, mint a Google Chrome "Kontextus szerinti keresés" bővítménye esetén, új hozzáadásához keresőmotor meg kell adnia az URL -karakterláncot.

Torrentek MultiSearch

Hasonló képkeresés

A hasonló képkereső további parancsot ad a hasonló képek kereséséhez több keresőmotor segítségével az Opera böngésző helyi menüjébe.

Vagy bemutatják a hasonló képeket tartalmazó kiadványok listáját.

Keressen bővítményeket a Mozilla Firefox böngészőben

Webhely keresés

Az előző két esethez hasonlóan a Mozilla Firefox böngészőhöz létezik egy speciális kiterjesztés az internet bármely webhelyén történő kereséshez.

Csak a Fire Fox esetében van a webhelykeresés beágyazva a böngésző meglévő keresőmezőjébe, és hozzáadja az ikonját piros nagyító formájában a normál keresési ikon előtt.

Az alapértelmezett keresőmotor megváltoztatása a rendszeres keresésekhez a Mozilla Firefoxban a keresőmotor és a webhelyeken belüli keresések megváltoztatását is magában foglalja.

A Site Search kiterjesztés beépítve van a Mozilla Firefox helyi menüjébe, és ha bármelyik szót kiválasztja, akkor az egyes keresési eredmények között láthatja a webhely összes oldalát, ahol ez a szó megtalálható.

Keresés a byffoxból

Bármi szoftver termékek az ilyen "még nem érett" nevek általában sok felhasználót bosszantanak azzal, hogy még csak utalást sem látnak a javasolt eszköztár tervezett céljára.

És hogy mit kínál pontosan a "Softina a Vasyától" vagy a "Repack játszott Petyától", azt csak a leírás részletes megismerése után kell megtudnia. Ennek ellenére egy ilyen komolytalan név mögött, mint "Keresés a byffoxból", van egy hasznos és ésszerű funkció. Ez a kiterjesztés lehetővé teszi a böngésző helyi menüjének kiegészítését egy további keresési paranccsal a kiválasztott szóhoz különböző keresőmotorok használatával.

2019. október 25 A bejegyzés frissítve lett

Csúsztatható keresési űrlap a webhelyen

A lapos stílus jelentős népszerűségre tett szert a weboldal tervezésében. És ebben a leckében megnézzük a webhely egy másik elemét, amely ebben a stílusban készült. Ez az elem egy keresési űrlap. De nem egyszerű, hanem egy keresési űrlap, amely akkor jelenik meg, amikor rákattint, és "összeomlik", ha nem használják. Ami a keresési ikont illeti, az az SVG fájlból származik, és skálázható a különböző képernyőfelbontások között (mobileszközökön és nagy monitorokon egyaránt).

Egy példa itt látható:

Letöltés

Kihúzható keresési űrlap

Hogyan kell használni?

Html

Először határozzuk meg a HTML oldalon található jelölést:

1 2 3 4 5 6 7

<div id = "sb-search" class = "sb-search"> <űrlap> <input class = "sb-search-input" helyőrző = - Mit fognak keresni? type = "text" value = "" name = "search" id = "search"> <input class = "sb-search-submitted" type = "submitted" value = ""> <span class = "sb-icon-search"> </ form> </ div>

A keresési formában nincs semmi szokatlan: egy szövegmező a beviteli módhoz, egy keresés gomb és egy elem az ikonra.

CSS

Most adjunk hozzá némi stílust, hogy a keresési űrlap jól nézzen ki az oldalon.

Mivel kattintásra megjelenik, kezdetben rejtve van. Ez a tulajdonság használatával történik túlcsordulásés annak jelentése rejtett, amelynek eredményeként az ikonon kívül minden el van rejtve (ennek eredményeként csak az ikont látjuk, a szövegmezőt nem):

.sb-search (pozíció: relatív; margin-top: 10px; szélesség: 0%; min-width: 60px; height: 60px; float: right; overflow: rejtett; -webkit-átmenet: szélesség 0,3s; -moz- átmenet: szélesség 0.3s; átmenet: szélesség 0.3s; -webkit-backface-visibility: rejtett;)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.sb-search-input (pozíció: abszolút; felül: 0; jobb: 0; szegély: nincs; körvonal: nincs; háttér: #fff; szélesség: 100%; magasság: 60 képpont; margó: 0; z-index: 10 ; kitöltés: 20px 65px 20px 20px; font-family: örököl; font-size: 20px; color: # 2c3e50;) input [type = "search"] .sb-search-input (-webkit-megjelenés: nincs; -webkit -határ sugara: 0px;)

Meghatározzuk a kérelem hátterében lévő szöveg színét (a keresés során beírt szöveget):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.sb-search-input :: -webkit-input-placeholder (szín: # efb480;) .sb-search-input: -moz-placeholder (szín: # efb480;) .sb-search-input :: -moz- helyőrző (szín: # efb480;). sb-search-input: -ms-input-placeholder (szín: # efb480;)

A keresés gomb mindig az oldal többi blokkja és eleme felett van, ezért beállítottuk nagyon fontos z-index:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.sb-icon-search (szín: #fff; háttér: # e67e22; z-index: 90; font-size: 22px; font-family: "icomoon"; beszél: nincs; font-style: normal; font-weight : normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased;) .sb-icon-search: before (content: " \ e000 "; }

Ne felejtsen el speciális ikonokat (SVG) sem feltüntetni. Ikon beszúrása a keresőgombba:

1 2 3 4 5 6 7 8 9 10

@ font-face (font-family: "icomoon"; src: url ( "../fonts/icomoon/icomoon.eot"); src: url ( "../fonts/icomoon/icomoon.eot?#iefix") format ("embedded-opentype"), url ( "../fonts/icomoon/icomoon.woff") format ("woff"), url ( "../fonts/icomoon/icomoon.ttf") formátumban ("truetype" script><script src = "js / uisearch.js"> <script>új UISearch (document.getElementById ("sb-search"));</ script>

Kimenet

Egy szép keresési űrlap, amely nagyon kevés helyet foglal el az oldalon, és gyönyörűen megjelenik, ha rákattint a keresés ikonra.