Այս ձեռնարկում մենք կստեղծենք բացվող որոնման ձև, որը հիանալի կերպով կտեղավորվի շարժական սարքերի ինտերֆեյսի ձևավորման մեջ: Տարրն իրականացնելու համար կօգտագործվի միայն CSS-ը՝ առանց JavaScript-ի կամ լրացուցիչ նշագրման: Պարզ և արդյունավետ միջոցիրականացնել կոմպակտ որոնման ձև:

Նպատակը

Բջջային սարքերում յուրաքանչյուր պիքսել հաշվվում է: Ձևը ցուցադրելու համար պահանջվող տարածքը նվազագույնի հասցնելու համար այն սկզբում կցուցադրվի կոմպակտ ձևով և կընդլայնվի, երբ ստանա մուտքային ֆոկուս (:focus ): Այս մոտեցումը թույլ է տալիս տարածք խնայել ինտերֆեյսի այլ տարրերի և բովանդակության համար:

HTML նշում

Ձևն օգտագործում է HTML5: Կոդը շատ պարզ է.

Webkit բրաուզերներում որոնման ձևի կանխադրված տեսքի վերականգնում

Լռելյայնորեն, Webkit բրաուզերներում որոնման ձևը կունենա հետևյալ տեսքը.

Որոնման ձևը սովորական տեքստի մուտքագրման դաշտի տեսք տալու համար անհրաժեշտ է ավելացնել հետևյալ ոճերը.

Մուտք ( -webkit-appearance. textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) մուտքագրում::-webkit-search-decoration, մուտքագրում::-webkit- որոնում-չեղարկել-կոճակ (ցուցադրում՝ ոչ մեկը;)

Մեր որոնման ձևի ձևավորումը

Մուտքի դաշտը կունենա 55px նորմալ լայնություն և կընդլայնվի մինչև 130px :focus վիճակում: Անցումային հատկությունն օգտագործվում է անիմացիայի համար, իսկ box-shadow-ը՝ փայլի էֆեկտի համար։

