Bom preiskal polje.
ruska literatura
Vodnik o tem, kako razviti mobilno usmerjeno in prilagodljivo iskalno serijo
Danes bi vam radi pokazali, kako ustvariti učinek, kot je na sliki.
- Meta - izboljšajte svojo izkušnjo z mobilnimi napravami in starejšimi brskalniki (IE 8+).
- Čeprav se na prvi pogled zdi preprosta stvar, bom rekel, da smo morali sestaviti kup trikov, da smo premešali celoten mehanizem delovanja po načrtih.
- Tukaj je tisto, kar želimo doseči v seriji iskanj:
- Od zdaj naprej prikažite gumb z ikono za iskanje
- Ob kliku na ikono je potrebno, da klikne zvočna vrstica
- Komponenta je lahko hrošča, zato jo je mogoče spremeniti v prilagodljivem vmesniku
- Če je v vrsti še kakšen, je potrebno obrazec oddati s pritiskom na tipko Enter ali s klikom na tipko za iskanje
- Če je polje odprto in ni vpisanih podatkov in pritisnemo gumb za iskanje, se lahko vnosno polje zapre
Prav tako je nujno, da je vnosno polje zaprto, ko potiskamo nekam v iskalno polje, ne glede na to, ali je prazno
Če je JavaScript onemogočen, je iskalno polje morda prikazano in nekritizirano
Za boljšo interakcijo z napravami na dotik morate dodati tudi podporo za dotik
Razmіtka Postavitev ima glavni vsebnik, obrazec, besedilno polje in gumb za oddajo ter element razpona za ikono:.
Vnesite iskalni izraz ...
Medtem lahko za ikono uporabite psevdoelement, le da ni odstopanj na elementih, ki so nadomeščeni z elementi oblike, ali preprosto vikoriziran element.
razpon Zdaj, če so vsi elementi na svojih mestih, jih oblikujmo. CSS
Če pridem iz naših stikov, bom najprej znova konfiguriral in pritisnil gumb z vidno ikono za iskanje. Zdaj, če so vsi elementi na svojih mestih, jih oblikujmo..
Izhodna širina je 60 slikovnih pik, vendar želimo animirati na 100 % širino, kar povzroča težave v mobilnih brskalnikih (iOS).
Ne marate prehodov iz širine pikslov v odstotek.
Katerega smradu preprosto ni mogoče odstraniti iz tranzicije.
Nato bom nastavil najmanjšo širino na 60 slikovnih pik in širino na 0 %.
Dodamo lahko tudi prehod za širino moči -webkit-backface-visibility: hidden, da zmanjšamo nepotrebne "repe" na mobilnih brskalnikih (iOS):
Sb-iskanje ( položaj: relativno; margin-top: 10px; width: 0%; min-width: 60px; height: 60px; float: right; overflow: hidden; -webkit-transition: width 0,3s; -moz-transition : širina 0,3 s; prehod: širina 0,3 s;
Vse, kar presega meje tega ravnega rezalnika, ne bo posneto.
Zdaj pa postavimo polje za vnos.
Imamo enako procentualno širino, tako da če odstranimo očetov element, se bo vnosno polje razširilo skupaj z njim.
Nastavitev pravilne višine, velikosti pisave in robov zagotavlja, da bo besedilo centrirano (višina vrstice ni podprta v IE8, kot bi lahko pričakovali, zato se namesto tega uporabi rob).
Najprej želimo, da je ikono za iskanje mogoče klikniti, in če odpremo iskalno polje, želimo, da je mogoče klikniti gumb za oddajo obrazca. Postavitev ima glavni vsebnik, obrazec, besedilno polje in gumb za oddajo ter element razpona za ikono: Od sedaj naprej nastavite gumb za oddajo obrazca z-index=-1 in ustvarite pogled, da lahko nadaljujemo
z ikono za iskanje:
Sb-search-submit (ozadje: #fff; /* za IE */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter: alpha(opacity=0 ); /* IE 5-7 */ neprozornost: prosojna;
Zakaj si preprosto ne zaslužimo vida? V IE torej ne deluje to, da elementa ni mogoče klikniti. Zato smo namesto uporabe edinstvenega ozadja element vidnosti nastavili na 0.
Ikona bo iskala visok z-indeks, tako da jo moramo prikazati na vrhu.
Uporabljamo psevdoelement
:prej
če želite dodati ikono za iskanje:
Sb-icon-search ( barva: #fff; ozadje: #e67e22; z-indeks: 90; velikost pisave: 22px; družina pisav: "icomoon"; govor: nič; slog pisave: običajno; teža pisave: običajna različica pisave: običajna; pretvorba besedila: nobena;
Ne pozabite vključiti pisave ikon v naš CSS:
@font-face ( družina pisav: "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"); teža pisave: običajno; slog pisave: običajno; )
S temi slogi, kot smo jasno zapisali, lahko preprosto spremenite širino vsebnika sb-search na 100 % tako, da vnesete razred sb-search-open.
Brez JavaScripta bo iskalno polje skrito:
Sb-search.sb-search-open, .no-js .sb-search ( širina: 100 %; )
Spremenimo barvo ikone za iskanje in jo postavimo za gumb za oddajo obrazca, tako da z-indeks nastavimo na nižjo vrednost:
Končajmo z razredom sb-search-open.
Razredni tod lahko dodate, če kliknete na glavni vsebnik (sb-search) in izberete svoj tod, če kliknete na gumb za oddajo obrazca, sicer v polju ne piše nič.
V nasprotnem primeru bomo samo izpolnili obrazec.
Da ne bi videli razreda, ko kliknete na vnosno polje (ker so naši sprožilci nastavljeni za celoten vsebnik), se morate izogibati puščanju klika na ta element.
To pomeni, da ob kliku na vnosno polje ne bo klika za elemente očeta.
Tudi pri kliku na ikono je treba iskanje izvesti tako, da se fokus premakne na vnosno polje. Tako se pogosto imenuje mobilne naprave
;(funkcija(okno) ( // http://stackoverflow.com/a/11381730/989439 funkcija mobilecheck() ( var check = false; (funkcija(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| serija(4|6)0|povezava|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||1207|6310|6590|3gso|4thp| \-)|ai( ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te| us) | 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 ) |. ez (0 | os |. wa |. gr(ad|un)|haie|hd\-(m|p|t)|hei\-| 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) \ - | na | tf | wf | wg | wt) | removeEventListener("klik", bodyFn);
(iOS), ker se hkrati odpre tudi tipkovnica, se moramo izogibati odpiranju tipkovnice za takšne situacije. Če zapremo iskalno polje, moramo odstraniti fokus. To lahko povzroči težave, če je na nekaterih napravah po zaprtju iskalnega polja še vedno prikazan utripajoč kazalec. Da bo na mobilnih napravah vse potekalo gladko, morate nastaviti ustrezne stične točke. Ob dodanem
;(funkcija(okno) ( // http://stackoverflow.com/a/11381730/989439 funkcija mobilecheck() ( var check = false; (funkcija(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| serija(4|6)0|povezava|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||1207|6310|6590|3gso|4thp| \-)|ai( ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te| us) | 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 ) |. ez (0 | os |. wa |. gr(ad|un)|haie|hd\-(m|p|t)|hei\-| 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) \ - | na | tf | wf | wg | wt) | UISearch = UISearch;
preprečiti privzeto funkcijoі initSearchFn Omogočili bomo opravljanje enournih opravil s tapkanjem in klikanjem na zaslonu mobilnih naprav.
Odločil se bom za brskalnike, ki ne podpirajo< 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); } } } }); })();
addEventListener
removeEventListener
Oglejmo si pregled EventListenerja Jonathana Neala.
- //EventListener | @jon_neal |//github.com/jonathantneal/EventListener !window.addEventListener && window.Element && (funkcija () ( funkcija addToPrototype(ime, metoda) ( Window.prototype = HTMLDocument.prototype = Element.prototype = method; ) var register addToPrototype( "addEventListener", funkcija (vrsta, poslušalec) ( var target = this; registry.unshift(( __listener: function (event) ( event.currentTarget = target; event.pageX = event.clientX + document.documentElement.sroll) dogodek. pageY = event.documentElement.scrollTop; event.preventDefault = function () cancelBubble=true ;; event.relatedTarget = event.fromElement |, type: type ));
- Prva os je zunaj!
- Verjamem, da ste bili deležni te ugodnosti in da ste se iz nje nekaj naučili zase! Poiščite naslove in iskalno tehnologijo, da boste lahko našli šale ali vnesli spletne naslove, da boste izvedeli, kaj iščete na spletnem mestu..
Opera vikoryst Google iskalnik privzeto.
Ker boste lokacijo spletnega mesta našli na strani, vrsto spletnega naslova neposredno v naslovu povezave in iskalni vrstici ter pritisnite Enter, da se pomaknete na to stran.
Za aplikacije, kot je www.opera.com in pritisnite Enter, da odprete domačo stran programske opreme Opera.
Privzeti iskalnik
- Operin privzeti iskalnik je Google, vendar lahko raje poiščete dodatno pomoč z Ecosia, DuckDuckGo, Amazon ali Wikipedia. Če želite spremeniti podrobnejši zvočni instrument:.
- Pojdi do nastavitve Spodaj
Iskalnik
, V osvetljenem meniju izberite želeni iskalnik.
- Iskalniki po meri Poleg privzetih iskalnikov Opera lahko nastavite kombinirane naslove in iskalne vrstice za ponavljanje rezultatov iz drugih iskalnikov.
- Narediti tako:
- Z desno miškino tipko kliknite (Ctrl+klik na Macu) v iskalni vrstici spletnega mesta in izberite Ustvarite iskalnik....
Simbol je ime in ključna beseda.
Kliknite
v redu
- Operin privzeti iskalnik je Google, vendar lahko raje poiščete dodatno pomoč z Ecosia, DuckDuckGo, Amazon ali Wikipedia. Če želite spremeniti podrobnejši zvočni instrument:.
- Pojdi do nastavitve Ustvarite iskalnik po meri Za iskanje v iskalniku po meri najprej vnesite ključno besedo, dodeljeno vašemu motorju, ki ji sledi presledek, nato pa vnesite svojo poizvedbo. Na strani z nastavitvami lahko urejate ključne besede in upravljate ali odstranjujete iskalnike.
Narediti tako:
, kliknite na
Upravljanje iskalnika
gumb.
Iščite z iskalnikom po meri
Za iskalnik po meri Wikoristan v svoje iskanje vnesite ključno besedo, ki ji sledi presledek pred poizvedbo.
Za zapisnik, Bing je beseda na "b". Za iskanje v Bingu, na primer »b Kaj je glavno mesto Idaha«. Rezultati bodo prikazani na strani z rezultati iskanja Bing.
Razdalja med ključno besedo in vašim iskalnikom je pomembna za izbiro iskalnika po meri.
Spremenite pomen iskanja v kontekstnem meniju označenega besedila
Z iskalnim pojavnim orodjem Opera lahko izberete visokokakovostno besedilo na spletni strani in izberete visokokakovostno besedilo kot iskalno poizvedbo.
- Iskalno pojavno orodje vikoryst vaše dodatno iskalno orodje.
- Vendar pa lahko po osvetlitvi besedila za iskanje izvlečete rezultate iz drugega orodja. Za iskanje, vikorista in kontekstni meni, osvetlite besedilo na spletni strani in z desno miškino tipko kliknite (ali CTRL + kliknite) izbiro. V pojavnem oknu premaknite miško nad Iskanje z, kliknite iskalnik, ki ga želite uporabiti. Rezultati iskanja so prikazani v novem zavihku.če uporabljate Mac). .
- Če je valuta, enota ali časovni pas označen, pretvorjena vrednost se prikaže v pojavnem oknu Za iskanje, vikorista in kontekstni meni, osvetlite besedilo na spletni strani in z desno miškino tipko kliknite (ali CTRL + kliknite) izbiro. Izberite
- Če je valuta, enota ali časovni pas označen, pretvorjena vrednost se prikaže v pojavnem oknu Iskanje z za prikaz privzetega iskalnika z označenim besedilom.
- Če želite dodati označeno besedilo v odložišče.
Ko vnesete vrednosti v pojavno okno, pritisnite gumb, da ga premaknete v odložišče.
- Operin privzeti iskalnik je Google, vendar lahko raje poiščete dodatno pomoč z Ecosia, DuckDuckGo, Amazon ali Wikipedia. Če želite spremeniti podrobnejši zvočni instrument:.
- Z desno miškino tipko kliknite (Ctrl+klik na Macu) v iskalni vrstici spletnega mesta in izberite Da bi se naučili uporabljati orodja, vključno z vsemi njihovimi funkcijami: Napredno na levi stranski vrstici in kliknite.
- Pojdi do Lastnosti Pojavno okno za iskanje , ugasni.
Omogoči pojavno okno za iskanje pri izbiri besedila 25. julij 2019
Objava je posodobljena
Poiščite obrazec, ki je objavljen na spletnem mestu
Slog Flat je pridobil veliko popularnost pri oblikovanju spletnih strani.
V tej lekciji si bomo ogledali še en element spletnega mesta, ki je del tega sloga.
Tse element je oblika poshuku.
Ale ni preprost, ampak oblika pošuka, ki se pojavi, ko ga pritisnete in "zagori", ker ne gori.
Če želite iskati ikone, potem vzemite datoteko SVG in jo prilagodite na različne ločljivosti zaslona (tako na mobilnih napravah kot na velikih monitorjih).
Primer najdete tukaj:
| 1 2 3 4 5 6 7 | <privabiti <Poiščite obrazec, ki visi <Yak uporabljati? HTML Najprej ga bom prikazal z oznako, kot bo na strani HTML: <div id = "sb-search" class = "sb-search" > <oblika > <vnosni razred = "sb-search-input" placeholder= <"Kaj je shukatime?" |
type = "text" value = "" name = "search" id = "search" > input class = "sb-search-submit" type = "submit" value = "" >
Medtem lahko za ikono uporabite psevdoelement, le da ni odstopanj na elementih, ki so nadomeščeni z elementi oblike, ali preprosto vikoriziran element.
span class = "sb-icon-search" >
/obrazec> /div> Iskalni obrazec nima nič nenavadnega: besedilno polje za vnos, gumb za iskanje in element za ikone Zdaj pa dodamo sloge, da bo obrazec na strani izgledal odlično.
| Torej, kot se prikaže, ko kliknete, je tam. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | Prizadevajte si za dodatno moč |
preliv
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .sb-search-input: :-webkit-input-placeholder (barva: #efb480;) .sb-search-input:-moz-placeholder (barva: #efb480;) .sb-search-input: :-moz- placeholder (barva: #efb480;) .sb-search-input:-ms-input-placeholder (barva: #efb480;) |
Gumb za iskanje bo zdaj nad drugimi bloki in elementi ob strani, tako da ga lahko nastavite na visoko vrednost z-indeks:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .sb-ikona-iskanje (barva: #fff; ozadje: #e67e22; z-indeks: 90; velikost pisave: 22px; družina pisav: "icomoon"; govor: nič; slog pisave: normalno; teža pisave : normalen - pisava : normalen ; \e000 "; } |
Prav tako ne pozabite vključiti posebnih ikon (SVG).
| 1 2 3 4 5 6 7 8 9 10 | Če želite v gumb za iskanje vstaviti ikono: @font-face ( družina pisav : "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" skript > skript src = "js/uisearch.js" ><skript > |
novo UISearch(document.getElementById("sb-search"));
/script>
Visnovok Lepa oblika iskanja, ki zavzame zelo malo prostora na strani in se prikaže, ko kliknete na ikono z iskanjem.
Iskalno polje za spletno mesto
- eden najpomembnejših elementov uporabniškega vmesnika na spletni strani.
1. Postavitev HTML