За много хора ефективността на търсенето на информация в интернет е самите крака, които пасат вълка. Къде мога да намеря подходяща и актуална информация? Къде да купя по-евтино и да продам по-скъпо? Къде мога да намеря най-точните инструкции за изпълнение на определени задачи? Къде да гледате филми онлайн? За да отговорите възможно най-правилно на тези въпроси подобни въпросипотребители, търсачките от година на година подобряват вече усъвършенстваните механизми за представяне на сайтове в резултатите от търсенето за конкретни потребителски заявки. Целта на търсачките е да отведат хората до възможно най-добрия сайт, за да получат отговори на въпросите си.

В допълнение към търсачките, самите търсачки са оборудвани с филтри за търсене, така че всеки потребител да може да стесни обхвата на своето търсене на информация или да уточни своята заявка.

Нека разгледаме някои от изброените по-долу разширения за търсене, които могат да бъдат допълнени с популярни браузъри и в резултат на това да повишат ефективността на търсене на информация в Интернет.

Разширения за търсене за Google Chrome

Търсене в текущия сайт

Не всеки уебсайт има вътрешна търсачка и на такива ресурси трябва да прекарате дълго време в тичане от секция на секция в търсене на конкретна информация. Разширение, интегрирано в браузъра за търсене в рамките на сайт, е универсален инструмент, който винаги ще бъде под ръка, независимо на кой сайт попаднете. Всичко, което трябва да направите, за да намерите необходимата информация в даден сайт, е да въведете ключова заявка в малкото поле за търсене, което се появява, когато щракнете върху бутона за разширение в панела на браузъра.

Резултатите от търсенето на търсачката ще се отворят в нов раздел на браузъра и ще бъдат избрани страниците на конкретния сайт, където се появява ключовата дума.

Търсенето в текущия сайт се осъществява с предварително инсталирана търсачка на Google, но в параметрите на разширението можете да инсталирате друга търсачка - Yandex, Yahoo или Bing. За да направите това, извикайте контекстното меню на бутона за разширение и изберете командата „Опции“.

Опциите за разширение ще се отворят в нов раздел на браузъра, където можем да изберем друга търсачка. И тя вече ще търси в сайта.

Алтернативно търсене в Google

Търсачката Yandex първоначално предоставя възможност за търсене на информация в две други търсачки - Google и Bing - с едно кликване, въпреки че връзките за отиване към тези търсачки, заедно с въведената ключова заявка, са скупчени в най-долната част на страница с резултати от търсенето.

Но Google е по-егоистичен в това отношение - в резултатите от търсенето не се споменава за конкурентни търсачки. Можете да коригирате тази ситуация, като въведете разширението „Алтернативно търсене в Google“ в Google Chrome.

Вместо постоянно да въвеждате „торент“ в допълнение към ключовата дума всеки път, за да получите резултати от търсенето от торент тракери, по-лесно е да инсталирате специално разширение за тази цел, TMS (Torrents MultiSearch).

Бутонът за разширение е вграден в лентата с инструменти на браузъра и при натискане върху него се отваря малко поле за търсене, в което можете да въведете заявка.

Резултатите от търсенето се показват в отделен раздел и това ще бъде съдържание, намерено само в торент тракерите на Runet, а не в сайтовете на Vareznik, софтуерните и медийните портали или официалните сайтове.

В резултатите от търсенето на торент тракери, намереното съдържание може да бъде филтрирано по размер на файла или дата на качването му. За да стесните търсенето, можете да посочите допълнителни ключови думи.

Резултатите от търсенето също могат да се разглеждат отделно за конкретни торент тракери и отделно за типове съдържание като филми, музика и софтуер.

В допълнение, разширението TMS е вградено в контекстното меню на браузъра, така че можете да изпратите всяка дума или фраза, подчертана на интернет страници, за търсене в торент тракери без излишно суетене с копиране и поставяне.

Контекстно търсене

Google Chrome въведе функция за контекстно търсене, като използва една търсачка, инсталирана в браузъра по подразбиране. Разширението „Контекстуално търсене“ е предназначено да увеличи броя на търсачките, с които можете да търсите всяка избрана дума на страниците на уебсайта.

Първоначално разширението включва възможност за търсене в най-популярния торент тракер RuTracker, Wikipedia и медийния портал Kinopoisk.Ru.