Մուտք (ֆոն՝ #ededed url(img/search-icon.png) առանց կրկնության 9px կենտրոն; եզրագիծ՝ ամուր 1px #cccc; լիցք՝ 9px 10px 9px 32px; լայնությունը՝ 55px; /* Կանխադրված լայնություն */ -webkit- եզրագիծ -շառավիղը: -moz-border-radius: 10em -webkit-transition: -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5) ստվեր */)

Օրինակ Բ

Օրինակ B-ում որոնման ձևը զգալիորեն նվազագույնի է հասցվել. միայն պատկերակը ցուցադրվում է առանց լրացման տեքստի: Նկատի ունեցեք, որ որոնման դաշտի լիցքավորման և լայնության հատկությունները փոխվել են՝ ձևավորելով շրջանաձև կոճակ: Տեքստը անտեսանելի դարձնելու համար օգտագործեք color:transparent հատկությունը:

#demo-b մուտքագրում (լայնությունը՝ 15px; լիցք-ձախ՝ 10px; գույնը՝ թափանցիկ, կուրսորը՝ ցուցիչ; ) #demo-b մուտքագրում:սավառնում (ֆոնի գույնը՝ #fff; ) #demo-b մուտքագրում:կենտրոնացում ( լայնությունը 130px padding-left: 32px ֆոնային գույնը՝ #fff;

Բրաուզերի համատեղելիություն

Նկարագրված մեթոդն աշխատում է բոլոր հիմնական բրաուզերներում՝ Chrome, Firefox, Safari և IE8+: IE7 և ավելի հին բրաուզերներում ֆունկցիոնալությունը չի աշխատում կեղծ դասակարգ:focus և որոնման դաշտի տեսակի աջակցության բացակայության պատճառով:

Ձեռնարկ այն մասին, թե ինչպես ստեղծել բջջայինի համար հարմար և արձագանքող որոնման տող

Այսօր մենք ցանկանում ենք ձեզ ցույց տալ, թե ինչպես ստեղծել էֆեկտ, ինչպիսին է վերևում պատկերվածը: Նպատակը բջջային սարքերի և ավելի հին բրաուզերների հետ համատեղելիության բարելավումն է (IE 8+): Եթե ​​նույնիսկ առաջին հայացքից պարզ բան թվա, ապա կասեմ, որ պետք էր մի քանի հնարքներ կիրառել, որպեսզի ամբողջ մեխանիզմը աշխատի այնպես, ինչպես նախատեսված էր։

Ընդհանուր առմամբ, ինչի ենք ուզում հասնել որոնման տողից.

• սկզբում ցուցադրել միայն որոնման պատկերակով կոճակը
• Երբ կտտացնում եք պատկերակը, ձեզ անհրաժեշտ է որոնման տողը՝ կողք տեղափոխելու համար
• բաղադրիչը պետք է լինի ճկուն, այն իմաստով, որ այն կարող է օգտագործվել արձագանքող ինտերֆեյսի մեջ
• երբ օգտատերը ինչ-որ բան է գրում տողի վրա, անհրաժեշտ է, որ ձևը կարող է ներկայացվել՝ սեղմելով Enter կոճակը կամ սեղմելով որոնման կոճակը:
• եթե դաշտը բաց է, և դրա մեջ տվյալներ չեն մուտքագրվել, և մենք սեղմում ենք որոնման կոճակը, մուտքագրման դաշտը պետք է փակվի
• մեզ նաև անհրաժեշտ է, որ մուտքագրման դաշտը փակվի, եթե սեղմենք որոնման դաշտից դուրս ինչ-որ տեղ, անկախ նրանից՝ այն դատարկ է, թե ոչ։
• եթե JavaScript-ն անջատված է, որոնման դաշտը պետք է ընդլայնված հայտնվի
• սենսորային սարքերի հետ ավելի լավ փոխազդեցության համար անհրաժեշտ է նաև աջակցություն ավելացնել հպումային իրադարձությունների համար

Այժմ մենք որոշել ենք այն ամենը, ինչ մենք պետք է անենք, եկեք սկսենք նշագրումից:

Նշում

Նշման մեջ մենք օգտագործում ենք հիմնական կոնտեյները, ձևը, տեքստային դաշտը և ուղարկել կոճակը, ինչպես նաև պատկերակի համար նախատեսված span տարրը.

Փաստորեն, դուք կարող եք օգտագործել կեղծ տարր պատկերակի համար, բայց քանի որ այն նախատեսված չէ փոխարինելի տարրերի համար, որոնք ձևի տարրեր են, մենք պարզապես օգտագործում ենք տարրը span.

Այժմ, երբ բոլոր տարրերը տեղում են, եկեք ոճավորենք դրանք:

CSS

Ելնելով մեր պահանջներից՝ մենք նախ համոզվելու ենք, որ ունենք կոճակ՝ տեսանելի որոնման պատկերակով: Մնացած ամեն ինչ պետք է թաքցնել: Բայց եկեք նաև մի քայլ առաջ մտածենք և պատկերացնենք, թե ինչ է տեղի ունենում, երբ ընդլայնում ենք որոնման տողը (հիմնական կոնտեյներով): Ինչպե՞ս ենք մենք դա անում: Օգտագործելով գույքը վարարել՝ թաքնված, և sb-search կոնտեյների լայնությունը փոխելը պետք է բացահայտի մուտքագրման դաշտը:

Այսպիսով, առաջին հերթին եկեք ոճավորենք sb-search կոնտեյները: Եկեք ստիպենք այն լողալ աջ կողմում և տալ այն վարարել՝ թաքնված. Նրա սկզբնական լայնությունը կկազմի 60px, բայց քանի որ մենք ցանկանում ենք 100% լայնությամբ շարժել, դա խնդիրներ կառաջացնի բջջային բրաուզերներում (iOS): Նրանք չեն սիրում անցումներ պիքսելների լայնությունից մինչև տոկոսային լայնություն: Այս դեպքում նրանք պարզապես անցում չեն կատարի։ Այսպիսով, փոխարենը եկեք սահմանենք նվազագույն լայնությունը 60px, իսկ լայնությունը 0%:

Մենք նաև կավելացնենք լայնության անցում -webkit-backface-visibility: թաքնված հատկությամբ, որը կազատվի բջջային բրաուզերների (iOS) անցանկալի «պոչերից».

Sb-որոնում ( դիրքը՝ հարաբերական; լուսանցք՝ 10px; լայնություն՝ 0%, min-լայնություն՝ 60px; բարձրություն՝ 60px; float՝ աջ, վարարում՝ թաքնված; -webkit-transition՝ լայնությունը 0.3 վրկ; -moz-անցում լայնությունը 0.3 վրկ. լայնությունը 0.3 վրկ.

Այս ուղղանկյունից դուրս որևէ բան չի ցուցադրվի:

Այժմ եկեք տեղադրենք մուտքագրման դաշտը: Մենք օգտագործում ենք տոկոսային լայնություն, որպեսզի երբ ընդլայնենք մայր տարրը, մուտքագրման դաշտը կընդլայնվի դրա հետ: Ճիշտ բարձրությունը, տառաչափը և լուսանցքները սահմանելը երաշխավորում է, որ տեքստը կենտրոնացած է (տողի բարձրությունը չի աշխատում այնպես, ինչպես սպասվում էր IE8-ում, ուստի դրա փոխարեն մենք օգտագործում ենք լուսանցքներ): Ներածման դաշտի բացարձակ դիրքավորումը պարտադիր չէ, բայց դա լուծում է այն տհաճ խնդիրը, որ երբեմն որոնման դաշտը կարճ ժամանակով փակելիս հայտնվում է կոճակի աջ կողմում։

Sb-որոնում-ներածում (դիրք՝ բացարձակ; վերև՝ 0; աջ՝ 0; եզրագիծ՝ ոչ մեկը; ուրվագիծ՝ ոչ մեկը; ֆոն՝ #fff; լայնություն՝ 100%, բարձրություն՝ 60px; լուսանցք՝ 0; z-ինդեքս՝ 10; padding: 20px 20px font-family: font-size: 20px ) input.sb-search-input ( -webkit-appearance: none; -webkit-border-radius:)p;

Բացի սրանից, մենք հեռացնում ենք դիտարկիչի մուտքագրման դաշտի ստանդարտ ոճերը 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 և այն կդարձնենք թափանցիկ, որպեսզի մենք միշտ կարողանանք տեսնել spanորոնման պատկերակով.

Sb-search-submit ( ֆոն՝ #fff; /* IE-ի համար */ -ms-ֆիլտր՝ "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ զտիչ՝ ալֆա(անթափանցիկություն=0 /* IE 5-7 */ անթափանցիկություն` 0;

Ինչու՞ չդարձնել նրա ֆոնը թափանցիկ: Այո, քանի որ այն չի աշխատում IE-ում, քանի որ տարրը սեղմելի չէ: Այսպիսով, դրա փոխարեն մենք օգտագործում ենք ամուր ֆոն և տարրի անթափանցիկությունը սահմանում ենք 0-ի:

Որոնման պատկերակը սկզբում կունենա բարձր z-ինդեքս, քանի որ մենք ցանկանում ենք, որ այն հայտնվի ամեն ինչի վերևում: Օգտագործելով կեղծ տարր : առաջորոնման պատկերակ ավելացնելու համար՝

Sb-icon-որոնում (գույնը՝ #fff; ֆոն՝ #e67e22; z-ինդեքս՝ 90; տառաչափ՝ 22px; տառատեսակ-ընտանիք՝ "icomoon"; խոսել՝ ոչ մեկը; տառատեսակի ոճը՝ նորմալ; տառատեսակի քաշը՝ նորմալ տառատեսակ. տեքստային փոխակերպում. ոչ մի

Մի մոռացեք ներառել պատկերակի տառատեսակը մեր CSS-ի հենց սկզբում.

@font-face ( տառատեսակ-ընտանիք՝ «icomoon»; src:url(»../fonts/icomoon/icomoon.eot"); src:url("../fonts/icomoon/icomoon.eot?#iefix" ) ձևաչափ ("ներկառուցված-բացտիպ"), url("../fonts/icomoon/icomoon.woff") ձևաչափ("woff"), url("../fonts/icomoon/icomoon.ttf") ձևաչափ(" truetype"), url ("../fonts/icomoon/icomoon.svg#icomoon") ձևաչափ ("svg"); տառատեսակի քաշը՝ նորմալ; տառատեսակի ոճը՝ նորմալ; )

Մեր նոր սահմանած ոճերով մենք պարզապես կարող ենք փոխել 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-index՝ 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) ( ֆունկցիա UISearch(el, ընտրանքներ) ( 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(); ( classie.add(this.el, "sb-search-open"); ), փակել. function() ( classie.remove(this.el, "sb-search-open"); ) ) // ավելացնել գլոբալ անվանատարածք window.UISearch = UISearch ))(պատուհան);

Այնուհետև մենք պետք է իրադարձություններ ավելացնենք, որպեսզի հեռացնենք sb-search-open դասը, եթե սեղմենք մեր որոնման տողից դուրս ինչ-որ տեղ: Որպեսզի դա աշխատի, դուք նաև պետք է հոգ տանեք իրադարձությունների ելնող պատուհանի մասին, երբ սեղմում եք հիմնական կոնտեյների վրա:

;(function(window) ( ֆունկցիա UISearch(el, ընտրանքներ) ( 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.close(); ) ) this.el.addEventListener("click", initSearchFn this.inputEl.addEventListener("click", function(ev) ( ev.stopPropagation(); )) ; ), բացել՝ function() (var self = this; classie.add(this.el, "sb-search-open"); // փակել որոնման դաշտը, եթե ինչ-որ տեղ սեղմել է բեռնարկղից դուրս var bodyFn = ֆունկցիան: ( 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 ֆունկցիա mobilecheck() ( var check = false; (function(a)(if(/(android|ipad|playbook|silk| bb\d+|meego).+շարժական|ավանտգո|բադա\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront |օպերա m(ob|in)i|palm(os)?|հեռախոս|p(ixi|re)\/|plucker|գրպան|psp|սերիա(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 (եր|ոո|ս\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te| մեզ)|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\-|բջիջ|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) | |ibro|գաղափար|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 | |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\-|շար|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| | /i.test(a.substr(0,4)))ստուգել = true))(navigator.userAgent||navigator.vendor||window.opera); UISearch = UISearch; )) (պատուհան);

Որպեսզի այս ամենը սահուն աշխատի շարժական սարքերում, դուք պետք է կարգավորեք համապատասխան հպման իրադարձությունները: Ավելացնելով preventDefaultֆունկցիայի մեջ initSearchFnկկանխի շարժական սարքերի համար էկրանին հպելու և սեղմելու իրադարձությունների միաժամանակյա գործարկումը:

;(function(window) (// http://stackoverflow.com/a/11381730/989439 ֆունկցիա mobilecheck() ( var check = false; (function(a)(if(/(android|ipad|playbook|silk| bb\d+|meego).+շարժական|ավանտգո|բադա\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront |օպերա m(ob|in)i|palm(os)?|հեռախոս|p(ixi|re)\/|plucker|գրպան|psp|սերիա(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 (եր|ոո|ս\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te| մեզ)|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\-|բջիջ|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) | |ibro|գաղափար|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 | |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\-|շար|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| | /i.test(a.substr(0,4)))ստուգել = true))(navigator.userAgent||navigator.vendor||window.opera); UISearch = UISearch; )) (պատուհան);

Եվ վերջապես, բրաուզերների համար, որոնք չեն աջակցում addEventListenerԵվ removeEventListener, մենք կօգտագործենք EventListener-ը Ջոնաթան Նիլից:

//EventListener | @jon_neal | //github.com/jonathantneal/EventListener !window.addEventListener && window.Element && (function () ( ֆունկցիա addToPrototype(անուն, մեթոդ) ( Window.prototype = HTMLDocument.prototype = Element.prototype = մեթոդ; ) var registry = ; addToPrototype("addEventListener", ֆունկցիա (տեսակ, լսող) ( var target = this; registry.unshift(( __listener: ֆունկցիա (իրադարձություն) ( 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() (իրադարձություն. cancelBubble = true); relatedTarget = event.fromElement || addToPrototype("removeEventListener", ֆունկցիա (տեսակ, լսող) ( համար (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); } } } }); })();

Եվ ահա այն! Հուսով եմ, որ ձեզ դուր եկավ այս ուղեցույցը և ինչ-որ օգտակար բան սովորեցիք դրանից:

Կայքի որոնման դաշտվեբ էջի ամենակարևոր ինտերֆեյսի տարրերից մեկն է: Նրա օգնությամբ օգտատերը կարող է գտնել ցանկալի բովանդակությունը ձեր կայքում։

Այս ձեռնարկում դուք կսովորեք, թե ինչպես ստեղծել որոնման դաշտի նշում՝ օգտագործելով HTML5, ինչպես նաև ինչպես ձևավորել ձևի տարրերը՝ օգտագործելով CSS3 հզորությունը՝ առանց սկրիպտների օգտագործման:

1. HTML նշում

Որոնում

Տարր

որոնման ձևի կոնտեյներ է, որոնման դաշտը ստեղծվում է տարրի միջոցով կամ , և սերվերին տվյալներ ուղարկելու կոճակը կարող է ստեղծվել տարրի միջոցով կամ .

Ինչո՞վ է դա տարբերվում: -ից ? Այս երկու դաշտերն էլ ստեղծում են մեկ տողով տեքստային դաշտ տեքստի մուտքագրման համար, սակայն type="search"-ը ավելացվել է HTML5 ստանդարտին և իմաստային հուշում է բրաուզերների համար: Բոլոր բրաուզերները բացառությամբ Mozilla Firefox, դաշտում մաքրող խաչ ավելացրեք։ Այն հեռացնելու համար կարող եք փոխել դաշտի տեսակը type="text":

Ինչո՞վ է դա տարբերվում: -ից

? Առաջին կամ երկրորդ մեթոդով ստեղծված «ներկայացնել» կոճակների գործողության մեջ տարբերություն չկա: Տարբերությունն այն է, որ տարրը կոնտեյներ է, հետևաբար դրա ներսում կարող եք տեղադրել այլ տարրեր, օրինակ՝ պատկերներ կամ պատկերակներ։

Դուք կարող եք տեքստ ավելացնել դաշտերի ձևավորման համար երկու եղանակով.
1)
Ցուցադրվող տեքստի գույնը կլինի մոխրագույն: Օգտագործելով հետևյալ կանոնները՝ կարող եք գործիքի հուշման տեքստը սահմանել ցանկացած գույնի, փոխել դաշտի ոճն ու ֆոնը: Այս սելեկտորները չեն կարող միավորվել մեկ կանոնի մեջ, հակառակ դեպքում դրանք չեն աշխատի:

Մուտքագրում՝:-webkit-input-placeholder (գույնը՝ #B6C0A5; տառատեսակի ոճը՝ շեղ; ֆոնը՝ #E0EFCA; ) մուտքագրում՝-moz-տեղապահ (գույնը՝ #B6C0A5; տառատեսակի ոճը՝ շեղ; ֆոնը՝ #E0EFCA; ) մուտքագրում՝-ms-input-placeholder (գույնը՝ #B6C0A5; տառատեսակի ոճը՝ շեղ; ֆոնը՝ #E0EFCA; )

2)
Ցուցադրվող տեքստի գույնը կլինի սև: Դուք կարող եք ձեր գույնը սահմանել՝ օգտագործելով գույնի հատկությունը, օրինակ՝

Մուտքագրում (գույնը՝ սպիտակ;)

Սրբապատկերներ ցուցադրելու համար մի մոռացեք միանալ:

2. Որոնման դաշտ պատկերակի կոճակով

* (տուփի չափսերը՝ եզրագծի տուփ;) ձևը (դիրքը՝ հարաբերական; լայնությունը՝ 300px; լուսանցք՝ 0 ավտոմատ; ) մուտքագրում (լայնությունը՝ 100%, բարձրությունը՝ 42px; լիցք՝ ձախ՝ 10px; եզրագիծ՝ 2px ամուր #7BA7AB եզրագիծը` 5px, գույնը` #9E9C9C (դիրքը` բացարձակ; վերև` 0; լայնությունը` 42px; եզրագիծը` ոչ մեկը; ֆոնային: 0; կուրսորը՝ սլաքը;

3. Որոնման դաշտ՝ ներսում կոճակով

* (տուփի չափսերը՝ սահման-արկղ;) ձևը ( դիրքը՝ հարաբերական; լայնությունը՝ 300px; լուսանցք՝ 0 ավտոմատ; ) մուտքագրում, կոճակ ( եզրագիծը՝ ոչ մեկը; ուրվագիծը՝ ոչ մեկը; եզրագծի շառավիղը՝ 3px; ) մուտքագրում ( լայնությունը՝ 100% բարձրություն՝ ֆոն՝ #F9F0DA՝ 15px ) կոճակը։ : համարձակ )

4. Հարթ ոճի որոնման դաշտ

* (տուփի չափսերը՝ սահման-արկղ;) ձևը ( դիրքը՝ հարաբերական; լայնությունը՝ 300px; լուսանցք՝ 0 ավտոմատ; ֆոն՝ #A3D0C3; ) մուտքագրում, կոճակ ( եզրագիծ՝ չկա; ուրվագիծ՝ ոչ մեկը; ֆոն՝ թափանցիկ; ) մուտքագրում ( լայնությունը՝ 100%; բարձրությունը՝ 42 պիքսել; լիցք՝ ձախ՝ 15 պիքսել; ) կոճակ ( բարձրությունը՝ 42 պիքսել; լայնությունը՝ 42 պքս; դիրքը՝ բացարձակ; վերև՝ 0; աջ՝ 0; կուրսորը՝ ցուցիչ; ) կոճակ: առաջ ( բովանդակություն: «\f002» տառատեսակը՝ FontAwesome՝ 16px;

5. Որոնման դաշտ հաստ ստորին եզրագծով

* (տուփի չափսերը՝ սահման-արկղ;) ձևը ( դիրքը՝ հարաբերական; լայնությունը՝ 300px; լուսանցք՝ 0 ավտոմատ; ֆոն՝ #F9F0DA; եզրագիծ՝ ներքև՝ 4px կոշտ #be290e; ) մուտքագրում, կոճակ ( եզրագիծ՝ չկա; ուրվագիծ Ոչ մեկը; ֆոնային՝ թափանցիկ; ) մուտքագրում (լայնություն՝ 100%; բարձրություն՝ 42px; ներդիր-ձախ՝ 15px;) կոճակ (բարձրությունը՝ 42px; դիրքը՝ բացարձակ; վերև՝ 0; աջ՝ 0; կուրսորը՝ ցուցիչ; ) կոճակ՝ առաջ (բովանդակություն՝ «\f178», տառատեսակի ընտանիք՝ FontAwesome; տառաչափ՝ 20px; գույն՝ #be290e; )

6. Որոնման դաշտ՝ փոփոխվող եզրագծի գույնով

* (տուփի չափսերը՝ եզրագծի տուփ;) ձևը ( դիրքը՝ հարաբերական; լայնությունը՝ 300px; լուսանցք՝ 0 ավտոմատ; ) մուտքագրում, կոճակ (ուրվագծում՝ ոչ մեկը; ֆոնը՝ թափանցիկ; ) մուտքագրում (լայնությունը՝ 100%, բարձրությունը՝ 42px padding-ձախ՝ 15px; բովանդակություն՝ "\f002";

7. Քաշեք որոնման դաշտը

Որոնման դաշտը հայտնվում է, երբ սեղմում եք պատկերակով կոճակը:

* (տուփի չափսերը՝ եզրագծի տուփ;) ձևը ( դիրքը՝ հարաբերական; լայնությունը՝ 300px; լուսանցք՝ 0 ավտոմատ; բարձրությունը՝ 42px; ) մուտքագրում ( բարձրությունը՝ 42px; լայնությունը՝ 0; լիցք՝ 0 42px 0 15px; եզրագիծ: ոչ մեկը; 2px թափանցիկ ֆոն: 0,8, 0, 1 : ամուր #F9F0DA; կոճակ (ֆոն՝ #683B4D; եզրագիծ՝ ոչ մեկը; բարձրություն՝ 42px; լայնություն՝ 42px; դիրք՝ բացարձակ; վերև՝ 0; աջ՝ 0; կուրսորը՝ ցուցիչ; ) կոճակ՝ առաջ (բովանդակություն՝ "\f002 "; տառատեսակի ընտանիք՝ FontAwesome; տառաչափը՝ 16px; գույնը՝ #F9F0DA;)

8. Ընդլայնելով որոնման դաշտը

* (տուփի չափսերը՝ եզրագծի տուփ;) ձևը (լայնությունը՝ ավտոմատ; լողացող՝ աջ; լուսանցք-աջ՝ 30px; ) մուտքագրում (լայնությունը՝ 250px; բարձրությունը՝ 42px; լիցք՝ ձախ՝ 15px; եզրագծի շառավիղը՝ 42px; եզրագիծ՝ 2px, ուրվագծեր.

Շատերի համար ինտերնետում տեղեկատվության որոնման արդյունավետությունը հենց գայլին կերակրող ոտքերն են: Որտե՞ղ կարող եմ գտնել համապատասխան և արդի տեղեկատվություն: Որտեղ գնել ավելի էժան և վաճառել ավելի թանկ: Որտեղ կարող եմ գտնել առավել ճշգրիտ հրահանգները որոշակի առաջադրանքների կատարման համար: Որտեղ դիտել ֆիլմեր առցանց: Այս և նմանատիպ օգտատերերի հարցերին հնարավորինս ճիշտ պատասխանելու համար որոնիչները տարեցտարի բարելավում են կայքերը ներկայացնելու արդեն բարդ մեխանիզմները. որոնման արդյունքներըօգտատերերի հատուկ պահանջներին համապատասխան: Որոնման համակարգերի նպատակն է մարդկանց տանել հնարավոր լավագույն կայք՝ իրենց հարցերի պատասխանները ստանալու համար:

Բացի որոնողական համակարգերից, որոնողական համակարգերն իրենք հագեցած են որոնման զտիչներով, որպեսզի ցանկացած օգտատեր կարողանա նեղացնել իր տեղեկատվության որոնման շրջանակը կամ նշել իր խնդրանքը:

Ստորև կանդրադառնանք որոնման մի քանի ընդլայնումների, որոնք կարող են ավելացվել հանրաճանաչ բրաուզերներին և, որպես արդյունք, բարձրացնել ինտերնետում տեղեկատվության որոնման արդյունավետությունը:

Որոնեք ընդլայնումներ Google Chrome-ի համար

Որոնել ընթացիկ կայքը

Ամեն մի կայք չունի ներքին որոնողական համակարգ, և նման ռեսուրսների վրա պետք է երկար ժամանակ ծախսել բաժինից բաժին վազելով կոնկրետ տեղեկատվություն փնտրելու համար։ Կայքում որոնելու համար զննարկիչում ինտեգրված ընդլայնումը ունիվերսալ գործիք է, որը միշտ ձեռքի տակ կլինի, անկախ նրանից, թե որ կայքում եք հայտնվում: Այն ամենը, ինչ դուք պետք է անեք կայքի ներսում անհրաժեշտ տեղեկատվությունը գտնելու համար, մուտքագրեք հիմնական հարցումը փոքրիկ որոնման դաշտում, որը հայտնվում է դիտարկիչի վահանակի ընդլայնման կոճակը սեղմելիս:

Որոնման համակարգի որոնման արդյունքները կբացվեն դիտարկիչի նոր ներդիրում, և կընտրվեն կոնկրետ կայքի էջերը, որտեղ հայտնվում է հիմնաբառը:

Ներկայիս կայքի որոնումն իրականացվում է նախապես տեղադրված Google որոնողական համակարգով, սակայն ընդլայնման պարամետրերում կարող եք տեղադրել մեկ այլ որոնողական համակարգ՝ Yandex, Yahoo կամ Bing: Դա անելու համար զանգահարեք համատեքստի ընտրացանկը ընդլայնման կոճակի վրա և ընտրեք «Ընտրանքներ» հրամանը:

Ընդլայնման ընտրանքները կբացվեն դիտարկիչի նոր ներդիրում, որտեղ մենք կարող ենք ընտրել այլ որոնման համակարգ: Եվ նա արդեն կփնտրի կայքում:

Այլընտրանքային որոնում Google

Yandex որոնողական համակարգը սկզբում հնարավորություն է տալիս տեղեկատվություն փնտրել երկու այլ որոնման համակարգերում՝ Google-ում և Bing-ում, մեկ սեղմումով, թեև մուտքագրված հիմնական հարցման հետ միասին այս որոնման համակարգերին գնալու հղումները խցկված են որոնման արդյունքների ամենաներքևում: էջ.

Բայց Google-ն այս հարցում ավելի եսասեր է. իր որոնման արդյունքներում մրցակից որոնիչների մասին խոսք չկա։ Դուք կարող եք շտկել այս իրավիճակը՝ ներմուծելով «Այլընտրանքային Google որոնում» ընդլայնումը Google Chrome-ում:

քան անընդհատ ներկայացնելով ամեն անգամ ի լրումն հիմնաբառ«torrent», torrent trackers-ից որոնման արդյունքներ ստանալու համար ավելի հեշտ է տեղադրել հատուկ ընդլայնում այս նպատակով՝ TMS (Torrents MultiSearch):

Ընդլայնման կոճակը զետեղված է բրաուզերի գործիքագոտում, և սեղմելուց հետո փոքրիկ որոնման դաշտ կբացվի ձեզ համար՝ հարցում մուտքագրելու համար:

Որոնման արդյունքները հայտնվում են առանձին ներդիրում, և դա կլինի միայն Runet torrent trackers-ի բովանդակությունը, այլ ոչ թե Vareznik կայքերում, ծրագրային ապահովման և մեդիա պորտալներում կամ պաշտոնական կայքերում:

Հեղեղի հետքերով որոնման արդյունքներում հայտնաբերված բովանդակությունը կարող է զտվել ըստ ֆայլի չափի կամ դրա վերբեռնման ամսաթվի: Որոնումը նեղացնելու համար կարող եք լրացուցիչ հիմնաբառեր նշել:

Որոնման արդյունքները կարող են դիտվել նաև առանձին հեղեղատարների համար և առանձին բովանդակության տեսակների համար, ինչպիսիք են ֆիլմերը, երաժշտությունը և ծրագրերը:

Բացի այդ, TMS ընդլայնումը զետեղված է բրաուզերի համատեքստային մենյուում, որպեսզի կարողանաք ուղարկել ինտերնետի էջերում ընդգծված ցանկացած բառ կամ արտահայտություն դեպի torrent trackers-ի որոնում՝ առանց պատճենելու և տեղադրելու անհարկի աղմուկի:

Համատեքստային որոնում

Google Chrome-ը ներդրել է համատեքստային որոնման գործառույթ՝ օգտագործելով բրաուզերում լռելյայն տեղադրված մեկ որոնիչ: «Համատեքստային որոնում» ընդլայնումը նախատեսված է մեծացնելու որոնման համակարգերի թիվը, որոնցով դուք կարող եք որոնել ցանկացած ընտրված բառ վեբկայքի էջերում:

Ընդլայնումը սկզբնապես ներառում է RuTracker-ի, Wikipedia-ի և Kinopoisk.Ru մեդիա պորտալի վրա որոնելու հնարավորություն:

Ընդլայնման պարամետրերում ավելացվում են այլ որոնման համակարգեր, որոնց միջոցով դուք կարող եք տեղեկատվություն որոնել անմիջապես բրաուզերի համատեքստի ընտրացանկից: Բացեք Google Chrome-ի ընտրացանկը, ընտրեք «Կարգավորումներ» և անցեք բրաուզերում տեղադրված ընդլայնումների բաժին:

Ընդլայնումների ցանկում ընտրեք մեզ անհրաժեշտը՝ «Համատեքստային որոնում»: Կտտացրեք «Ընտրանքներ» հղմանը:

Որոնեք ընդլայնումներ Օպերայի համար

Որոնել կայքի ներսում

Ընդլայնման կոճակը գտնվում է բրաուզերի գործիքագոտում, և սեղմելով դրա վրա՝ կարող եք բացել որոնման դաշտ՝ հիմնական հարցում մուտքագրելու համար, ինչպես նաև փոխել որոնման համակարգը:

Ընդլայնման կարգավորումներում նախապես տեղադրված Yandex-ը և Google-ը կարող են համալրվել այլ որոնման համակարգերով: Զանգահարեք համատեքստի ընտրացանկը ընդլայնման կոճակի վրա և ընտրեք «Կարգավորումներ» հրամանը:

Նույն կերպ, ինչպես Google Chrome-ի «Համատեքստային որոնում» ընդլայնման դեպքում՝ ավելացնել նորը որոնման համակարգդուք պետք է մուտքագրեք դրա URL տողը:

Torrents MultiSearch

Նմանատիպ պատկերների որոնում

Նմանատիպ պատկերների որոնումը լրացուցիչ հրաման է ավելացնում Opera բրաուզերի համատեքստային մենյուում՝ մի քանի որոնման համակարգերի միջոցով նմանատիպ պատկերներ որոնելու համար:

Կամ կներկայացվի նմանատիպ նկարներով հրապարակումների ցանկ։

Որոնել ընդլայնումներ Mozilla Firefox-ի համար

Որոնել կայքը

Ինչպես նախորդ երկու դեպքերում, Mozilla Firefox բրաուզերի համար նույնպես գոյություն ունի ինտերնետի ցանկացած կայքի ներսում որոնման հատուկ ընդլայնում:

Միայն Fire Fox-ի դեպքում կայքի որոնումը ներկառուցված է բրաուզերի առկա որոնման դաշտում՝ սովորական որոնման պատկերակից առաջ ավելացնելով իր սեփական պատկերակը կարմիր խոշորացույցի տեսքով:

Mozilla Firefox-ի կանոնավոր որոնման համար կանխադրված որոնման համակարգը փոխելը ենթադրում է կայքերում որոնումների որոնման համակարգի փոփոխություն:

«Կայքի որոնում» ընդլայնումը ինտեգրված է Mozilla Firefox-ի համատեքստային մենյուում, և նշելով ձեռքի տակ եղած ցանկացած բառ, դուք կարող եք տեսնել կայքի բոլոր էջերը, որտեղ առկա է այս բառը առանձին որոնման արդյունքներում:

Որոնել ըստ byffox-ի

Ցանկացած ծրագրային արտադրանքՆման «դեռևս չհասունացած» անուններով, որպես կանոն, նյարդայնացնում են շատ օգտատերերի, քանի որ նրանք նույնիսկ չեն ակնարկում առաջարկվող գործիքների նպատակային նպատակը:

Իսկ թե կոնկրետ ինչ է առաջարկում «Սոֆտինան Վասյայից» կամ «Ռեպակ Իգրուլին Պետյայից»՝ պետք է պարզել միայն նկարագրությունը մանրամասն կարդալուց հետո։ Այնուամենայնիվ, այնպիսի անլուրջ անվան հետևում, ինչպիսին է «Search by byffox»-ը, թաքնված է օգտակար և խելամիտ ֆունկցիոնալություն: Այս ընդլայնումը թույլ է տալիս լրացնել զննարկչի համատեքստի ընտրացանկը լրացուցիչ հրամանով՝ ընտրված բառը փնտրելու համար՝ օգտագործելով տարբեր որոնման համակարգեր:

25 հոկտեմբերի, 2019թ Գրառումը թարմացվել է

Կայքում որոնման ձևաթուղթ

Flat ոճը զգալի ժողովրդականություն է ձեռք բերել վեբ կայքի ձևավորման մեջ: Եվ այս դասում մենք կանդրադառնանք կայքի մեկ այլ տարրի, որը պատրաստված է այս ոճով։ Այս տարրը որոնման ձև է: Բայց ոչ թե պարզ, այլ որոնման ձև, որը հայտնվում է սեղմելիս և «փլվում», եթե այն չի օգտագործվում: Ինչ վերաբերում է որոնման պատկերակին, այն վերցված է SVG ֆայլից և ընդլայնելի է էկրանի տարբեր լուծումներով (ինչպես շարժական սարքերի, այնպես էլ մեծ մոնիտորների վրա):

Օրինակ կարելի է տեսնել այստեղ.

Բեռնել

Ձգվող որոնման ձև

Ինչպե՞ս օգտագործել:

HTML

Նախ, եկեք որոշենք նշագրումը, որը կլինի HTML էջում.

1 2 3 4 5 6 7

<div id = "sb-search" class = "sb-search" > <ձև > <input class = "sb-search-input" placeholder= «Ի՞նչ են փնտրելու։ type = "text" value = "" name = "որոնում" id = "որոնում" > <input class = "sb-search-submit" type = "submit" value = "" > <span class = «sb-icon-search» > </ձևը> </div>

Որոնման ձևում ոչ մի արտասովոր բան չկա՝ մուտքագրման տեքստային դաշտ, որոնման կոճակ և տարր պատկերակի համար:

CSS

Այժմ եկեք ոճեր ավելացնենք, որպեսզի որոնման ձևը գեղեցիկ տեսք ունենա էջում:

Քանի որ այն կհայտնվի սեղմելիս, այն սկզբում թաքնված է: Դա արվում է՝ օգտագործելով սեփականությունը վարարելև դրա նշանակությունը թաքնված, որի արդյունքում թաքցվում է այն ամենը, ինչ պատկերակից դուրս է (վերջում տեսնում ենք միայն պատկերակը, բայց ոչ տեքստային դաշտը).

.sb-որոնում (դիրք՝ հարաբերական; լուսանցք՝ վերև՝ 10 px; լայնություն՝ 0%; min-լայնություն՝ 60 px; բարձրություն՝ 60 px; float: աջ; արտահոսք: թաքնված; -webkit-անցում: լայնություն 0.3 վրկ; -moz- անցում. լայնություն 0.3 վրկ. լայնություն 0.3 վրկ.

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

.sb-search-input (դիրք՝ բացարձակ; վերև՝ 0; աջ՝ 0; եզրագիծ՝ ոչ մեկը; ուրվագիծ՝ ոչ մեկը; ֆոն՝ #fff; լայնություն՝ 100%; բարձրություն՝ 60px; լուսանցք՝ 0; z-ինդեքս՝ 10 20px 65px 20px font-size : #2c3e50 ; ;

Մենք որոշում ենք տեքստի գույնը, որը գտնվում է հարցումի ֆոնին (տեքստը, որը մենք մուտքագրում ենք որոնելիս).

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

.sb-search-input :-webkit-input-placeholder (գույնը` #efb480 ;) .sb-search-input :-moz-placeholder (գույնը` #efb480;) .sb-search-input: տեղապահ (գույն՝ #efb480;) .sb-search-input :-ms-input-placeholder (գույն՝ #efb480;)

Որոնման կոճակը միշտ գտնվում է էջի մյուս բլոկների և տարրերի վերևում, ուստի մենք տալիս ենք այն մեծ արժեք z-ինդեքս:

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

.sb-icon-search (գույնը՝ #fff; ֆոն՝ #e67e22; z-ինդեքս՝ 90; տառաչափ՝ 22px; տառատեսակ՝ ընտանիք՝ "icomoon"; խոսել՝ ոչ մեկը; տառատեսակի ոճ՝ նորմալ; տառատեսակի քաշ font-variant: normal text-transform: none -webkit-font-smoothing: antialiased \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() ձևաչափ ("ներկառուցված-բացտիպ") , url ( «../fonts/icomoon/icomoon.woff») ձևաչափ ("woff") , url ( «../fonts/icomoon/icomoon.ttf») ձևաչափ ("truetype" script ><script src = "js/uisearch.js" > <սցենար >նոր UISearch (document.getElementById ("sb-որոնում"));</script>

Եզրակացություն

Գեղեցիկ որոնման ձև, որը շատ քիչ տեղ է զբաղեցնում կայքում և գեղեցիկ տեսք ունի, երբ սեղմում եք որոնման պատկերակը: