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

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

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

Пошукові розширення для 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", криється корисний і тямущий функціонал. Це розширення дозволяє поповнити контекстне меню браузера додатковою командою пошуку виділеного слова за допомогою різних пошукових систем.

З'єднати адреси та пошукову техніку, щоб ви могли знайти пошуки або вводити веб-адреси, щоб дізнатися, що ви збираєтеся на веб-сайті. Opera використовує Google search engine by default.

To search the web:

1. Click the Search or enter address field.
2. Type key words for what you want to find. Для прикладу, типи відео .
3. Натисніть одну з першорядних search suggestions that appear or press Enter.

Predictive search suggestions appear as you type. Якщо ви збираєтеся побачити результати з іншого search engine, так як Yahoo!, Amazon, або Bing, натисніть на відповідний tab, що з'явиться в лівій правій частині попереднього пошуку suggestion box.

Якщо ви знайдете місце розташування на сторінці, тип веб-адреси безпосередньо в з'єднаній address and search bar and press Enter to navigate to that page. Для прикладу, типу www.opera.com і натисніть Enter, щоб перейти до Opera Software homepage.

Default search engine

Opera's default search engine is Google, але ти можеш prefer до пошуку за допомогою Ecosia, DuckDuckGo, Amazon, або Wikipedia. Щоб змінити більш детальний пошуковий інструмент:

1. Go to Settings.
2. Under Search engine, Виберіть свій preferred search engine з загорнутого меню.

Custom search engines

В додатку до Opera's default search engines, ви можете налаштувати комбіновані адреси та пошукові bar для повторних результатів з інших search engines. To do so:

1. Right-click (Ctrl+click on Mac) on a site’s search bar and select Create Search Engine….
2. Визначте символ name і keyword.
3. Click OK.

Create a custom search engine

Для створення search in custom search engine, type your engine's assigned keyword first followed by space and then enter your query.

Ви можете edit keywords, and manage or remove search engines from the settings page. To do so:

1. Go to Settings.
2. Under Search engine, click the Manage Search Engine button.

Search with a custom search engine

Для використання custom search engine in your search, type keyword followed by space before your query. Для прикладу, Bing має слово "b". Для пошуку з Bing, типу “b What is the capital of Idaho.” Результати будуть виконані в Bing search results page.

Space між ключовим словом і вашою пошуковою програмою є важливою для вибору custom search engine.

Зміна search engines in highlighted text context menu

З Opera's search pop-up tool, ви можете вибрати високоякісний текст на веб-сторінці і використовувати вибраний текст як search query. Search pop-up інструмент використовує свій додатковий search engine. However, ви можете отримати результати з іншого інструменту після високогосвітнього тексту для пошуку пошуку.

Для пошуку використовуйте контекст menu, високісвітлі деякі тексти на веб-сторінці і правом-створити (або CTRL + click) selection.

У pop-up window, hover your mouse over Search with, клацніть search engine you wish to use.

Результати пошуку вивчаються в новому tab.

Change search engines in Instant Search

How to use search pop-up:

1. Highlight text на веб-сторінці.
2. A pop-up буде appear above the highlighted text, including the options Search and Copy(and Share if on a Mac). Якщо валюта, цілісність, або час зони є високим, надісланий значення буде з'явитися в pop-up .
3. Select Searchдля отримання вашого default search engine with highlighted text.
4. Select Copyщоб завантажити highlighted text до свого clipboard.
5. Якщо це є впевненим значенням в pop-up, натисніть кнопку, щоб завантажити його до свого clipboard.

Для того, щоб запобігти search pop-up tool, включаючи всі його функції:

1. Go to Settings.
2. Click Advanced on the left sidebar, and click Features.
3. Under Search pop-up, turn off Enable the search pop-up when selecting text.

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

Сьогодні ми хотіли б показати вам, як реалізувати ефект, як на зображенні зверху. Мета - покращити сумісність з мобільними пристроями та старими браузерами (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;

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

Тепер, давайте позиціонуємо поле введення. Ми використовуємо процентну ширину, тому коли ми розсунемо батьківський елемент, поле введення розшириться разом з ним. Виставлення правильної висоти, розміру шрифту та полів гарантує, що текст буде відцентрований (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; font-family: font-size: 20px; color: #2c3e50;

Крім того, ми видаляємо стандартні стилі полів введення браузерів для движка 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; ;text-align: center;

У початковому положенні ми хочемо, щоб клікабельною була іконка пошуку, а коли ми розкриємо поле пошуку, ми хочемо, щоб клікабельною була кнопка відправки форми. Отже спочатку задаємо кнопці відправки форми 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: transparent; none;

Чому б просто не зробити її тло прозорим? Так тому, що це не працює в 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;

Не забудьте підключити іконковий шрифт на початку нашого 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.close(); ) ) this.el.addEventListener("click", initSearchFn); () ( 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(); )) ( // закриваємо self.close(); ) ) this.el.addEventListener("click", initSearchFn); this.inputEl.addEventListener("click", function(ev) ; ), open: function() ( var self = this; classie.add(this.el, "sb-search-open"); // закриваємо поле пошуку, якщо був клік десь поза контейнером var bodyFn = function( ev) ( self.close(); this.removeEventListener("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\/ | opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0| link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||1207|6310|6590|3gso|4thp| (er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te| us) | attw | |bmb|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) | ftc | )|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-| (\-| |_|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| 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)| de|do|t(\-| 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) | (a|d|t)|pdxg|pg(13|\-(|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se) | pt\-g|qa\-a|qc(07|12|21|32|60|\-|i\-)|qtek|r380|r600| /|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(і|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)| .b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5|\-v)|vm40| 70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb| /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); ", 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); ); 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\/ | opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0| link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||1207|6310|6590|3gso|4thp| (er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te| us) | attw | |bmb|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) | ftc | )|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-| (\-| |_|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| 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)| de|do|t(\-| 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) | (a|d|t)|pdxg|pg(13|\-(|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se) | pt\-g|qa\-a|qc(07|12|21|32|60|\-|i\-)|qtek|r380|r600| /|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(і|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)| .b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5|\-v)|vm40| 70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb| /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); el.addEventListener("touchstart", initSearchFn); 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.sroll) event.pageY = event.clientY + document.documentElement.scrollTop; event.preventDefault = function () cancelBubble=true ;; event.relatedTarget = event.fromElement | target: target, type: type )); 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); } } } }); })();

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

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

Форма пошуку, що висувається на сайт

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

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

Завантажити

Форма пошуку, що висувається

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

HTML

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

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

CSS

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

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

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

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

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

Висновок

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