Други търсачки, за да можете да търсите информация чрез тях директно от контекстното меню на браузъра, се добавят в параметрите на разширението. Отворете менюто на Google Chrome, изберете „Настройки“ и отидете в секцията с разширения, инсталирани в браузъра.

В списъка с разширения изберете това, от което се нуждаем - „Контекстуално търсене“. Кликнете върху връзката „Опции“.

Разширения за търсене за Opera

Търсете в сайта

Бутонът за разширение се намира в лентата с инструменти на браузъра и като щракнете върху него, можете да извикате поле за търсене за въвеждане на ключова заявка, както и да промените търсачката.

Предварително инсталираните Yandex и Google в настройките на разширението могат да бъдат допълнени с други търсачки. Извикайте контекстното меню на бутона за разширение и изберете командата „Настройки“.

По същия начин, както в случая с разширението „Контекстуално търсене“ за Google Chrome, за да добавите нов търсачкатрябва да въведете неговия URL низ.

Torrents MultiSearch

Търсене на подобни изображения

Търсенето на подобни изображения добавя допълнителна команда към контекстното меню на браузъра Opera за търсене на подобни изображения с помощта на няколко търсачки.

Или ще бъде представен списък с публикации с подобни снимки.

Разширения за търсене за Mozilla Firefox

Търсене в сайта

Както в предишните два случая, специално разширение за търсене във всеки сайт в Интернет съществува и за браузъра Mozilla Firefox.

Само в случая на Fire Fox търсенето в сайта е вградено в съществуващото поле за търсене на браузъра, добавяйки своя собствена икона под формата на червена лупа преди обикновената икона за търсене.

Промяната на търсачката по подразбиране за редовно търсене в Mozilla Firefox включва промяна на търсачката за търсене в сайтове.

Разширението „Търсене в сайта“ е интегрирано в контекстното меню на Mozilla Firefox и като маркирате всяка дума, която ви дойде под ръка, можете да видите всички страници на сайта, където тази дума присъства в отделни резултати от търсенето.

Търсене чрез byffox

Всички софтуерни продукти с такива „все още неузрели“ имена, като правило, дразнят много потребители, защото дори не намекват за предназначението на предложените инструменти.

И трябва да разберете какво точно предлага „Софтина от Вася“ или „Репак Игрули от Петя“ само след като прочетете подробно описанието. Но зад такова несериозно име като „Търсене по byffox“ се крие полезна и разумна функционалност. Това разширение ви позволява да допълвате контекстното меню на браузъра с допълнителна команда за търсене на избраната дума с помощта на различни търсачки.

Комбинираната лента за адрес и търсене ви позволява да правите заявки в търсачките или да въвеждате уеб адреси, за да намерите това, което търсите в мрежата. Opera използва търсачката на Google по подразбиране.

За търсене в мрежата:

1. Щракнете върху Търсете или въведете адресполе.
2. Въведете ключови думи за това, което искате да намерите. Например въведете филми.
3. Щракнете върху едно от предложенията за предсказуемо търсене, които се появяват или натиснете Въведете.

Предложенията за предсказуемо търсене се появяват, докато пишете. Ако искате да видите резултати от друга търсачка, като Yahoo!, Amazon или Bing, щракнете върху съответния раздел, който се появява в долната дясна част на полето с предложения за предсказуемо търсене.

Ако вече знаете местоположението на страница, въведете уеб адреса директно в комбинираната лента за адрес и търсене и натиснете Enter, за да отидете до тази страница. Например, въведете www.opera.com и натиснете Enter, за да отидете до началната страница на софтуера Opera.

Търсачка по подразбиране

Търсачката по подразбиране на Opera е Google, но може да предпочетете да търсите с помощта на Ecosia, DuckDuckGo, Amazon или Wikipedia. За да промените търсещата машина по подразбиране:

1. Отидете на Настройки.
2. Под Търсачка, изберете предпочитаната от вас търсачка от падащото меню.

Персонализирани търсачки

В допълнение към търсачките по подразбиране на Opera, можете да настроите комбинираната лента за адрес и търсене, за да връщате резултати от други търсачки. За да направите това:

1. Щракнете с десния бутон (Ctrl + щракнете върху Mac) върху лентата за търсене на сайт и изберете Създайте търсачка...
2. Задайте име и ключова дума на двигателя.
3. Кликнете Добре.

Създайте персонализирана търсачка

За да създадете търсене в персонализирана търсачка, първо въведете присвоената ключова дума на вашата машина, последвана от интервал и след това въведете вашата заявка.

