В даному уроці ми створимо розкривається форму пошуку, яка відмінно впишеться в дизайн інтерфейсу для мобільних пристроїв. Для реалізації елемента буде використовуватися тільки CSS - ніякого JavaScript і додаткової розмітки. простий і ефективний спосібдля реалізації компактної форми пошуку.

призначення

На мобільних пристроях йде облік кожного пікселя. Для мінімізації необхідного для виведення форми простору вона буде спочатку показуватися в компактній формі і розкриватися по отриманню фокусу введення (: focus). Такий підхід дозволяє зберегти місце для інших елементів інтерфейсу і змісту.

розмітка HTML

Для форми використовується HTML5. Код дуже простий:

Скидаємо вид для форми пошуку за замовчуванням в браузерах Webkit

За замовчуванням в браузерах Webkit форма пошуку матиме такий вигляд:

Для того, щоб форма пошуку виглядала як звичайне поле введення тексту потрібно додати наступні стилі:

Input (-webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%;) input :: - webkit-search-decoration, input :: - webkit- search-cancel-button (display: none;)

Формуємо нашу форму пошуку

Поле введення матиме звичайну ширину 55px і розкриватися для 130px в стані: focus. Властивість transition використовується для анімації, а box-shadow використовується для ефекту світіння.

Input (background: #ededed url (img / search-icon.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; / * Ширина за замовчуванням * / -webkit- border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;) input: focus ( width: 130px; / * Ширина при наявності фокусу введення * / background-color: #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); / * Ефект світіння * /)

приклад У

У прикладі B форма пошуку істотно мінімізована - виводиться тільки іконка без заповнює тексту. Зверніть увагу, що змінилися властивості padding і width для поля пошуку, щоб сформувати круглу кнопку. Для того, щоб текст був невидимий використовується властивість color: transparent.

# Demo-b input (width: 15px; padding-left: 10px; color: transparent; cursor: pointer;) # demo-b input: hover (background-color: #fff;) # demo-b input: focus (width : 130px; padding-left: 32px; color: # 000; background-color: #fff; cursor: auto;)

Сумісність з браузерами

Описаний метод працює у всіх основних браузерах: Chrome, Firefox, Safari, і IE8 +. У IE7 і старих браузерах функціонал не діє через відсутність підтримки псевдо-класу: focus і типу поля пошуку.

Посібник по тому, як зробити мобільно-орієнтовану і адаптивну рядок пошуку

Сьогодні ми б хотіли показати вам, як реалізувати ефект, як на зображенні зверху. Мета - поліпшити сумісність з мобільними пристроями і старими браузерами (IE 8+). Навіть якщо на перший погляд це здається простою штукою, то скажу, що нам довелося застосувати кілька трюків, щоб змусити весь механізм працювати, як гадалося.

Загалом, чого ми хочемо добитися від рядка пошуку:

• спочатку відображати тільки кнопку з іконкою пошуку
• при кліці на іконку потрібно, щоб пошуковий рядок виїжджала в сторону
• компонент повинен бути гнучким, в тому сенсі, щоб його можна було використовувати в адаптивному інтерфейсі
• коли користувач друкує щось в рядку, потрібно щоб форму можна було відправити натисканням кнопки Enter або кліком по кнопці пошуку
• якщо поле розкрито, і дані в нього не введені, а ми натискаємо кнопку пошуку - поле введення повинно закритися
• також потрібно, щоб поле введення закривалося, якщо ми натискаємо кудись поза полем пошуку, незалежно від того, порожнє воно чи ні
• якщо JavaScript вимкнено, поле пошуку повинно відображатися розкритим
• для кращої взаємодії з тач-пристроями також треба додати підтримку тач-подій

Тепер ми визначилися з усім, що нам потрібно зробити, давайте почнемо з розмітки.

розмітка

У розмітці використовуємо основний контейнер, форму, текстове поле і кнопку відправки, а також span-елемент для іконки:

Взагалі-то для іконки можна використовувати псевдо-елемент, але так як він не розрахований на замінних елементах, якими є елементи форми, ми просто використовуємо елемент span.

Тепер, коли всі елементи на своїх місцях, стилізуємо їх.

CSS

Виходячи з наших вимог, спершу переконаємося, що у нас є кнопка з видимої іконкою пошуку. Все інше має бути сховане. Але також подумаємо на крок вперед і уявімо, що трапиться, коли ми розширимо рядок пошуку (з основним контейнером). Як нам це зробити? використовуємо властивість overflow: hidden, А зміна ширини контейнера sb-search має проявити поле введення.

Так що в першу чергу стилізуємо контейнер sb-search. Змусимо його перебувати в плаваючому стані справа, і поставимо йому overflow: hidden. Його вихідна ширина буде дорівнювати 60px, але так як ми хочемо анімувати до ширини 100%, це призведе до проблем в мобільних браузерах (iOS). Вони не люблять переходи з піксельної ширини в процентну. У цьому випадку вони просто не здійснять перехід. Так що замість цього задамо мінімальну ширину в 60px, а ширину в 0%.

Також додамо перехід для ширини властивістю -webkit-backface-visibility: hidden, що позбавить від небажаних "хвостів" на мобільних браузерах (iOS):

Sb-search (position: relative; margin-top: 10px; width: 0%; min-width: 60px; height: 60px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition : width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden;)

Все, що виходить за рамки цього прямокутника, не з'явиться.

Тепер, давайте спозіціоніруем поле введення. Ми використовуємо процентну ширину, так що коли ми розсунемо батьківський елемент, поле введення розшириться разом з ним. Виставлення правильної висоти, розміру шрифту і полів гарантує, що текст буде відцентровано (line-height не відпрацьована в IE8 як могло б очікуватися, так що замість цього використовуємо поля). Абсолютне позиціонування поля введення не обов'язково, але воно вирішує противну проблемку з тим, що іноді при закритті поля пошуку на короткий період часу воно відображається праворуч від кнопки.

Sb-search-input (position: absolute; top: 0; right: 0; border: none; outline: none; background: #fff; width: 100%; height: 60px; margin: 0; z-index: 10; padding: 20px 65px 20px 20px; font-family: inherit; font-size: 20px; color: # 2c3e50;) input.sb-search-input (-webkit-appearance: none; -webkit-border-radius: 0px;)

На додаток до всього, ми прибираємо стандартні стилі полів введення браузерів для движка WebKit.

Давайте задамо кольору тексту, використовуючи власні властивості конкретних браузерів:

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

А тепер подбаємо про іконці пошуку на кнопці відправки форми. Ми хочемо, щоб вони розташовувалися в одному місці, одна під інший, так що спозіціоніруем їх щодо правого кута і поставимо однакові розміри. Так як вони повинні розташовуватися одна поверх іншої, спозіціоніруем їх абсолютно:

Sb-icon-search, .sb-search-submit (width: 60px; height: 60px; display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; line-height: 60px ; text-align: center; cursor: pointer;)

У початковому положенні ми хочемо, щоб клікабельно була іконка пошуку, а коли ми розкриємо поле пошуку, ми хочемо щоб клікабельно була кнопка відправки форми. Так що спочатку поставимо кнопці відправки форми z-index = -1, і зробимо її прозорою, так щоб ми завжди бачили spanз іконкою пошуку:

Sb-search-submit (background: #fff; / * для IE * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"; / * IE 8 * / filter: alpha (opacity = 0 ); / * IE 5-7 * / opacity: 0; color: transparent; border: none; outline: none; z-index: -1;)

Чому б просто не зробити її фон прозорим? Та тому, що це не працює в IE, так як елемент не є клікабельним. Так що замість цього ми використовуємо суцільний фон, і виставляємо елементу прозорість в 0.

Іконка пошуку спочатку буде мати високий z-index, так як нам треба, щоб вона виводилося поверх всього. Використовуємо псевдо-елемент : before, Щоб додати іконку пошуку:

Sb-icon-search (color: #fff; background: # e67e22; z-index: 90; font-size: 22px; font-family: "icomoon"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased;) .sb-icon-search: before (content: "\ e000";)

Не забудьте підключити іконочние шрифт на самому початку нашого CSS:

@ 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") format ( " truetype "), url (" ../ fonts / icomoon / icomoon.svg # icomoon ") format (" svg "); font-weight: normal; font-style: normal;)

З тими стилями, які ми тільки що визначили, можна просто змінити ширину контейнера sb-search на 100%, присвоївши клас sb-search-open. Без JavaScript поле пошуку буде відкрито за замовчуванням:

Sb-search.sb-search-open, .no-js .sb-search (width: 100%;)

Давайте змінимо колір іконки пошуку і виставимо його за кнопкою відправки форми, задавши z-index менше значення:

Sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search (background: # da6d0d; color: #fff; z-index: 11;)

І, нарешті, поставимо кнопці відправки форми z-index більш високе значення, щоб ми могли на нього клікнути:

Sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit (z-index: 90;)

Отже, всі стилі описані, давайте займемося JavaScript.

JavaScript

Почнемо з перемикання класу sb-search-open. Будемо додавати клас тоді, коли буде проводитися клік на основний контейнер (sb-search) і прибирати його тоді, коли буде проведений клік по кнопці відправки форми, але тільки, якщо в поле нічого не записано. Інакше ми просто відправимо форму. Щоб не видаляти клас при кліці на поле введення (так як наші тригери задані для всього контейнера), потрібно запобігти спливання події click на цьому елементі. Це означає, що при кліці на поле вводиться не буде викликано подію click для батьківських елементів.

; (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")) (// відкриваємо ev.preventDefault ( ); self.open ();) else if (classie.has (self.el, "sb-search-open") && /^\s*$/.test(self.inputEl.value)) (// закриваємо 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");)) // заносимо в глобальний простір імен window.UISearch = UISearch;)) (window);

Далі потрібно додати записи, щоб видалити класу sb-search-open, якщо ми натискаємо кудись за межами нашої рядки пошуку. Для того, щоб це працювало також треба подбати про Спливання подій при кліці на основний контейнер.

; (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")) (/ / відкриваємо ev.preventDefault (); self.open ();) else if (classie.has (self.el, "sb-search-open") && /^\s*$/.test(self.inputEl.value )) (// закриваємо 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"); // закриваємо поле пошуку, якщо був клік десь поза контейнера var bodyFn = function ( ev) (self.close (); this.removeEventListener ( "click", bodyFn);); document.addEventListener ( "click", bodyFn);), close: function () (classie.remove (this.el, " sb-search-open ");)) // зано сім в глобальний простір імен window.UISearch = UISearch; )) (Window);

Ще одна штука, про яку треба подбати - видалення зайвих символів пробілів з початку і з кінця рядка.

Також при кліці на іконку пошуку, потрібно зробити так, щоб фокус переміщувався на поле введення. Так як це викликає уривчасту отрисовку на мобільних пристроях (iOS), так як в цей же час відкривається і клавіатура, то нам треба якось запобігти відкриття клавіатури для таких випадків. Коли ми закриваємо поле пошуку, потрібно прибрати з нього фокус. Це вирішує проблеми, коли на деяких пристроях після закриття поля пошуку все ще відображається миготливий курсор.

; (Function (window) (// http://stackoverflow.com/a/11381730/989439 function mobilecheck () (var check = false; (function (a) (if (/ (android | ipad | playbook | silk | bb \ d + | meego). + mobile | avantgo | bada \ / | blackberry | blazer | compal | elaine | fennec | hiptop | iemobile | ip (hone | od) | iris | kindle | lge | maemo | midp | mmp | netfront | opera m (ob | in) i | palm (os)? | phone | p (ixi | re) \ / | plucker | pocket | psp | series (4 | 6) 0 | symbian | treo | up \. (browser | 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 \ - | cell | 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 | gene | gf \ -5 | g \ -mo | go (\. w | od ) | gr (ad | un) | haie | hcit | hd \ - (m | p | t) | hei \ - | hi (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 | idea | ig01 | ikom | im1k | inno | ipaq | iris | ja (t | v) a | jbro | jemu | jigs | kddi | keji | kgt (| \ /) | klon | kpt | kwc \ - | kyo (c | k) | le (no | xi) | lg (g | \ / (k | l | u) | 50 | 54 | \ -) ​​| libw | lynx | 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) | so (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 | up (\ .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 | whit | wi (g | nc | nw) | wmlb | wonu | x700 | yas \ - | your | zeto | zte \ - /i.test(a.substr(0,4)))check = true)) (navigator.userAgent || navigator.vendor || window.opera); return check; ) // 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 (); // видаляємо зайві пробільні символи self.inputEl.value = self.inputEl.value.trim (); if (! classie.has ( self.el, "sb-search-open")) (// відкриваємо ev.preventDefault (); self.open ();) else if (classie.has (self.el, "sb-search-open") && /^\s*$/.test(self.inputEl.value)) (// закриваємо 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 "); // переносимо фокус на поле введення if (! mobilecheck ()) (this.inputEl.focus ();) // закриваємо поле пошуку, якщо був клік десь поза контейнера var bodyFn = function (ev) (self.close (); this. removeEventListener ( "cl ick ", bodyFn); ); document.addEventListener ( "click", bodyFn); ), Close: function () (this.inputEl.blur (); classie.remove (this.el, "sb-search-open");)) // заносимо в глобальний простір імен window. UISearch = UISearch; )) (Window);

Щоб все це працювало плавно на мобільних пристроях, потрібно задати відповідні тач-події. додавши preventDefaultв функцію initSearchFnзапобіжить одночасне спрацьовування подій тапа по екрану і кліка для мобільних пристроїв.

; (Function (window) (// http://stackoverflow.com/a/11381730/989439 function mobilecheck () (var check = false; (function (a) (if (/ (android | ipad | playbook | silk | bb \ d + | meego). + mobile | avantgo | bada \ / | blackberry | blazer | compal | elaine | fennec | hiptop | iemobile | ip (hone | od) | iris | kindle | lge | maemo | midp | mmp | netfront | opera m (ob | in) i | palm (os)? | phone | p (ixi | re) \ / | plucker | pocket | psp | series (4 | 6) 0 | symbian | treo | up \. (browser | 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 \ - | cell | 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 | gene | gf \ -5 | g \ -mo | go (\. w | od ) | gr (ad | un) | haie | hcit | hd \ - (m | p | t) | hei \ - | hi (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 | idea | ig01 | ikom | im1k | inno | ipaq | iris | ja (t | v) a | jbro | jemu | jigs | kddi | keji | kgt (| \ /) | klon | kpt | kwc \ - | kyo (c | k) | le (no | xi) | lg (g | \ / (k | l | u) | 50 | 54 | \ -) ​​| libw | lynx | 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) | so (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 | up (\ .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 | whit | wi (g | nc | nw) | wmlb | wonu | x700 | yas \ - | your | zeto | zte \ - /i.test(a.substr(0,4)))check = true)) (navigator.userAgent || navigator.vendor || window.opera); return check; ) // 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 (); // видаляємо зайві пробільні символи self.inputEl.value = self.inputEl.value.trim (); if (! classie.has ( self.el, "sb-search-open")) (// відкриваємо ev.preventDefault (); self.open ();) else if (classie.has (self.el, "sb-search-open") && /^\s*$/.test(self.inputEl.value)) (// закриваємо 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"); // переносимо фокус на поле введення if (! mobilecheck ()) ( this.inputEl.focus (); ) // закриваємо поле пошуку, якщо був клік десь поза контейнера var bodyFn = function (ev) (self.close (); this.removeEventListener ( "click", bodyFn); this.removeEventListener ( "touchstart", bodyFn) ;); document.addEventListener ( "click", bodyFn); document.addEventListener ( "touchstart", bodyFn); ), Close: function () (this.inputEl.blur (); classie.remove (this.el, "sb-search-open");)) // заносимо в глобальний простір імен window. UISearch = UISearch; )) (Window);

І, нарешті, для браузерів, які не підтримують addEventListenerі removeEventListener, Будемо використовувати EventListener від Jonathan Neal.

// EventListener | @jon_neal | //github.com/jonathantneal/EventListener! window.addEventListener && window.Element && (function () (function addToPrototype (name, method) (Window.prototype = HTMLDocument.prototype = Element.prototype = method;) var registry =; addToPrototype ( "addEventListener", function (type, listener) (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 () (event. cancelBubble = true); event.relatedTarget = event.fromElement || null; event.target = event.srcElement || target; event.timeStamp = + new Date; listener.call (target, event);), listener: listener, 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); } } } }); })();

І ось воно! Сподіваюся, вам сподобалося дане керівництво, і ви почерпнули з нього щось корисне для себе!

Поле пошуку для сайту- один з найважливіших елементів призначеного для користувача інтерфейсу на веб-сторінці. З його допомогою користувач може знайти потрібний контент на вашому сайті.

У цьому уроці ви дізнаєтеся, як створити розмітку для поля пошуку за допомогою HTML5, а також як стилізувати елементи форми, використовуючи можливості CSS3, без використання скриптів.

1. Розмітка HTML

Пошук

елемент

є контейнером для форми пошуку, поле пошуку створюється за допомогою елементу або , А кнопка відправки даних на сервер може створюватися за допомогою елемента або .

Чим відрізняється від ? Обидва цих поля створюють однорядкове текстове поле для введення тексту, але type = "search" додано в стандарт HTML5 і є семантичної підказкою для браузерів. Всі браузери, крім Mozilla Firefox, Додають хрестик очищення в поле. Щоб його прибрати, можна поміняти тип поля на type = "text".

Чим відрізняється від

? Різниці в дії кнопок відправки, створених першим або другим способом, немає. Відмінність полягає в тому, що елемент є контейнером, отже всередину нього можна поміщати інші елементи, наприклад, зображення або іконки.

Текст в поля форми можна додавати двома способами:
1)
Колір тексту, що відображається буде сірого кольору. За допомогою наступних правил можна задати тексту-підказкою будь-який колір, поміняти накреслення і фон поля. Ці селектори можна поєднувати в одне правило, інакше вони не будуть працювати.

Input :: - webkit-input-placeholder (color: # B6C0A5; font-style: italic; background: # E0EFCA;) input: -moz-placeholder (color: # B6C0A5; font-style: italic; background: # E0EFCA; ) input: -ms-input-placeholder (color: # B6C0A5; font-style: italic; background: # E0EFCA;)

2)
Колір тексту, що відображається буде чорного кольору. Поставити своє колір можна за допомогою властивості color, наприклад:

Input (color: white;)

Для відображення іконок не забудьте підключити.

2. Поле пошуку з кнопкою-іконкою

* (Box-sizing: border-box;) form (position: relative; width: 300px; margin: 0 auto;) input (width: 100%; height: 42px; padding-left: 10px; border: 2px solid # 7BA7AB ; border-radius: 5px; outline: none; background: # F9F0DA; color: # 9E9C9C;) button (position: absolute; top: 0; right: 0px; width: 42px; height: 42px; border: none; background: # 7BA7AB; border-radius: 0 5px 5px 0; cursor: pointer;) button: before (content: "\ f002"; font-family: FontAwesome; font-size: 16px; color: # F9F0DA;)

3. Поле пошуку з кнопкою всередині

* (Box-sizing: border-box;) form (position: relative; width: 300px; margin: 0 auto;) input, button (border: none; outline: none; border-radius: 3px;) input (width: 100%; height: 42px; background: # F9F0DA; padding-left: 15px;) button (height: 26px; width: 26px; position: absolute; top: 8px; right: 8px; background: # F15B42; cursor: pointer; ) button: before (content: "\ f105"; font-family: FontAwesome; color: # F9F0DA; font-size: 20px; font-weight: bold;)

4. Поле пошуку в стилі «flat»

* (Box-sizing: border-box;) form (position: relative; width: 300px; margin: 0 auto; background: # A3D0C3;) input, button (border: none; outline: none; background: transparent;) input (width: 100%; height: 42px; padding-left: 15px;) button (height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer;) button: before (content: "\ f002"; font-family: FontAwesome; font-size: 16px; color: # F9F0DA;)

5. Поле пошуку з товстої нижньою межею

* (Box-sizing: border-box;) form (position: relative; width: 300px; margin: 0 auto; background: # F9F0DA; border-bottom: 4px solid # be290e;) input, button (border: none; outline : none; background: transparent;) input (width: 100%; height: 42px; padding-left: 15px;) button (height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer;) button: before (content: "\ f178"; font-family: FontAwesome; font-size: 20px; color: # be290e;)

6. Поле пошуку з мінливим кольором кордону

* (Box-sizing: border-box;) form (position: relative; width: 300px; margin: 0 auto;) input, button (outline: none; background: transparent;) input (width: 100%; height: 42px ; padding-left: 15px; border: 3px solid # F9F0DA;) button (border: none; height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer;) button: before ( content: "\ f002"; font-family: FontAwesome; font-size: 16px; color: # F9F0DA;) input: focus (border-color: # 311c24;)

7. виїжджати поле пошуку

Поле пошуку з'являється при натисканні на кнопку з іконкою.

* (Box-sizing: border-box;) form (position: relative; width: 300px; margin: 0 auto; height: 42px;) input (height: 42px; width: 0; padding: 0 42px 0 15px; border: none; border-bottom: 2px solid transparent; outline: none; background: transparent; transition: .4s cubic-bezier (0, 0.8, 0, 1); position: absolute; top: 0; right: 0; z-index : 2;) input: focus (width: 300px; z-index: 1; border-bottom: 2px solid # F9F0DA;) button (background: # 683B4D; border: none; height: 42px; width: 42px; position: absolute ; top: 0; right: 0; cursor: pointer;) button: before (content: "\ f002"; font-family: FontAwesome; font-size: 16px; color: # F9F0DA;)

8. Збільшується в ширину поле пошуку

* (Box-sizing: border-box;) form (width: auto; float: right; margin-right: 30px;) input (width: 250px; height: 42px; padding-left: 15px; border-radius: 42px; border: 2px solid # 324b4e; background: # F9F0DA; outline: none; position: relative; transition: .3s linear;) input: focus (width: 300px;) button (width: 42px; height: 42px; background: none; border: none; position: absolute; top: -2px; right: 0;) button: before (content: "\ f002"; font-family: FontAwesome; color: # 324b4e;)

Для багатьох людей ефективність пошуку інформації в Інтернеті - це ті самі ноги, які вовка годують. Де знайти актуальну і свіжу інформацію? Де купити дешевше, а продати дорожче? Де знайти максимально точні інструкції для виконання тих чи інших завдань? Де подивитися фільми онлайн? Щоб максимально коректно відповідати на ці та подібні запитання користувачів пошукові системи з року в рік вдосконалюють і без того витончені механізми подання сайтів в пошукових ведучихпо конкретним призначеним для користувача запитів. Мета пошукових систем - відвести людей на якомога більш якісний сайт для отримання відповіді на поставлені запитання.

Крім пошукових механізмів, самі пошуковики оснащені фільтрами пошуку, щоб будь-який користувач міг звузити область пошуку інформації або конкретизувати свій запит.

Розглянемо нижче деякі з пошукових розширень, якими можна доповнити популярні браузери, і, як наслідок - збільшити ефективність пошуку інформації в Інтернеті.

Пошукові розширення для Google Chrome

Search the current site

Внутрішнім пошукачем облаштований не кожен сайт, і на таких ресурсах доводитися довго бігати з розділу в розділ в пошуках конкретної інформації. Впроваджених в браузер розширення для пошуку всередині сайту - універсальний інструмент, який буде завжди під рукою, на якій би сайт ви не потрапили. Все, що необхідно зробити для пошуку потрібної інформації всередині якогось сайту, це ввести ключовий запит в невелике пошукове поле, що з'являється при натисканні кнопки розширення на панелі браузера.

У новій вкладці браузера відкриються результати пошуку пошукача, і в них будуть відібрані сторінки конкретного сайту, де зустрічається ключове слово.

Search the current site впроваджується з попередньо встановленою пошуковою системою Google, але в параметрах розширення можна встановити інший пошуковик - Яндекс, Yahoo або Bing. Для цього на кнопці розширення викликаємо контекстне меню і вибираємо команду «Параметри».

У новій вкладці браузера відкриються параметри розширення, де можемо вибрати іншу пошукову систему. І вже вона буде здійснювати пошук усередині сайту.

альтернативний пошук Google

Пошукова система Яндекс спочатку передбачає можливість шукати інформацію в двох інших пошукових системах - Google і Bing - одним кліком, правда посилання для переходу в ці пошуковики разом з введеним ключові запитом туляться в самому низу сторінки результатів пошуку.

А ось Google в цьому плані більш егоїстичний - в його результатах пошуку немає ніяких згадок про пошукових системах-конкурентах. Виправити цю ситуацію можна, запровадивши в Google Chrome розширення «Альтернативний пошук Google».

Чим постійно за кожним разом вводити в доважок до ключовим словом«Торрент», щоб отримати результати пошуку по торрент-трекера, простіше встановити спеціальне розширення для цих цілей TMS (Torrents MultiSearch).

Кнопка розширення впроваджується в панель інструментів браузера, і при її натисканні відкриється невелике пошукове поле для введення запиту.

Результати пошуку з'являються в окремій вкладці, і це буде контент, знайдений тільки на торрент-трекерах Рунета, а не на сайтах-виразника, софт-і медійних порталах або офіційних сайтах.

У результатах пошуку по торрент-трекерах знайдений контент можна відфільтрувати за розміром файлу або датою його викладки. Для звуження пошуку можна задати додатково ключові слова.

Результати пошуку також можна дивитися окремо по конкретним торрент-трекера і окремо за такими типами контенту, як фільми, музика, програмне забезпечення.

Крім цього, розширення TMS впроваджується в контекстне меню браузера, щоб можна було відправити в пошук по торрент-трекера будь-яке слово або фразу, виділені на сторінках в Інтернеті без зайвої метушні з копіюванням і вставкою.

контекстний пошук

У Google Chrome впроваджена функція контекстного пошуку за допомогою одного пошукача, встановленого в браузері за замовчуванням. Збільшити число пошукових систем, за допомогою яких можна шукати будь-яке виділене слово на сторінках сайтів, покликане розширення «Контекстний пошук».

У розширенні спочатку присутня можливість пошуку по популярному торрент-трекеру RuTracker, по Вікіпедії і по медійного порталу Kinopoisk.Ru.

Інші пошукові системи, щоб через них можна було б шукати інформацію прямо з контекстного меню браузера, додаються в параметрах розширення. Відкриємо меню Google Chrome, виберемо «Налаштування» і перейдемо в розділ розширень, встановлених в браузері.

У переліку розширень вибираємо потрібне нам - «Контекстний пошук». Тиснемо посилання «Параметри».

Пошукові розширення для Opera

Search within the site

Кнопка розширення знаходиться на панелі інструментів браузера, і, натиснувши на неї, можна викликати пошукове поле для введення ключового запиту, а також змінити пошуковик.

Попередньо Яндекс і Google в налаштуваннях розширення можна доповнити іншими пошуковими системами. Викличемо на кнопці розширення контекстне меню і вибираємо команду «Налаштування».

Точно так же, як і у випадку з розширенням «Контекстний пошук» для Google Chrome, для додавання нової пошукової системинеобхідно ввести її URL-рядок.

Torrents MultiSearch

Similar image search

Similar image search додає в контекстне меню браузера Opera додаткову команду пошуку схожих зображень за допомогою декількох пошукових систем.

Або буде представлений список публікацій зі схожими картинками.

Пошукові розширення для Mozilla Firefox

Пошук по сайту

Як і в попередніх двох випадках, спеціальне розширення для пошуку всередині будь-якого сайту в Інтернеті існує і для браузера Mozilla Firefox.

Тільки у випадку з Вогненним Лисом пошук по сайту вбудовується в існуючу пошукове поле браузера, додаючи перед значком звичайного пошуку свій значок у вигляді червоного збільшувального скла.

Зміна пошукач за умовчанням для звичайного пошуку Mozilla Firefox тягне за собою і зміну пошукача і для пошуку всередині сайтів.

Розширення «Пошук по сайту» інтегрується в контекстне меню Mozilla Firefox, і, виділивши будь-«ліпше під руку» слово, в окремих результатах пошуку можна побачити всі сторінки сайту, де це слово присутнє.

Пошук від byffox

будь-які програмні продуктиз такими «ще не подорослішали» назвами, як правило, дратують багатьох користувачів тим, що в них ну ніяк не вбачається навіть натяк про цільове призначення пропонованого інструментарію.

І про те, що саме пропонує «Софтина від Васі» або «Ріпак ігрулю від Петі», доводиться дізнаватися лише при детальному ознайомленні з описом. Проте, за таким легковажним назвою, як «Пошук від byffox», криється корисний і тлумачний функціонал. Це розширення дозволяє поповнити контекстне меню браузера додаткової командою пошуку виділеного слова за допомогою різних пошукових систем.

Жовтень 25, 2019 Запис була оновлена

Висувається форма пошуку на сайт

Стиль Flat знайшов чималу популярність при дизайні сайтів. І в цьому уроці ми розглянемо ще один елемент сайту, який зроблений в цьому стилі. Це елемент - форма пошуку. Але не проста, а форма пошуку яка з'являється при натисканні і «згортається» якщо її не використовують. Що стосується іконки пошуку, то вона береться з SVG-файлу і є масштабованої при різних дозволах екрану (як на мобільних пристроях, так і на великих моніторах).

Приклад можна побачити тут:

завантажити

Висувається форма пошуку

Як використовувати?

HTML

Спершу визначимося з розміткою, яка буде на HTML сторінці:

1 2 3 4 5 6 7

<div id = "sb-search" class = "sb-search"> <form> <input class = "sb-search-input" placeholder = "Що буде шукати?" type = "text" value = "" name = "search" id = "search"> <input class = "sb-search-submit" type = "submit" value = ""> <span class = "sb-icon-search"> </ Form> </ Div>

У формі пошуку нічого незвичайного немає: текстове поле для введення, кнопка пошуку і елемент для іконки.

CSS

Тепер додамо стилів, щоб форма пошуку красиво виглядала на сторінці.

Так як буде з'являтися при кліці, то спочатку вона прихована. Це робиться за допомогою властивості overflowі його значенням hidden, В результаті чого ховається все що знаходиться за межами іконки (в результаті ми бачимо тільки іконку, а текстове поле немає):

.sb-search (position: relative; margin-top: 10px; width: 0%; min-width: 60px; height: 60px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz- transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden;)

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

.sb-search-input (position: absolute; top: 0; right: 0; border: none; outline: none; background: #fff; width: 100%; height: 60px; margin: 0; z-index: 10 ; padding: 20px 65px 20px 20px; font-family: inherit; font-size: 20px; color: # 2c3e50;) input [type = "search"] .sb-search-input (-webkit-appearance: none; -webkit -border-radius: 0px;)

Визначаємо колір тексту, який знаходиться на тлі запиту (тексту, який ми вводимо при пошуку):

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

.sb-search-input:: -webkit-input-placeholder (color: # efb480;) .sb-search-input: -moz-placeholder (color: # efb480;) .sb-search-input:: -moz- placeholder (color: # efb480;) .sb-search-input: -ms-input-placeholder (color: # efb480;)

Кнопка пошуку знаходиться завжди над іншими блоками і елементами на сторінці, тому задаємо їй велике значення z-index:

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

.sb-icon-search (color: #fff; background: # e67e22; z-index: 90; font-size: 22px; font-family: "icomoon"; speak: none; font-style: normal; font-weight : normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased;) .sb-icon-search: before (content: " \ E000 "; }

Також не забуваємо підключити спеціальні іконки (SVG). Для того щоб вставити іконку в кнопці пошуку:

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") Format ( "truetype" script><script src = "js / uisearch.js"> <script> new UISearch (document.getElementById ( "sb-search"));</ Script>

висновок

Симпатична форма пошуку, яка займає дуже мало місця на сайті і красиво з'являється при натисканні на іконку з пошуком.