Как да напишете низ за търсене в HTML. Търсене на разширения за браузъри
Тази бележка е продължение на предишния член (превод) "Търсене в блога, използвайки Google Ajax Search API и jQuery."
След като го напишете, помислих си къде е по-вероятно да постави формуляр и килим от резултати, с изключение на отделна страница. Идеята не се изчаква дълго време: логично е да опитате търсенето с резултатите в изскачащия прозорец.
Първо дЕМКА:
Търсене на блог ↓.
Като "фондация" за изскачащо търсене, аз избрах jquery plug-in modal windows Разкрие . Той е лек, без ненужни елементи и е много лесен за свързване.Инсталиране разкрива.
Секцията за шаблона се предписва на сценария и стилове:
Не забравяйте, че в архива на плъгина има снимка PNG, която трябва да поставите Picasi в албума си и да регистрирате пътя към нея разкривам..
Следващата стъпка е да се инициализира плъгинът " tune." сценарий (поставени от същото):
След това определете съдържание на изскачащия прозорец (Аз го поставям в тялото на публикацията):
Търсене на блог ↓.
тук въведете всички кодове за търсене от статията "Търсене на блог, използвайки Google Ajax Search API и jQuery".
Според моя коментар в този код, копипестим Има всички "Google"което в момента говори. В CSS стиловете шаблон ще трябва да увеличи площта на белия квадрат.
И последната стъпка - себе си връзка към прозореца на модателякоито могат да бъдат както текст, така и графичен. Код на връзката под формата на картина (също в тялото на публикацията):
W. РазкриеМодален прозорец плъгин има два вида анимация: избледняват и fadeandpop., Регулируема скорост на ефекта: анимацииПид: 300.И възможността за затваряне на целия прозорец, като кликнете върху затъмнения фон: closeonbackgleclick: true..
Тези настройки се записват в скрипта "TUNING" (виж по-горе):
$ ("# Mymodal"). Разкриване ((анимация: "fadeandpop", // fade, fadeandpop, няма анимации peaction: 300, // колко бързи анимации са clistonbackgroundclick: true, // ако щракнете върху фон ще се затворят в близост? "Close-deven-modal" // класа на бутон или елемент, който ще затвори отворен модал));
Или, тези опции могат да бъдат свързани чрез връзка На модалния прозорец (виж по-горе)
Трябва да се разбира, че такава схема търсене в отделен прозорец - Чистата вода експеримент и изисква по-задълбочено персонализиране.
Комбинираният адрес и лентата за търсене ви позволява да заявите търсачките или входните уеб адреси, за да намерите това, което търсите в мрежата. Opera използвайте търсачката на Google по подразбиране.
За да търсите в мрежата:
- Кликнете върху. Търсене или въвеждане на адрес Поле.
- Въведете ключови думи за това, което искате да намерите. Например, въведете филми.
- Кликнете върху едно от предсказуемите предложения за търсене, които се появяват или натиснете Inter..
Предприематните предложения за търсене се появяват, докато пишете. Ако искате да видите резултатите от друга търсачка, като Yahoo!, Amazon, или Bing, щракнете върху раздела за търсене, който се появява в долната дясна част на предсказателната кутия за търсене.
Ако вече знаете местоположението на дадена страница, въведете уеб адреса директно в комбинирания адрес и лентата за търсене и натиснете ENTER, за да се придвижите до тази страница. Например, въведете www.opera.com и натиснете ENTER, за да навигирате до началната страница на Opera софтуер.
Търсене по подразбиране
Търсачката по подразбиране на Opera е Google, но може да предпочитате да търсите с Ecosia, Duckduckgo, Amazon или Wikipedia. За да промените търсачката по подразбиране:
- Отидете на. Настройки.
- Под ТЪРСАЧКАИзберете предпочитаната от вас търсачка от падащото меню.
Персонализирани търсачки.
В допълнение към търсачките по подразбиране на Opera, можете да настроите комбинирания адрес и лентата за търсене, за да върнете резултатите от други търсачки. Да го направя:
- Щракнете с десния бутон (Ctrl + кликнете върху Mac) на лентата за търсене на сайта и изберете Създайте търсачка ....
- Задайте името на двигателя и ключова дума.
- Кликнете. ДОБРЕ..
Създайте персонализирана търсачка
За да създадете търсене в персонализирана търсачка, въведете зададената ключова дума на двигателя, последвана от интервал и след това въведете заявката си.
Можете да редактирате ключови думи и да управлявате или премахвате търсачките от страницата с настройки. Да го направя:
- Отидете на. Настройки.
- Под ТЪРСАЧКАЩракнете върху The. Управление на търсачката Бутон.
Търсене с персонализирана търсачка
За да използвате персонализирана търсачка в търсенето, въведете ключовата дума, последвана от пространство преди вашата заявка. Например, bing има ключова дума "b". Да търсят какво е столицата на Айдахо. " Резултатите ще се отворят в страницата с резултати от търсенето.
Пространството между ключовата дума и заявката за търсене е важно за избор на персонализирана търсачка.
Промяна на търсачките в контекстното меню на текстовия текст
С изскачащия инструмент за търсене на Opera можете да маркирате текст на уеб страница и да използвате избрания текст като заявка за търсене. Изскачащият инструмент за търсене използва вашата търсачка по подразбиране. Можете обаче да искате резултатите от друг двигател след маркиране на текст за заявка за търсене.
За да търсите с контекстното меню, маркирайте някой текст на Ctrl + щракване (или Ctrl + щракване) Изборът.
В изскачащия прозорец, дръжте мишката мишка Търсене с., След това изберете търсачката, която искате да използвате.
Резултатите от търсенето ще се отворят в нов раздел.
Промяна на търсачките в незабавно търсене
Как да използвате изскачаща програма за търсене:
- Маркирайте текста на уеб страница.
- Изскачането ще се появи над маркирания текст, включително опциите Търсене. И. копие(и. Дял.ако на Mac). Ако е маркирана валута, единица или часова зона, преобразуваната стойност ще се появи в изскачащия .
- Изберете Търсене.за да заявите търсачката си по подразбиране с маркирания текст.
- Изберете копиеза да копирате маркирания текст в клипборда си.
- Ако в изскачащата настройка има преобразувана стойност, кликнете върху стойността, за да я копирате в клипборда.
За да забраните изскачащия инструмент за търсене, включително всичките му функции:
- Отидете на. Настройки.
- Кликнете. Разширено В лявата странична лента и кликнете Характеристика..
- Под Търсене, Изключи Активирайте изскачането на търсенето при избиране на текст.
25 октомври 2019 г. Записът е актуализиран
Прекарване на формуляр за търсене на сайт
Плоският стил е придобил значителна популярност при проектирането на сайтове. И в този урок ще разгледаме друг елемент на сайта, който се прави в този стил. Този елемент е формуляр за търсене. Но не е просто и формата за търсене, която се появява, когато се натисне и "гънките", ако не се използва. Що се отнася до иконата за търсене, той се взема от SVG файла и е мащабируем с различни резолюции на екрана (както на мобилни устройства, така и на големи монитори).
Може да се види пример тук:
Изтегли
Форма за експресивна търсене
Как да използвам?
HTML.
Първо ще вземем решение за маркиране, което ще бъде на HTML страницата:
| 1 2 3 4 5 6 7 | <div id \u003d "sb-search" клас \u003d "sb-search"\u003e <форма\u003e <клас на вход \u003d "SB-търсене-вход" \u003d - Какво ще се случи? Тип \u003d "Текст" стойност \u003d "" Име \u003d "Търсене" ID \u003d "Търсене"\u003e <вход клас \u003d "sb-search-submit" type \u003d "Изпрати" стойност \u003d ""\u003e <клас на разстоянието \u003d "SB-икона-търсене"\u003e </ Формуляр\u003e </ Div\u003e |
Няма нищо необичайно в формуляра за търсене: текстово поле за вход, бутон за търсене и елемент За икони.
CSS.
Сега добавете стилове, така че формулярът за търсене да се гледа красиво в страницата.
Тъй като ще се появи при кликване, първоначално е скрит. Това се прави с помощта на имота. препълване.и неговия смисъл скрит.В резултат на това всичко крие всичко извън иконата (в крайна сметка виждаме иконата, и няма текстово поле):
| .SB-търсене: 10px; ширина: 0%; min-ширина: 60px; височина: 60px; поплавък: дясно; преливник: скрит; -webkit-преход: ширина 0.3s; -Moz-преход: ширина 0.3s; Ширина 0.3s; -Извесна видимост: скрита;) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .SB-търсене (позиция: абсолютно; отгоре: 0; дясно: 0; граница: няма; очертание: нищо; фон: #fff; ширина: 100%; височина: 60px; марж: 0; z-индекс: 10 ; подложка: 20px 65px 20px 20px; шрифт: наследство; размер на шрифта: 20px; цвят: # 2C3E50;) вход [type \u003d "Търсене"] .SB-търсене-въвеждане (-иблюда-външен вид: none; -webkit - Радиус: 0px;) |
Определете цвета на текста, който е на фона на заявката (текст, който въвеждаме при търсене):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .SB-търсене-вход: -Уебкит-входно-място (цвят: # EFB480;) .SB-търсене-вход: -moz-Slocolder (цвят: # EFB480;) .SB-търсене-вход: Цвят: # EFB480;) .SB-търсене-вход: -ms-input-slogher (цвят: # efb480;) |
Бутонът за търсене е винаги над останалите блокове и елементи на страницата, затова го задаваме голямо значение. z-индекс.:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .SB-icon-търсене (цвят: #fff; фон: # e67e22; z-индекс: 90; размер на шрифта: 22px; шрифт: "Icomoon"; говорете: няма; стил на шрифта: нормален; : Нормално; Вариант на шрифта: Нормален; Текстова трансформация: Няма; -Извездни средства: Антиализирани;) .SB-икона-търсене: Преди (съдържание: " 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?jiefix") Формат ("вграден-opentype"), URL ( "../fonts/icomoon/icomoon.woff") Формат ("WOFF"), URL адрес ( "../fonts/icomoon/icomoon.ttf) Формат ("TrueType" скрипт\u003e<script src \u003d "js / uisearch.js"\u003e <сценарий\u003e New uisearch (document.getelementbyid ("sB-search"));</ скрипт\u003e |
Изход
Формуляр за търсене, който отнема много малко място на сайта и се появява красиво, когато кликнете върху иконата с търсене.
Надбавка за това как да направите мобилен ориентиран и адаптивния низ за търсене
Днес бихме искали да ви покажем как да осъзнаете ефекта, както в изображението отгоре. Целта е да се подобри съвместимостта с мобилните устройства и старите браузъри (т.е. 8+). Дори ако на пръв поглед изглежда просто нещо, ще кажа, че трябва да приложим няколко трика, за да принудим целия механизъм да работим, както е мисъл.
Като цяло, това, което искаме да постигнем от низа за търсене:
- първоначално показват само бутона с иконата за търсене
- когато кликнете върху иконата, трябва да започнете низ за търсене
- компонентът трябва да бъде гъвкав, в смисъл, така че да може да се използва в адаптивния интерфейс
- когато потребителят отпечатва нещо в низ, трябва само да изпратите формуляра, като натиснете бутона ENTER или кликнете върху бутона за търсене
- ако полето е разкрито, и данните не се въвеждат в него и ние натискаме бутона за търсене - полето за въвеждане трябва да се затвори
- необходимо е и входното поле да се затвори, ако кликнем някъде извън полето за търсене, независимо дали е празно или не
- ако JavaScript е деактивиран, полето за търсене трябва да се показва отворено.
- за по-добро взаимодействие със сензорните устройства трябва да добавите поддръжка за докосване.
Сега решихме за всичко, което трябва да направим, да започнем с маркирането.
Маркиране
В маркировката използвайте основния контейнер, полето, текстовото поле и бутона за изпращане, както и елемента SPAN за иконата:
Всъщност е възможно да се използва псевдолен елемент за иконата, но тъй като не е предназначен за заменени елементи, какви са елементите на формата, ние просто използваме елемента обхват.
Сега, когато всички елементи на местата им ги стинят.
CSS.
Въз основа на нашите изисквания, първо се уверете, че имаме бутон с видима икона за търсене. Всичко останало трябва да бъде скрито. Но ние също ще мислим за крачка напред и си представим какво се случва, когато разширим лентата за търсене (с основния контейнер). Как го правим? Използвайте свойство препълнете: скрит.и промяна на ширината на контейнера SB-Search, трябва да покаже полето за въвеждане.
Така че, преди всичко, е стилизиран контейнерът за търсене на SB. Нека го накараме да бъдеш в плаваща държава, и да го попитам препълнете: скрит.. Първоначалната му ширина ще бъде 60px, но тъй като искаме да анимираме до 100% ширина, тя ще предизвика проблеми в мобилните браузъри (IOS). Те не харесват преходи от ширина на пикселите до процент. В този случай те просто не прехождат. Така че, вместо това определяме минималната ширина на 60px и ширината от 0%.
Също така добавете прехода към ширината на -webkit-backface-видимост: скрит имот, който ще спести от нежелани "опашки" на мобилни браузъри (IOS):
SB-търсене (позиция: 10px; ширина: 0%; мин. Ширина: 60px; височина: 60px; поплавък: дясно; преливане: скрит; -MEBKIT-преход: ширина 0.3s; -Moz-преход : Ширина 0.3s; преход: ширина 0.3s; -Извесничество - видимост: скрит;)
Всичко, което надхвърля този правоъгълник, няма да бъде показан.
Сега, нека да запазим полето за въвеждане. Използваме процентна ширина, така че когато разпространим родителския елемент, полето за въвеждане ще се разшири с него. Настройката на правилната височина, размерът на шрифта и полетата гарантира, че текстът ще бъде центриран (височината на линията не работи в IE8, тъй като може да се очаква, така че вместо това използвайте полета). Абсолютното позициониране на полето за въвеждане не е необходимо, но решава обратния проблем с факта, че понякога при затваряне на полето за търсене за кратък период от време, той се показва вдясно от бутона.
SB-търсене-вход (позиция: абсолютна; отгоре: 0; право: 0; граница: няма; очертание: нищо; фона: #fff; ширина: 100%; височина: 60px; марж: 0; z-индекс: 10; Подложка: 20px 65px 20px 20px; Фрин: наследство; размер на шрифта: 20px; цвят: # 2C3E50;) вход.SB-търсене-външен вид: none; -webkit-граница-радиус: 0px;)
В допълнение към всичко, премахваме стандартните стилове на полета за запис на браузъра за Webkit двигателя.
Нека зададем цветовете на текста, като използвате свойствата на конкретни браузъри:
SB-търсене-въвеждане :: - WebKit-входно-място (цвят: # EFB480;) .SB-търсене-вход: -MOZ-Slocolder (цвят: # EFB480;) .SB-търсене-въвеждане :: - Moz-inpute :: (Цвят: # EFB480;) .SB-търсене-вход: -ms-входно-място (цвят: # EFB480;)
И сега ще се погрижим за иконата за търсене на бутона за изпращане. Искаме те да бъдат разположени на едно място, един под друг, така че ще ги определим спрямо правилния ъгъл и да зададем същия размер. Тъй като те трябва да бъдат разположени сами на върха на друг, ние ще ги определим абсолютно:
SB-icon-търсене, .SB-search-submit (ширина: 60px; височина: 60px; дисплей: блок; позиция: абсолютно; дясно: 0; отгоре: 0; подложка: 0; марж: 0; линейна височина: 60px ; Текстово поколение: Център; курсор: указател;)
В оригиналната позиция, ние искаме да кликнем върху иконата за търсене и когато разкрием полето за търсене, искаме бутонът за кликване, за да бъде кликнат. Така първоначално задайте бутона за изпращане, за да изпратите z-index \u003d -1 и да го направите прозрачен, за да го видим винаги обхват С икона за търсене:
SB-search-submit (фон: #fff; / * за IE * / -ms-Filter: "Progid: dximagetransform.microsoft.alpha (opacity \u003d 0)"; / * т.е. 8 * / филтър: алфа (opacity \u003d 0 ); / * Т.е. 5-7 * / непрозрачност: 0; цвят: прозрачен; граница: няма; очертание: няма; z-индекс: -1;)
Защо не просто да направите своя опит прозрачен? Да, защото не работи в IE, тъй като елементът не е клин. Така че, вместо това използваме солиден фон и проявяваме прозрачността на елемента в 0.
Иконата за търсене първоначално ще има висок Z-индекс, тъй като трябва да бъдем очертани над всичко. Използваме псевдо елемент : Преди.За да добавите икона за търсене:
SB-icon-търсене (цвят: #fff; фона: # e67e22; Z-индекс: 90; размер на шрифта: 22px; шрифт: "Icomoon"; говорете: няма; шрифт: нормален; теглото на шрифта: Нормално; Вариант на шрифта: Нормален; Текстова трансформация: Няма; -Използване на шрифтове: антиализирани;) .SB-икона-търсене: преди (съдържание: "E000";)
Не забравяйте да свържете шрифта на иконата в самото начало на нашия CSS:
@ Font-Face (Font-Family: "Icomoon"; SRC: url (".. / шрифтове / icomoon / icomoon.eot"); src: url (".. / шрифтове / icomoon / icomoon.eot? #Iefix" ) Формат ("Вграден-opentype"), URL (".. / шрифтове / icomoon / icomoon.woff") формат ("woff"), URL ("../ шрифтове / icomoon / icomoon.ttf") формат (" TrueType "), URL (" .. / шрифтове / icomoon / icomoon.svg # iComoon ") формат (" svg "); теглото на шрифта: нормално; стил на шрифта: нормален;)
С тези стилове, които току-що идентифицираме, можете просто да промените ширината на контейнера SB-Search с 100%, присвоявате клас SB-Search-Open. Без JavaScript, полето за търсене ще бъде отворено по подразбиране:
Sb-search.sb-търсене-отворен, .no-js .bsb-търсене (ширина: 100%;)
Нека променим цвета на иконите за търсене и да го показваме извън бутона за изпращане, като зададете Z-индекс по-малко стойност:
Sb-search.sb-търсене-отворен .sb-icon-search-search, .no-js .sb-search .sb-icon-търсене (фон: #fff; z-индекс: 11;)
И накрая, задайте бутона за изпращане, за да изпратите z-индекс по-висока стойност, така че да кликнем върху него:
Sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-търсене-изпращане (z-индекс: 90;)
Така че всички стилове са описани, нека да получим JavaScript.
JavaScript.
Да започнем с превключването на клас SB-Search-Open. Ще добавим клас, когато кликнете върху главния контейнер (SB-search) и го извадете, когато кликването ще се извърши на бутона за изпращане, но само ако в полето не се записва нищо. В противен случай просто изпращаме формата. За да не изтриете класа, когато кликнете върху полето за въвеждане (тъй като нашите тригери са зададени за целия контейнер), трябва да предотвратите появата на кликване върху този елемент. Това означава, че когато кликнете върху полето за въвеждане, няма да бъде причинено събитие за кликване на родителски елементи.
(Функция uisearch (el, options) (this.el \u003d el; this.inputel \u003d el.queryselector ("form\u003e input.sb-търсене-вход"); this._initevents ();) uisearch .prototype \u003d (_initevents : Функция () (var self \u003d this, initsearchfn \u003d функция (EV) (ако (! classie.has (self.el, "sb-search-open")) (// Open ev.preventdefault (); ();) Иначе, ако (classie.has (self.el, "sb-search-open") && / ^ /s de/.test(self.inputel.value)) (// затворете самостоятелно (); )) that.el.addeventlistener ("click", initsearchfn); this.inputel.addeventlistener ("click", функция (EV) (ev.stoppropagation ();));), отворен: функция () (class.add (this.el, "sb-search-open");), close: function () (Classie.remove (this.el, "sb-search-open");)) // влизане в световния прозорец на пространството. uisearch \u003d uisearch;)) (прозорец);
След това трябва да добавите събития, за да изтриете клас SB-Search-Open, ако кликнем някъде извън нашия низ за търсене. За да работи, също е необходимо да се грижи за изскачането на събитията при кликване върху основния контейнер.
(Функция uisearch (el, options) (this.el \u003d el; this.inputel \u003d el.queryselector ("form\u003e input.sb-търсене-вход"); this._initevents ();) uisearch .prototype \u003d (_initevents : функция () (var self \u003d this, initsearchfn \u003d функция (eV) (ev.stoppropagation (); ако (! classie.has (self.el, "sb-search-Open")) (/ / Open ev.preventdefault \\ t (); elf.open ();) иначе, ако (classie.has (self.el, "sb-търсене-отворен") && / (sb-search-open ") && / s.inputel.value)) ( // close self.Close ()))) st.el.addeventlistener ("click", initsearchfn; this.inputel.addeventlistener ("click", функция (EV) (ev.stoppropagation (););), отворен: Функция () (var self \u003d this; classie.add (this.el, "sb-search-open"); // затворете полето за търсене, ако има щракване някъде извън BodyFN \u003d функционален контейнер (EV) Self.close (); this.removeeventlistener ("кликнете", телесноfn);); document.addeventlistener ("кликнете", bodyfn);), close: function () (classie.remove (this.el, "sb-search \\ t -Open ");)) //// SIM в световния прозорец на пространството в пространството.Използване \u003d uisearch; )) (Прозорец);
Друго нещо, за което трябва да се погрижите е да премахнете ненужните глобуларни герои от самото начало и от края на линията.
Също така, когато кликнете върху иконата за търсене, трябва да направите фокуса, който се движи по полето за въвеждане. Тъй като той причинява отделно рисуване на мобилни устройства (iOS), тъй като клавиатурата се отваря по едно и също време, тогава трябва по някакъв начин да предотвратим отварянето на клавиатурата за такива случаи. Когато затваряме полето за търсене, трябва да премахнете фокуса от него. Това решава проблема, когато на някои устройства след затваряне на полето за търсене все още се показва мигащият курсор.
(Функция (прозорец) (// http://stackoverflow.com/a/11381730/989439 () (var check \u003d false; (функция (a) (ако (/ (android | iPad | playbook | BB D + | MeeGo). + Mobile | Avantgo | Bada / | Blackberry | Blazer | Compal | Elaine | Fennec | Hiptop | Imbile | IP (Hone | OD) | IRIS | Kindle | lge | maemo | mmp | mmp | Netfront | Opera m (ob | IN) I | Palm (OS)? | Телефон | P (IXI | RE) / | POCKER | PECK | PSP | Серия (4 | 6) 0 | Symbian | Treo | ( Браузър | Link) | 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) | AUTw AU (DI | и | 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 | CLD | CLDC | cmd \\ t- | CO (MP | ND) | CO (IT) | | Ll | ng) | dbte | dca | diica | dmob | do (c | p) o | ds (12,1-ра) | el (49 | ai) | em (l2 | ul) | ER (IC | K0) | ESL8 | EZ (0 | OS | wa | ze) | fetc | fly (- | _) | g1 u | g560 | gene | gf \\ t , W | OD) | GR (AD | UN) | Haie | HCIT | HD - (m | p | t) | hei - | hi (pt | ta) | hp (i | IP) | HS \\ t | Ht (c (- | | _ | a | g | p | s | t) | tp) | hu (aw | tc) | i \\ t | o | v) | zz) | mt (50 | p1 | v) | mwbp | mywa | n10 | n20 | N30 (0 | 2) | N50 (0 | 2 | 5) | N7 (0 (0 | | 10) | ne ((c | m) - | на | tf | wf | wg | wt) | nok (6 | i) | nzph | o2im | op (ti | wv) | oran | OWG1 | P800 | Pan (A | d | t) | pdxg | pg (13 |, (| в)) | Phil | Pire | PL (AY | UC) | PN -2 | po (ck | rt | se) | prox | psio QC (07 | 12 | 21 | 32 | Qtek | R380 | R600 | RAKS | RIM9 | RO (ve | zo) | s55 / | SA (ge | mm | ms | ny | va) | sc (01 | h - | oo | р \\ _bs) | sdk / | se (c (- | 0 | 1) | 47 | mc | nd | ri) | SGH \\ _B) | SK 0 | SL (45 | ID) | см (al | ar | b3 | то | t5) | така ( ft | ny) | sp (01 | h - | v \\ tиз (01 | MB) | T2 (18 | 50) | T6 (00 | 10 | 18) | TA (GT | LK) | TDG - | тел (i | m) | tim \\ t- | t \\ t-t t ts (70 | m \\ t (.B | g1 | si) | utst | v400 | v750 | veri | vi (rg | te) | vk (40 | 5 | v) | vm40 | voda | volc | vx (52 | 53 | 60 | 61 | 70 | 80 | 81 | 83 | 85 | 98) | W3C (- |) | webc | wh | wi (g | nc | nw) | wmlb | wonu | x700 | zte \\ t - /i.test(a.substr(0,4)))) Проверка на връщането; ) // http://www.jonathantneal.com/blog/polyfils-and-prototypes/! string.prototype.trim && (string.prototype.trim \u003d function () (върнете this.replace (/ ^ s + | S + $ / g, "");)); Функция uisearch (el, options) (this.el \u003d EL; this.inputel \u003d el.queryseortoc ("form\u003e input.sb-търсене"); this._initevents ();) uisearch.prototype \u003d (_initevents: функция () (Var self \u003d this, initsearchfn \u003d функция (EV) (ev.stoppropagation (); // премахване на ненужната самостоятелност.Inputel.value \u003d self.inputel.value.trim (); ако (! Classie.has (Self! EL, "sB-search-open")) (// отворен ev.preventdefault (); self.open ();) иначе, ако (classie.has (self.el, "sb-search-Open") && / ^ /S.7/.testue)))) (// close self.close ();)) this.el.addeventlistener ("click", initsearchfn); this.inputel.addeventlistener ("click", функция (EV) (EV) (EV) .Stoppropagation ();));), отворен: функция () (var self \u003d this; classie.add (this.el, "sb-search-open"); // трансфер фокус върху IF (! Mobilecheck ()) полето (this.inputel.focus ();) // затворете полето за търсене, ако има щракване някъде извън VAR BodyFN \u003d функционалния контейнер (EV) (Self.Close (); това. removeventlistener ("CL Ick ", телесноfn); ); document.addeventlistener ("кликнете", телеснаFNN); ), Close: function () (this.inputel.blur (); classie.remove (this.el, "sb-search-open");)) // влизаме в глобалното пространство от имената на имената на прозореца. Uisearch \u003d uisearch; )) (Прозорец);
За всичко това работи гладко на мобилни устройства, трябва да посочите съответните събития с докосване. . \\ T previdefault. В функция initsearchfn. Предотвратява едновременното задействане на Tapa събития на екрана и кликнете за мобилни устройства.
(Функция (прозорец) (// http://stackoverflow.com/a/11381730/989439 () (var check \u003d false; (функция (a) (ако (/ (android | iPad | playbook | BB D + | MeeGo). + Mobile | Avantgo | Bada / | Blackberry | Blazer | Compal | Elaine | Fennec | Hiptop | Imbile | IP (Hone | OD) | IRIS | Kindle | lge | maemo | mmp | mmp | Netfront | Opera m (ob | IN) I | Palm (OS)? | Телефон | P (IXI | RE) / | POCKER | PECK | PSP | Серия (4 | 6) 0 | Symbian | Treo | ( Браузър | Link) | 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) | AUTw AU (DI | и | 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 | CLD | CLDC | cmd \\ t- | CO (MP | ND) | CO (IT) | | Ll | ng) | dbte | dca | diica | dmob | do (c | p) o | ds (12,1-ра) | el (49 | ai) | em (l2 | ul) | ER (IC | K0) | ESL8 | EZ (0 | OS | wa | ze) | fetc | fly (- | _) | g1 u | g560 | gene | gf \\ t , W | OD) | GR (AD | UN) | Haie | HCIT | HD - (m | p | t) | hei - | hi (pt | ta) | hp (i | IP) | HS \\ t | Ht (c (- | | _ | a | g | p | s | t) | tp) | hu (aw | tc) | i \\ t | o | v) | zz) | mt (50 | p1 | v) | mwbp | mywa | n10 | n20 | N30 (0 | 2) | N50 (0 | 2 | 5) | N7 (0 (0 | | 10) | ne ((c | m) - | на | tf | wf | wg | wt) | nok (6 | i) | nzph | o2im | op (ti | wv) | oran | OWG1 | P800 | Pan (A | d | t) | pdxg | pg (13 |, (| в)) | Phil | Pire | PL (AY | UC) | PN -2 | po (ck | rt | se) | prox | psio QC (07 | 12 | 21 | 32 | Qtek | R380 | R600 | RAKS | RIM9 | RO (ve | zo) | s55 / | SA (ge | mm | ms | ny | va) | sc (01 | h - | oo | р \\ _bs) | sdk / | se (c (- | 0 | 1) | 47 | mc | nd | ri) | SGH \\ _B) | SK 0 | SL (45 | ID) | см (al | ar | b3 | то | t5) | така ( ft | ny) | sp (01 | h - | v \\ tиз (01 | MB) | T2 (18 | 50) | T6 (00 | 10 | 18) | TA (GT | LK) | TDG - | тел (i | m) | tim \\ tt (i) | t ts (pl | sh) | ts (70 | m \\ t- | m3 | m5) | tx \\ t (.B | g1 | si) | utst | v400 | v750 | veri | vi (rg | te) | vk (40 | 5 | v) | vm40 | voda | volc | vx (52 | 53 | 60 | 61 | 70 | 80 | 81 | 83 | 85 | 98) | W3C (- |) | webc | wh | wi (g | nc | nw) | wmlb | wonu | x700 | zte \\ t - /i.test(A.SUBSTR(0,4)))))) Проверете \u003d true) (навигатор.Усераген || navigator.vendor || window.opera); Проверка на връщането; ) // http://www.jonathantneal.com/blog/polyfils-and-prototypes/! string.prototype.trim && (string.prototype.trim \u003d function () (върнете this.replace (/ ^ s + | S + $ / g, "");)); Функция uisearch (el, options) (this.el \u003d EL; this.inputel \u003d el.queryseortoc ("form\u003e input.sb-търсене"); this._initevents ();) uisearch.prototype \u003d (_initevents: функция () (Var self \u003d this, initsearchfn \u003d функция (EV) (ev.stoppropagation (); // премахване на ненужната самостоятелност. EL, "sB-search-open")) (// отворен ev.preventdefault (); self.open ();) иначе, ако (classie.has (self.el, "sb-search-open") && / ^ S * /. Тест (self.inputel.value) (// close ev.preventdefault (); self.close ();)) this.el.addeventlistener ("click", initsearchfn); това. El.addeventlistener ( "Touchstart", initsearchfn); this.inputel.addeventlistener ("click", функция (eV) (ev.stoppropagation ();)); this.inputel.addeventlistener ("TouchStart", функция (EV) (EV) ( );));), отворен: функция () (var self \u003d this; classie.add (this.el, "sb-search-open"); // прехвърля фокуса върху IF (! Mobilecheck! Mobilecheck () ) ( this.inputel.focus (); ) // Затворете полето за търсене, ако има щракване някъде извън BodyFN \u003d контейнера VAR BodyFN \u003d (EV) (EV) (EV) (EV); this.removeEventlistener ("щракване", телеснаFN); това. ); document.addeventlistener ("кликнете", телеснаFNN); Document.addeventlistener (TouchStart, Bodyfn); ), Close: function () (this.inputel.blur (); classie.remove (this.el, "sb-search-open");)) // влизаме в глобалното пространство от имената на имената на прозореца. Uisearch \u003d uisearch; )) (Прозорец);
И накрая, за браузъри, които не поддържат addEventListener. и removeventlistener.Ще използваме Eventlistener от Jonathan Neal.
// Eventlistener | @Jon_neal | //github.com/jonathantheal/eventlistener! Window.addeventlistener && window.plement && (функция (window.prototype \u003d htmldocument.prototype \u003d earl.prototype \u003d метод;) var registry \u003d; addtoprottype ("addtteventlistener", функция ( Тип приемател) (VAR целева \u003d Този; Registry.unshift ((__listener: Функция (събитие) (event.currentTarget \u003d цел; event.pagex \u003d event.clientx + document.documentElement.scrollLeft; event.pagey \u003d event.clienty + document.documentlement.scrolltop; event.preventdefault \u003d function () (accent.returnvalue \u003d false); event.relatedtarget \u003d събитие.fremelement || null; event.stoppropagation \u003d function () (събитие. AntimBble \u003d true); събитие. \u003d събитие .Фреместност || null; event.target \u003d event.srcelment || target; event.timestamp \u003d + нова дата; слушател);), слушател: слушател, цел: цел, тип: тип) ); this.attachevent ("ON" + тип, регистър .__ слушател);)); добавяне Toprototype ("removeventlistener", функция (тип, слушател) (за (var index \u003d 0, дължина \u003d 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); } } } }); })();
И тук е! Надявам се да ви хареса това ръководство и сте научили нещо полезно за себе си от него!
В този урок ще създадем падащ формуляр за търсене, който перфектно се вписва в интерфейсния дизайн за мобилни устройства. За да приложите елемента, ще се използват само CSS - без JavaScript и допълнителна маркиране. Прост и ефективен начин за изпълнение на формуляра за компактна търсене.
Предназначение
На мобилни устройства има запис на всеки пиксел. За да се сведе до минимум необходимото пространство за изхода, първоначално ще бъде показано в компактна форма и ще разкрие за получаване на входен фокус (: фокус). Този подход ви позволява да запишете мястото за други елементи на интерфейса и съдържанието.
HTML markup.
HTML5 се използва за формуляра. Кодът е много прост:
Нулирайте изгледа за формуляра за търсене по подразбиране в браузърите Webkit
По подразбиране формулярът за търсене в браузърите Webkit ще има следната форма:
За да може формулярът за търсене да изглежда като нормално поле за въвеждане на текст, добавете следните стилове:
Вход (-Уебкит-външен вид: textfield; -Измерна оразмеряване: съдържание; семейството на шрифта: наследство; размер на шрифта: 100%;) вход :: - webkit-търсене-декорация, вход :: - webkit- Бутон за търсене-анулиране (дисплей: няма;)
Ние формираме формата си за търсене
Полето за въвеждане ще има редовна ширина от 55px и отворена за 130px в държавата: Фокус. Имотният преход се използва за анимация, а за ефекта на блясъка се използва кутия.
Вход (img / search-icon.png) не-повтарящ се 9px център; гранична: плътна 1px #CCC; подложка: 9px 10px 9px 32px; ширина: 55px; / * ширина по подразбиране * / -webkit граница-радиус: 10EM; -moz - Радиус: 10EM; Радиус на границата: 10EM; -Извесен преход: всички .5s; -Moz-преход: всички .5s; преход: всички .5s;) вход: фокус (ширина: 130px; / * ширина Наличието на входен фокус * / Цвят на фона: #fff; Цвят на границата: # 6DCFF6; -Избор-сянка: 0 0 5px RGBA (109,207,246, .5); -Moz-кутия Shadow: 0 5px RGBA (109,207,246) \\ t , .5); кутия-сянка: 0 0 5px RGBA (109,207,246, .5); / * ефект на освобождаване * /)
Пример Б.
В пример Б, формулярът за търсене е значително сведен до минимум - само иконата се показва без текст на пълнене. Обърнете внимание, че свойствата на подложката и ширината са се променили за полето за търсене, за да образувате кръгъл бутон. За да може текстът да бъде невидим, използвайки цветен имот: прозрачен имот.
# Demo-b вход (ширина: 15px; лява част: 10px; цвят: прозрачен; курсор: указател;) # demo-b вход: hover (фонов цвят: #fff;) # demo-b вход: фокус (ширина : 130px; подложка-ляво: 32px; цвят: # 000; цвят на фона: #fff; курсор: AUTO;)
Съвместимост с браузъри
Описаният метод работи във всички основни браузъри: хром, Firefox, Safari и IE8 +. В IE7 и стари браузъри функционалността не е валидна поради липсата на подкрепа за псевдокласния: фокус и вида на полето за търсене.