Можете да редактирате ключови думи и да управлявате или премахвате търсачки от страницата с настройки. За да направите това:

1. Отидете на Настройки.
2. Под Търсачка, щракнете върху Управление на търсачкатабутон.

Търсете с персонализирана търсачка

За да използвате персонализирана търсачка при търсенето си, въведете ключовата дума, последвана от интервал преди заявката. Например Bing има ключовата дума „b“. За да търсите с Bing, напишете „b Коя е столицата на Айдахо“. Резултатите ще се отворят на страница с резултати от търсенето в Bing.

Разстоянието между ключовата дума и вашата заявка за търсене е важно за избора на персонализирана търсачка.

Променете търсачките в контекстното меню с маркиран текст

С изскачащия инструмент за търсене на Opera можете да маркирате текст на уеб страница и да използвате избрания текст като заявка за търсене. Изскачащият инструмент за търсене използва вашата търсачка по подразбиране. Въпреки това може да искате резултати от друга машина, след като маркирате текст за заявка за търсене.

За да търсите с помощта на контекстното меню, маркирайте текст на уеб страница и щракнете с десния бутон (или CTRL + щракнете) върху селекцията.

В изскачащия прозорец задръжте курсора на мишката върху Търсене с, след което изберете търсачката, която искате да използвате.

Резултатите от търсенето ще се отворят в нов раздел.

Променете търсачките в Instant Search

Как да използвате изскачащ прозорец за търсене:

1. Маркирайте текст на уеб страница.
2. Ще се появи изскачащ прозорец над маркирания текст, включително опциите Търсенеи копие(и Дялако сте на Mac). Ако е маркирана валута, единица или часова зона, преобразуваната стойност ще се появи в изскачащия прозорец .
3. Изберете Търсенеза да направите заявка към вашата търсачка по подразбиране с маркирания текст.
4. Изберете копиеза да копирате маркирания текст в клипборда.
5. Ако в изскачащия прозорец има преобразувана стойност, щракнете върху стойността, за да я копирате в клипборда.

За да деактивирате изскачащия инструмент за търсене, включително всичките му функции:

1. Отидете на Настройки.
2. Кликнете Разширенов лявата странична лента и щракнете Характеристика.
3. Под Изскачащ прозорец за търсене, изключи Активирайте изскачащия прозорец за търсене при избиране на текст.

Урок за това как да направите удобна за мобилни устройства и отзивчива лента за търсене

Днес бихме искали да ви покажем как да създадете ефект като този на изображението по-горе. Целта е да се подобри съвместимостта с мобилни устройства и по-стари браузъри (IE 8+). Дори и на пръв поглед да изглежда просто нещо, ще кажа, че трябваше да използваме няколко трика, за да накараме целия механизъм да работи по предназначение.

Като цяло, какво искаме да постигнем от лентата за търсене:

• първоначално показва само бутона с иконата за търсене
• Когато щракнете върху иконата, трябва лентата за търсене да се премести встрани
• компонентът трябва да е гъвкав, в смисъл, че може да се използва в отзивчив интерфейс
• когато потребителят въвежда нещо на ред, е необходимо формулярът да може да бъде изпратен чрез натискане на бутона Enter или щракване върху бутона за търсене
• ако полето е отворено и в него не са въведени данни и натиснем бутона за търсене, полето за въвеждане трябва да се затвори
• имаме нужда и от затваряне на полето за въвеждане, ако щракнем някъде извън полето за търсене, без значение дали е празно или не
• ако JavaScript е деактивиран, полето за търсене трябва да изглежда разширено
• за по-добро взаимодействие със сензорни устройства, вие също трябва да добавите поддръжка за сензорни събития

Сега решихме всичко, което трябва да направим, нека започнем с маркирането.

Маркиране

В маркирането използваме основния контейнер, формуляр, текстово поле и бутон за изпращане, както и елемент span за иконата:

Всъщност можете да използвате псевдоелемент за икона, но тъй като той не е предназначен за сменяеми елементи, които са елементи на формата, ние просто използваме елемента педя.

Сега, когато всички елементи са на мястото си, нека ги стилизираме.

CSS

Въз основа на нашите изисквания първо ще се уверим, че имаме бутон с видима икона за търсене. Всичко останало трябва да се скрие. Но нека помислим още една стъпка и си представим какво се случва, когато разширим лентата за търсене (с основния контейнер). Как да направим това? Ползване на имота преливане: скритои промяната на ширината на контейнера за sb-търсене трябва да разкрие полето за въвеждане.

И така, нека първо да стилизираме контейнера за sb-search. Нека го накараме да плава отдясно и да го дадем преливане: скрито. Първоначалната му ширина ще бъде 60px, но тъй като искаме да анимираме до 100% ширина, това ще причини проблеми в мобилните браузъри (iOS). Те не харесват преходите от ширина на пиксел към ширина в проценти. В този случай те просто няма да направят прехода. Затова вместо това нека зададем минималната ширина на 60px и ширината на 0%.

Ще добавим и преход за ширината със свойството -webkit-backface-visibility: hidden, което ще премахне нежеланите „опашки“ в мобилните браузъри (iOS):

Sb-търсене (позиция: относителна; margin-top: 10px; width: 0%; min-width: 60px; height: 60px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition : ширина 0,3 s; преход: ширина 0,3 s; -webkit-backface-visibility: скрит)

Всичко извън този правоъгълник няма да бъде показано.

Сега нека позиционираме полето за въвеждане. Използваме процентна ширина, така че когато разширим родителския елемент, полето за въвеждане ще се разшири с него. Задаването на правилната височина, размер на шрифта и полета гарантира, че текстът е центриран (line-height не работи според очакванията в IE8, така че вместо това използваме полета). Абсолютно позициониране на полето за въвеждане не е необходимо, но решава досадния проблем, че понякога при затваряне на полето за търсене за кратък период от време то се появява вдясно от бутона.

Sb-търсене-вход (позиция: абсолютна; горе: 0; дясно: 0; граница: няма; контур: няма; фон: #fff; ширина: 100%; височина: 60px; поле: 0; z-индекс: 10; padding: 20px 20px; font-size: 20px; input.sb-appearance: none;

В допълнение към това, ние премахваме стандартните стилове на полетата за въвеждане на браузъра за двигателя WebKit.

Нека зададем цветовете на текста с помощта на специфични за браузъра свойства:

Sb-search-input::-webkit-input-placeholder (цвят: #efb480;) .sb-search-input:-moz-placeholder (цвят: #efb480;) .sb-search-input::-moz-placeholder ( цвят: #efb480; ) .sb-search-input:-ms-input-placeholder ( цвят: #efb480; )

Сега нека се погрижим за иконата за търсене на бутона за изпращане на формуляра. Искаме да са на едно и също място, един под друг, така че ще ги позиционираме спрямо десния ъгъл и ще им дадем еднакви размери. Тъй като те трябва да са разположени една върху друга, ние ги позиционираме абсолютно:

Sb-icon-search, .sb-search-submit (ширина: 60px; височина: 60px; дисплей: блок; позиция: абсолютна; дясно: 0; горе: 0; подложка: 0; поле: 0; височина на линия: 60px подравняване на текста: център;

В началната позиция искаме иконата за търсене да може да се кликва, а когато разширим полето за търсене, искаме да може да се кликва върху бутона за изпращане на формуляр. Така че първоначално ще настроим бутона за изпращане на формуляра на z-index=-1 и ще го направим прозрачен, така че винаги да виждаме педяс икона за търсене:

Sb-search-submit ( фон: #fff; /* за IE */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ филтър: alpha(opacity=0 ); /* IE 5-7 */ непрозрачност: 0; z-index: -1;

Защо просто не направите нейния фон прозрачен? Да, защото не работи в IE, тъй като върху елемента не може да се кликне. Затова вместо това използваме плътен фон и задаваме непрозрачността на елемента на 0.

Иконата за търсене първоначално ще има висок z-индекс, защото искаме да се показва над всичко. Използване на псевдо елемент :предиза да добавите икона за търсене:

Sb-икона-търсене (цвят: #fff; фон: #e67e22; z-индекс: 90; размер на шрифта: 22px; семейство шрифтове: "icomoon"; говори: няма; стил на шрифта: нормален; тегло на шрифта: font-variant: none; webkit-smoothing: antialiased:before (съдържание: "\e000"; )

Не забравяйте да включите шрифта на иконата в самото начало на нашия CSS:

@font-face ( семейство шрифтове: "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 (ширина: 100%;)

Нека променим цвета на иконата за търсене и я поставим зад бутона за изпращане на формуляр, като зададем z-индекса на по-ниска стойност:

Sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search ( фон: #da6d0d; цвят: #fff; z-индекс: 11; )

И накрая, нека зададем z-индекс на бутона за изпращане на формуляра повече от висока стойносттака че можем да щракнем върху него:

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) и ще го премахнем, когато се щракне върху бутона за изпращане на формуляр, но само ако нищо не е написано в полето. В противен случай просто ще изпратим формуляра. За да не изтриете класа, когато щракнете върху полето за въвеждане (тъй като нашите тригери са зададени за целия контейнер), трябва да предотвратим избухването на събитието за щракване върху този елемент. Това означава, че когато щракнете върху полето за въвеждане, събитието за щракване за родителските елементи няма да бъде задействано.

;(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("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")) ( / / 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"); ) ) // добавете го към прозореца на глобалното пространство от имена.UISearch = UISearch; ))(прозорец);

Друго нещо, за което трябва да се внимава, е премахването на допълнителни празни символи от началото и края на реда.

Освен това, когато щракнете върху иконата за търсене, трябва да се уверите, че фокусът се премества в полето за въвеждане. Тъй като това причинява рязко изобразяване мобилни устройства(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)?|телефон|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(браузър |връзка)|vodafone|wap|windows (ce|телефон)|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\-|вашият|zeto|zte\- /i.test(a.substr(0,4)))check = true))(navigator.userAgent||navigator.vendor||window.opera); обратна проверка; ) // http://www.jonathantneal.com/blog/polyfills-and-prototypes/ !String.prototype.trim && (String.prototype.trim = function() ( return this.replace(/^\s+|\ s+$/g, ""); функция UISearch(el, опции) ( this.el = el; this.inputEl = el.querySelector("form > input.sb-search-input"); this._initEvents(); ) UISearch.prototype = ( _initEvents: функция () ( 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(); това. removeEventListener("щракване", bodyFn); ); document.addEventListener("щракване", bodyFn); ), close: function() ( this.inputEl.blur(); classie.remove(this.el, "sb-search-open"); ) ) // добавяне към прозореца на глобалното пространство от имена. UISearch = UISearch; ))(прозорец);

За да може всичко това да работи безпроблемно на мобилни устройства, трябва да зададете съответните събития при докосване. Добавяйки предотврати по подразбираневъв функция 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)?|телефон|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(браузър |връзка)|vodafone|wap|windows (ce|телефон)|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\-|вашият|zeto|zte\- /i.test(a.substr(0,4)))check = true))(navigator.userAgent||navigator.vendor||window.opera); обратна проверка; ) // http://www.jonathantneal.com/blog/polyfills-and-prototypes/ !String.prototype.trim && (String.prototype.trim = function() ( return this.replace(/^\s+|\ s+$/g, ""); функция UISearch(el, опции) ( this.el = el; this.inputEl = el.querySelector("form > input.sb-search-input"); this._initEvents(); ) UISearch.prototype = ( _initEvents: функция () ( 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); 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("щракване", bodyFn); document.addEventListener("touchstart", bodyFn); ), close: function() ( this.inputEl.blur(); classie.remove(this.el, "sb-search-open"); ) ) // добавяне към прозореца на глобалното пространство от имена. UISearch = UISearch; ))(прозорец);

И накрая, за браузъри, които не поддържат addEventListenerИ removeEventListener, ще използваме EventListener от Джонатан Нийл.

//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", функция (тип, слушател) ( 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.relatedTarget = event.fromElement || null; event.stopPropagation = function() (event. cancelBubble = true); събитие. relatedTarget = event.srcElement ||. target: target, type )); ; addToPrototype("removeEventListener", функция (тип, слушател) ( for (var index = 0, length = registry.length; индекс< 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

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

Тъй като ще се появи при щракване, първоначално е скрит. Това става с помощта на имота препълванеи значението му скрит, в резултат на което всичко, което е извън иконата, е скрито (в крайна сметка виждаме само иконата, но не и текстовото поле):

Ние определяме цвета на текста, който е на фона на заявката (текста, който въвеждаме при търсене):

Бутонът за търсене винаги се намира над останалите блокове и елементи на страницата, затова го даваме голямо значение z-индекс:

Също така не забравяйте да включите специални икони (SVG). За да вмъкнете икона в бутона за търсене:

Заключение

Хубава форма за търсене, която заема много малко място в сайта и изглежда красиво, когато щракнете върху иконата за търсене.