نحوه نوشتن رشته جستجو در html فیلد جستجوی کشویی فیلد جستجوی مسطح

در این آموزش، ما یک فرم جستجوی کشویی ایجاد می کنیم که کاملاً در طراحی رابط برای دستگاه های تلفن همراه قرار می گیرد. فقط از CSS برای پیاده سازی عنصر استفاده می شود - بدون جاوا اسکریپت یا نشانه گذاری اضافی. ساده و راه موثربرای پیاده سازی یک فرم جستجوی فشرده

هدف

در دستگاه های تلفن همراه، هر پیکسل شمارش می شود. برای به حداقل رساندن فضای مورد نیاز برای نمایش فرم، در ابتدا به صورت فشرده نشان داده می شود و با دریافت فوکوس ورودی (:focus ) گسترش می یابد. این رویکرد به شما امکان می دهد فضا را برای سایر عناصر رابط و محتوا ذخیره کنید.

نشانه گذاری HTML

فرم از HTML5 استفاده می کند. کد بسیار ساده است:

بازنشانی نمای فرم جستجوی پیش فرض در مرورگرهای Webkit

به طور پیش فرض، در مرورگرهای Webkit فرم جستجو به این صورت خواهد بود:

برای اینکه فرم جستجو مانند یک فیلد ورودی متن معمولی به نظر برسد، باید سبک های زیر را اضافه کنید:

ورودی ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) ورودی::-webkit-search-decoration، ورودی::-webkit- دکمه جستجو-لغو (نمایش: هیچکدام؛ )

تشکیل فرم جستجوی ما

فیلد ورودی دارای عرض نرمال 55 پیکسل خواهد بود و در حالت فوکوس تا 130 پیکسل گسترش می یابد. ویژگی transition برای انیمیشن و box-shadow برای افکت درخشش استفاده می شود.

ورودی ( پس‌زمینه: url #ededed (img/search-icon.png) بدون تکرار 9 پیکسل در مرکز؛ حاشیه: یک پیکسل ثابت #cccc؛ بالشتک: 9 پیکسل 10 پیکسل 32 پیکسل؛ عرض: 55 پیکسل؛ /* عرض پیش‌فرض */ -webkit- حاشیه -radius: -moz-border-radius: -webkit-transition: all.5s عرض: 130px; -webkit-box-shadow: 0 0 5px rgba(109207246.5 shadow: 0 0 5px rgba(109207246.5: 0 5px rgba(109207.2); */)

مثال B

در مثال B، فرم جستجو به طور قابل توجهی به حداقل رسیده است - فقط نماد بدون هیچ متن پرکننده نمایش داده می شود. توجه داشته باشید که ویژگی های padding و width برای فیلد جستجو تغییر کرده و یک دکمه دایره ای شکل گرفته است. برای نامرئی کردن متن، از ویژگی color:transparent استفاده کنید.

ورودی #demo-b ( عرض: 15 پیکسل؛ بالشتک-چپ: 10 پیکسل؛ رنگ: شفاف؛ مکان نما: نشانگر؛ ) ورودی #demo-b: شناور (رنگ پس زمینه: #fff؛ ) #دمو-b ورودی: فوکوس ( عرض : 130px padding-left: 32px background-color: #fff;

سازگاری مرورگر

روش توصیف شده در همه مرورگرهای اصلی کار می کند: کروم، فایرفاکس، سافاری و IE8+. در مرورگرهای IE7 و قدیمی تر، به دلیل عدم پشتیبانی از شبه کلاس: فوکوس و نوع فیلد جستجو، عملکرد کار نمی کند.

آموزش ساخت نوار جستجوی سازگار و پاسخگو برای موبایل

امروز می خواهیم به شما نشان دهیم که چگونه یک افکت مانند تصویر بالا ایجاد کنید. هدف بهبود سازگاری با دستگاه های تلفن همراه و مرورگرهای قدیمی تر (IE 8+) است. حتی اگر در نگاه اول یک چیز ساده به نظر می رسد، من می گویم که ما مجبور شدیم از چندین ترفند استفاده کنیم تا کل مکانیسم همانطور که در نظر گرفته شده است کار کند.

به طور کلی، آنچه می خواهیم از نوار جستجو به دست آوریم:

در ابتدا فقط دکمه با نماد جستجو نمایش داده می شود
هنگامی که روی نماد کلیک می کنید، باید نوار جستجو را به کناری منتقل کنید
کامپوننت باید انعطاف پذیر باشد، به این معنا که بتوان از آن در یک رابط پاسخگو استفاده کرد
هنگامی که کاربر چیزی را در یک خط تایپ می کند، لازم است که فرم را با فشار دادن دکمه Enter یا کلیک بر روی دکمه جستجو ارسال کنید.
اگر فیلد باز باشد و هیچ داده ای در آن وارد نشده باشد و دکمه جستجو را فشار دهیم، فیلد ورودی باید بسته شود.
اگر جایی خارج از فیلد جستجو کلیک کنیم، بدون توجه به خالی بودن یا نبودن آن، باید فیلد ورودی بسته شود.
اگر جاوا اسکریپت غیرفعال باشد، قسمت جستجو باید باز شده ظاهر شود
برای تعامل بهتر با دستگاه های لمسی، همچنین باید پشتیبانی از رویدادهای لمسی را اضافه کنید

اکنون ما در مورد هر کاری که باید انجام دهیم تصمیم گرفته ایم، بیایید با نشانه گذاری شروع کنیم.

علامت گذاری

در نشانه گذاری از ظرف اصلی، یک فرم، یک فیلد متنی و یک دکمه ارسال و همچنین یک عنصر span برای نماد استفاده می کنیم:

در واقع، شما می توانید از یک شبه عنصر برای یک نماد استفاده کنید، اما از آنجایی که برای عناصر قابل تعویض، که عناصر فرم هستند، طراحی نشده است، ما به سادگی از عنصر استفاده می کنیم. دهانه.

اکنون که همه عناصر در جای خود قرار دارند، اجازه دهید آنها را سبک کنیم.

CSS

بر اساس نیازهایمان، ابتدا مطمئن می شویم که دکمه ای با نماد جستجوی قابل مشاهده داریم. هر چیز دیگری باید پنهان شود. اما بیایید یک قدم بیشتر فکر کنیم و تصور کنیم وقتی نوار جستجو را گسترش می‌دهیم (با ظرف اصلی) چه اتفاقی می‌افتد. چگونه این کار را انجام دهیم؟ با استفاده از ملک سرریز: پنهانو تغییر عرض ظرف sb-search باید فیلد ورودی را نشان دهد.

بنابراین اول از همه اجازه دهید کانتینر sb-search را استایل کنیم. اجازه دهید آن را شناور در سمت راست، و آن را سرریز: پنهان. عرض اصلی آن 60 پیکسل خواهد بود، اما از آنجایی که می خواهیم به عرض 100٪ متحرک سازی کنیم، این باعث ایجاد مشکلاتی در مرورگرهای تلفن همراه (iOS) می شود. آنها انتقال از عرض پیکسل به عرض درصد را دوست ندارند. در این مورد، آنها به سادگی انتقال را انجام نخواهند داد. بنابراین در عوض اجازه دهید حداقل عرض را روی 60 پیکسل و عرض را روی 0 درصد قرار دهیم.

ما همچنین یک انتقال برای عرض با ویژگی -webkit-backface-visibility: hidden اضافه می کنیم که از شر "دم" ناخواسته در مرورگرهای تلفن همراه (iOS) خلاص می شود:

Sb-search ( موقعیت: نسبی؛ حاشیه بالا: 10 پیکسل؛ عرض: 0 درصد؛ حداقل عرض: 60 پیکسل؛ ارتفاع: 60 پیکسل؛ شناور: سمت راست؛ سرریز: پنهان؛ -webkit-transition: عرض 0.3 ثانیه؛ -moz-transition : عرض 0.3 ثانیه؛ عرض: 0.3 ثانیه

هر چیزی خارج از این مستطیل نمایش داده نمی شود.

حالا بیایید فیلد ورودی را در موقعیت قرار دهیم. ما از عرض درصد استفاده می کنیم تا وقتی عنصر والد را گسترش می دهیم، فیلد ورودی با آن گسترش می یابد. تنظیم ارتفاع، اندازه فونت و حاشیه صحیح تضمین می کند که متن در مرکز قرار می گیرد (ارتفاع خط آنطور که در IE8 انتظار می رود کار نمی کند، بنابراین به جای آن از حاشیه استفاده می کنیم). تعیین موقعیت مطلق فیلد ورودی ضروری نیست، اما این مشکل آزاردهنده را حل می کند که گاهی اوقات هنگام بستن فیلد جستجو برای مدت کوتاهی در سمت راست دکمه ظاهر می شود.

Sb-search-input ( موقعیت: مطلق؛ بالا: 0؛ سمت راست: 0؛ حاشیه: هیچ؛ طرح کلی: هیچ؛ پس‌زمینه: #fff؛ عرض: 100%؛ ارتفاع: 60 پیکسل؛ حاشیه: 0؛ شاخص z: 10؛ padding: 20px 20px font-family: font-size: 20px ) input.sb-search-input ( -webkit-appearance: none; -webkit-border-radius: 0;

علاوه بر این، ما سبک‌های فیلد ورودی مرورگر استاندارد را برای موتور WebKit حذف می‌کنیم.

بیایید رنگ های متن را با استفاده از ویژگی های خاص مرورگر تنظیم کنیم:

Sb-search-input::-webkit-input-placeholder ( color: #efb480; ) .sb-search-input:-moz-placeholder ( color: #efb480; ) .sb-search-input::-moz-placeholder (رنگ: #efb480; ) .sb-search-input:-ms-input-placeholder (رنگ: #efb480; )

حالا بیایید مراقب نماد جستجو در دکمه ارسال فرم باشیم. ما می خواهیم آنها را در یک مکان قرار دهیم، یکی زیر دیگری، بنابراین آنها را نسبت به گوشه سمت راست قرار می دهیم و ابعاد یکسانی به آنها می دهیم. از آنجایی که آنها باید یکی روی دیگری قرار گیرند، ما آنها را کاملاً قرار می دهیم:

Sb-icon-search، .sb-search-submit (عرض: 60 پیکسل؛ ارتفاع: 60 پیکسل؛ نمایش: بلوک؛ موقعیت: مطلق؛ راست: 0؛ بالا: 0؛ بالشتک: 0؛ حاشیه: 0؛ ارتفاع خط: 60 پیکسل text-align: center;

در موقعیت اولیه می خواهیم آیکون جستجو قابل کلیک باشد و زمانی که فیلد جستجو را باز می کنیم دکمه ارسال فرم قابل کلیک باشد. بنابراین ابتدا دکمه ارسال فرم را روی z-index=-1 تنظیم می کنیم و آن را شفاف می کنیم تا همیشه بتوانیم ببینیم دهانهبا نماد جستجو:

Sb-search-submit ( پس زمینه: #fff; /* برای اینترنت اکسپلورر */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"؛ /* IE 8 */ فیلتر: alpha(opacity=0 /* IE 5-7 */ opacity: 0;

چرا پس زمینه او را شفاف نکنید؟ بله، زیرا در IE کار نمی کند، زیرا عنصر قابل کلیک نیست. بنابراین به جای آن از یک پس‌زمینه جامد استفاده می‌کنیم و Opacity عنصر را روی 0 قرار می‌دهیم.

نماد جستجو در ابتدا دارای z-index بالایی خواهد بود زیرا ما می خواهیم در بالای همه چیز ظاهر شود. استفاده از عنصر شبه :قبل ازبرای افزودن نماد جستجو:

Sb-icon-search ( رنگ: #fff؛ پس‌زمینه: #e67e22؛ z-index: 90؛ اندازه قلم: 22 پیکسل؛ خانواده فونت: "icomoon"؛ صحبت کردن: هیچ؛ سبک قلم: عادی؛ وزن فونت: normal;

فراموش نکنید که فونت نماد را در همان ابتدای CSS اضافه کنید:

@font-face ( font-family: "icomoon"; src:url("../fonts/icomoon/icomoon.eot"); src:url("../fonts/icomoon/icomoon.eot?#iefix" ) format("embedded-opentype"), url("../fonts/icomoon/icomoon.woff") format("woff"), url("../fonts/icomoon/icomoon.ttf") قالب(" truetype")، url ("../fonts/icomoon/icomoon.svg#icomoon") قالب ("svg")؛ وزن قلم: معمولی؛ سبک فونت: عادی؛ )

با استایل هایی که به تازگی تعریف کردیم، می توانیم به سادگی عرض کانتینر sb-search را با اختصاص کلاس sb-search-open به 100% تغییر دهیم. بدون جاوا اسکریپت، فیلد جستجو به طور پیش فرض باز می شود:

Sb-search.sb-search-open, .no-js .sb-search (عرض: 100%؛ )

بیایید رنگ نماد جستجو را تغییر دهیم و آن را در پشت دکمه ارسال فرم قرار دهیم و z-index را روی مقدار کمتری تنظیم کنیم:

Sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search ( پس زمینه: #da6d0d؛ رنگ: #fff؛ z-index: 11; )

در نهایت، اجازه دهید به دکمه ارسال فرم یک z-index بالاتری بدهیم تا بتوانیم روی آن کلیک کنیم:

Sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit ( z-index: 90; )

بنابراین، تمام سبک ها شرح داده شده اند، اجازه دهید با جاوا اسکریپت شروع کنیم.

جاوا اسکریپت

بیایید با تغییر کلاس sb-search-open شروع کنیم. زمانی که روی کانتینر اصلی (sb-search) کلیک شود، کلاس را اضافه می کنیم و با کلیک روی دکمه ارسال فرم، آن را حذف می کنیم، اما فقط در صورتی که چیزی در فیلد نوشته نشده باشد. در غیر این صورت فقط فرم را ارسال می کنیم. برای اینکه وقتی روی فیلد ورودی کلیک می‌کنید کلاس حذف نشود (از آنجایی که تریگرهای ما برای کل کانتینر تنظیم شده‌اند)، باید از حباب زدن رویداد کلیک روی این عنصر جلوگیری کنیم. به این معنی که وقتی روی فیلد ورودی کلیک می‌کنید، رویداد کلیک برای عناصر والد فعال نمی‌شود.

در مرحله بعد باید رویدادها را اضافه کنیم تا اگر در جایی خارج از نوار جستجو کلیک کنیم، کلاس 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")) (/ / open ev.preventDefault(); )) ( // close 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 = تابع ( ev) (self.close(); this.removeEventListener("click", bodyFn); document.addEventListener("click", bodyFn close: function() ( classie.remove(this.el, "sb -search-open"); ) ) // آن را به پنجره فضای نام جهانی اضافه کنید.UISearch = UISearch; ))(پنجره);

یکی دیگر از مواردی که باید به آن توجه شود، حذف کاراکترهای فضای خالی اضافی از ابتدا و انتهای خط است.

همچنین، وقتی روی نماد جستجو کلیک می‌کنید، باید مطمئن شوید که فوکوس به قسمت ورودی منتقل می‌شود. از آنجایی که این باعث رندر ناگهانی در دستگاه های تلفن همراه (iOS) می شود، از آنجایی که صفحه کلید نیز همزمان باز می شود، باید به نحوی از باز شدن صفحه کلید برای چنین مواردی جلوگیری کنیم. وقتی فیلد جستجو را می بندیم، باید فوکوس را از آن حذف کنیم. با این کار مشکلاتی که برخی از دستگاه‌ها پس از بستن فیلد جستجو همچنان نشانگر چشمک زن را نشان می‌دهند حل می‌کند.

برای اینکه همه اینها به راحتی در دستگاه های تلفن همراه کار کنند، باید رویدادهای لمسی مناسب را تنظیم کنید. با اضافه کردن جلوگیری از پیش فرضبه یک تابع initSearchFnاز فعال شدن همزمان رویدادهای ضربه و کلیک روی صفحه برای دستگاه های تلفن همراه جلوگیری می کند.

و در نهایت، برای مرورگرهایی که پشتیبانی نمی کنند addEventListenerو removeEventListener، ما از EventListener از جاناتان نیل استفاده خواهیم کرد.

//EventListener | @jon_neal | //github.com/jonathantneal/EventListener !window.addEventListener && window.Element && (تابع () ( تابع 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

عنصر

محفظه ای برای فرم جستجو است، فیلد جستجو با استفاده از عنصر ایجاد می شود یا و دکمه ای برای ارسال داده ها به سرور را می توان با استفاده از عنصر ایجاد کرد یا

* (اندازه جعبه: حاشیه-جعبه؛) فرم (موقعیت: نسبی؛ عرض: 300 پیکسل؛ حاشیه: 0 خودکار؛ ) ورودی (عرض: 100٪؛ ارتفاع: 42 پیکسل؛ بالشتک-چپ: 10 پیکسل؛ حاشیه: 2 پیکسل جامد #7BA7AB حاشیه: 5px: رنگ: #9E9C9C; 0; نشانگر;

3. فیلد جستجو با یک دکمه در داخل

* (اندازه جعبه: جعبه حاشیه؛) فرم ( موقعیت: نسبی؛ عرض: 300 پیکسل؛ حاشیه: 0 خودکار؛ ) ورودی، دکمه (حاشیه: هیچ، طرح کلی: هیچ، شعاع حاشیه: 3 پیکسل؛ ) ورودی (عرض: 100% ارتفاع: 42px؛ #F9F0DA: 15px؛ : پررنگ )

4. فیلد جستجوی سبک مسطح

* (اندازه جعبه: جعبه حاشیه؛) فرم (موقعیت: نسبی؛ عرض: 300 پیکسل؛ حاشیه: 0 خودکار؛ پس‌زمینه: #A3D0C3؛ ) ورودی، دکمه (حاشیه: هیچ؛ طرح کلی: هیچ؛ پس‌زمینه: شفاف؛ ) ورودی (عرض: 100٪؛ ارتفاع: 42 پیکسل؛ بالشتک چپ: 15 پیکسل؛ ) دکمه ( ارتفاع: 42 پیکسل؛ عرض: 42 پیکسل؛ موقعیت: مطلق؛ بالا: 0؛ سمت راست: 0؛ مکان نما: اشاره گر؛ ) دکمه: قبل از ( محتوا: "\f002" font-family: FontAwesome: 16px;

5. فیلد جستجو با حاشیه پایین ضخیم

* (اندازه جعبه: حاشیه-جعبه؛) فرم ( موقعیت: نسبی؛ عرض: 300 پیکسل؛ حاشیه: 0 خودکار؛ پس‌زمینه: #F9F0DA؛ حاشیه پایین: 4 پیکسل جامد #be290e؛ ) ورودی، دکمه (حاشیه: هیچ، طرح کلی : هیچکدام؛ پس زمینه: شفاف؛ ورودی (عرض: 100%؛ ارتفاع: 42 پیکسل؛ بالشتک چپ: 15 پیکسل؛ ) دکمه (ارتفاع: 42 پیکسل؛ موقعیت: مطلق؛ بالا: 0؛ سمت راست: 0؛ مکان نما: نشانگر؛ دکمه: قبل (محتوا: "\f178"؛ فونت-خانواده: FontAwesome؛ اندازه فونت: 20 پیکسل؛ رنگ: #be290; )

6. فیلد جستجو با تغییر رنگ حاشیه

* (اندازه جعبه: جعبه حاشیه؛) فرم (موقعیت: نسبی؛ عرض: 300 پیکسل؛ حاشیه: 0 خودکار؛ ) ورودی، دکمه (طرح کلی: هیچکدام؛ پس زمینه: شفاف؛ ) ورودی (عرض: 100٪؛ ارتفاع: 42 پیکسل padding-left: 15px; محتوا: "\f002" font-family: FontAwesome: رنگ:

7. فیلد جستجوی بیرون بکش

وقتی روی دکمه با نماد کلیک می کنید، فیلد جستجو ظاهر می شود.

* (اندازه جعبه: حاشیه-جعبه؛) فرم ( موقعیت: نسبی؛ عرض: 300 پیکسل؛ حاشیه: 0 خودکار؛ ارتفاع: 42 پیکسل؛ ) ورودی ( ارتفاع: 42 پیکسل؛ عرض: 0؛ پد: 0 42 پیکسل؛ 0 15 پیکسل؛ حاشیه: هیچ; دکمه جامد #F9F0DA (پس‌زمینه: #683B4D؛ حاشیه: هیچ‌کدام؛ ارتفاع: 42 پیکسل؛ عرض: 42 پیکسل؛ موقعیت: مطلق؛ بالا: 0؛ سمت راست: 0؛ مکان‌نما: نشانگر؛ ) دکمه: قبل (محتوا: "\f002 "؛ خانواده فونت: FontAwesome؛ اندازه قلم: 16 پیکسل؛ رنگ: #F9F0DA؛ )

8. گسترش فیلد جستجو

* (اندازه جعبه: جعبه حاشیه؛) فرم (عرض: خودکار؛ شناور: راست؛ حاشیه-راست: 30 پیکسل؛ ) ورودی (عرض: 250 پیکسل؛ ارتفاع: 42 پیکسل؛ بالشتک-چپ: 15 پیکسل؛ شعاع حاشیه: 42 پیکسل. حاشیه: 2px یکپارچه: هیچکدام از اینها: 0.3s;

برای بسیاری از مردم، اثربخشی جستجوی اطلاعات در اینترنت همان پاهایی است که به گرگ غذا می‌دهند. از کجا می توانم اطلاعات مرتبط و به روز پیدا کنم؟ کجا ارزان تر بخریم و گران بفروشیم؟ کجا می توانم دقیق ترین دستورالعمل ها را برای انجام برخی وظایف پیدا کنم؟ کجا فیلم آنلاین تماشا کنیم؟ به منظور پاسخگویی صحیح به این سوالات و سوالات مشابه کاربران، موتورهای جستجو سال به سال مکانیسم های پیچیده ای را برای ارائه سایت ها بهبود می بخشند. نتایج جستجوبا توجه به درخواست کاربر خاص هدف موتورهای جستجو این است که افراد را به بهترین سایت ممکن برای دریافت پاسخ سوالات خود ببرند.

علاوه بر موتورهای جستجو، خود موتورهای جستجو نیز مجهز به فیلترهای جستجو هستند تا هر کاربری بتواند دامنه جستجوی خود را برای اطلاعات محدود کند یا درخواست خود را مشخص کند.

بیایید در زیر به برخی از پسوندهای جستجویی که می توان به مرورگرهای محبوب اضافه کرد و در نتیجه کارایی جستجوی اطلاعات در اینترنت را افزایش داد نگاه کنیم.

جستجوی برنامه های افزودنی برای گوگل کروم

سایت فعلی را جستجو کنید

هر وب سایتی یک موتور جستجوی داخلی ندارد و در چنین منابعی باید زمان زیادی را صرف جستجوی اطلاعات خاص از بخش به بخش کنید. برنامه افزودنی ادغام شده در مرورگر برای جستجو در یک سایت، یک ابزار جهانی است که همیشه در دسترس خواهد بود، مهم نیست که در چه سایتی هستید. تنها کاری که برای یافتن اطلاعات لازم در یک سایت باید انجام دهید این است که یک عبارت کلیدی را در فیلد جستجوی کوچکی که با کلیک روی دکمه افزونه در پانل مرورگر ظاهر می شود، وارد کنید.

نتایج جستجوی موتور جستجو در یک برگه مرورگر جدید باز می شود و صفحات سایت خاصی که کلمه کلیدی در آن ظاهر می شود انتخاب می شود.

جستجوی سایت فعلی با موتور جستجوی Google از پیش نصب شده انجام می شود، اما در پارامترهای برنامه افزودنی می توانید موتور جستجوی دیگری - Yandex، Yahoo یا Bing را نصب کنید. برای انجام این کار، منوی زمینه را در دکمه برنامه افزودنی فراخوانی کرده و دستور "Options" را انتخاب کنید.

گزینه های برنامه افزودنی در یک برگه مرورگر جدید باز می شوند، جایی که می توانیم موتور جستجوی دیگری را انتخاب کنیم. و او قبلاً در سایت جستجو می کند.

جستجوی جایگزینگوگل

موتور جستجوی Yandex در ابتدا امکان جستجوی اطلاعات در دو موتور جستجوی دیگر - گوگل و بینگ - را با یک کلیک فراهم می کند، اگرچه پیوندهایی برای رفتن به این موتورهای جستجو همراه با عبارت کلیدی وارد شده در انتهای نتایج جستجو جمع شده است. صفحه

اما گوگل در این زمینه خودخواه تر است - در نتایج جستجوی خود هیچ اشاره ای به موتورهای جستجوی رقیب نشده است. می‌توانید این وضعیت را با معرفی افزونه «جستجوی جایگزین Google» در Google Chrome اصلاح کنید.

از معرفی مداوم هر بار علاوه بر کلمه کلیدی"تورنت"، برای دریافت نتایج جستجو از ردیاب های تورنت، نصب یک پسوند ویژه برای این منظور آسان تر است، TMS (Torrents MultiSearch).

دکمه افزونه در نوار ابزار مرورگر تعبیه شده است و با کلیک بر روی آن، یک فیلد جستجوی کوچک برای شما باز می شود تا بتوانید درخواستی را وارد کنید.

نتایج جستجو در یک برگه جداگانه ظاهر می‌شوند و این محتوا فقط در ردیاب‌های تورنت Runet یافت می‌شود و نه در سایت‌های Vareznik، نرم‌افزارها و پورتال‌های رسانه‌ای یا سایت‌های رسمی.

در نتایج جستجو برای ردیاب های تورنت، محتوای یافت شده را می توان بر اساس اندازه فایل یا تاریخ آپلود آن فیلتر کرد. برای محدود کردن جستجو، می توانید کلمات کلیدی اضافی را مشخص کنید.

همچنین می‌توان نتایج جستجو را برای ردیاب‌های تورنت خاص و به‌طور جداگانه برای انواع محتوا مانند فیلم، موسیقی و نرم‌افزار مشاهده کرد.

علاوه بر این، برنامه افزودنی TMS در منوی زمینه مرورگر تعبیه شده است تا بتوانید هر کلمه یا عبارتی که در صفحات اینترنت برجسته شده است را به جستجو در ردیاب های تورنت بدون سر و صداهای غیرضروری با کپی و چسباندن ارسال کنید.

جستجوی متنی

Google Chrome یک عملکرد جستجوی متنی را با استفاده از یک موتور جستجوی نصب شده در مرورگر به طور پیش فرض معرفی کرده است. پسوند «جستجوی متنی» برای افزایش تعداد موتورهای جستجویی طراحی شده است که با آن می توانید هر کلمه انتخابی را در صفحات وب سایت جستجو کنید.

برنامه افزودنی در ابتدا شامل امکان جستجو در محبوب ترین ردیاب تورنت RuTracker، ویکی پدیا و پورتال رسانه Kinopoisk.Ru است.

موتورهای جستجوی دیگر، به طوری که می توانید اطلاعات را از طریق آنها مستقیماً از منوی زمینه مرورگر جستجو کنید، در پارامترهای برنامه افزودنی اضافه می شوند. منوی گوگل کروم را باز کنید، "تنظیمات" را انتخاب کنید و به بخش افزونه های نصب شده در مرورگر بروید.

در لیست برنامه‌های افزودنی، مورد نیاز خود را انتخاب کنید - «جستجوی متنی». روی پیوند "گزینه ها" کلیک کنید.

پسوندهای اپرا را جستجو کنید

جستجو در داخل سایت

دکمه افزونه در نوار ابزار مرورگر قرار دارد و با کلیک بر روی آن می توانید یک فیلد جستجو را برای وارد کردن یک عبارت کلیدی فراخوانی کنید و همچنین موتور جستجو را تغییر دهید.

Yandex و Google از پیش نصب شده در تنظیمات برنامه افزودنی را می توان با سایر موتورهای جستجو تکمیل کرد. منوی زمینه را روی دکمه برنامه افزودنی فراخوانی کنید و دستور "تنظیمات" را انتخاب کنید.

به همان روشی که در مورد پسوند «جستجوی متنی» برای Google Chrome، برای افزودن یک افزونه جدید موتور جستجوباید رشته URL آن را وارد کنید.

چند جستجوی تورنت

جستجوی تصویر مشابه

جستجوی تصویر مشابه یک فرمان اضافی را به منوی زمینه مرورگر Opera اضافه می کند تا تصاویر مشابه را با استفاده از چندین موتور جستجو جستجو کند.

یا فهرستی از نشریات با تصاویر مشابه ارائه خواهد شد.

پسوندهای موزیلا فایرفاکس را جستجو کنید

در سایت جستجو کنید

مانند دو مورد قبلی، یک پسوند ویژه برای جستجو در داخل هر سایت در اینترنت برای مرورگر موزیلا فایرفاکس نیز وجود دارد.

فقط در مورد Fire Fox، جستجوی سایت در فیلد جستجوی موجود مرورگر تعبیه شده است و نماد خود را به شکل یک ذره بین قرمز قبل از نماد جستجوی معمولی اضافه می کند.

تغییر موتور جستجوی پیش‌فرض برای جستجوی معمولی موزیلا فایرفاکس مستلزم تغییر موتور جستجو برای جستجو در سایت‌ها است.

پسوند "جستجوی سایت" در منوی زمینه موزیلا فایرفاکس ادغام شده است و با برجسته کردن هر کلمه ای که به دستتان می آید، می توانید تمام صفحات سایت را که این کلمه در آن وجود دارد را در نتایج جستجوی جداگانه مشاهده کنید.

جستجو بر اساس byffox

هر محصولات نرم افزاریبا چنین نام های "هنوز بالغ" ، به عنوان یک قاعده ، بسیاری از کاربران عصبانی می شوند زیرا آنها حتی به هدف مورد نظر ابزارهای پیشنهادی اشاره نمی کنند.

و فقط پس از خواندن جزئیات باید دقیقاً آنچه را که "Softina from Vasya" یا "Repak Igruli از Petya" ارائه می دهد دریابید. با این حال، پشت چنین نام بیهوده ای مانند "جستجو توسط byffox" عملکرد مفید و معقولی نهفته است. این برنامه افزودنی به شما امکان می دهد منوی زمینه مرورگر را با یک فرمان اضافی برای جستجوی کلمه انتخاب شده با استفاده از موتورهای جستجوی مختلف تکمیل کنید.

25 اکتبر 2019 پست به روز شد

فرم جستجوی بیرون کش در سایت

سبک Flat محبوبیت قابل توجهی در طراحی وب سایت به دست آورده است. و در این درس به یکی دیگر از عناصر سایت می پردازیم که به این سبک ساخته شده است. این عنصر یک فرم جستجو است. اما نه یک فرم ساده، بلکه یک فرم جستجو که با کلیک کردن ظاهر می شود و در صورت عدم استفاده از آن "جمع می شود". در مورد نماد جستجو، از یک فایل SVG گرفته شده است و در وضوح های مختلف صفحه نمایش (هم در دستگاه های تلفن همراه و هم در مانیتورهای بزرگ) مقیاس پذیر است.

یک مثال در اینجا قابل مشاهده است:

دانلود کنید

فرم جستجوی بیرون کش

چگونه استفاده کنیم؟

HTML

ابتدا، بیایید در مورد نشانه گذاری که در صفحه HTML خواهد بود تصمیم گیری کنیم:

1 2 3 4 5 6 7

هیچ چیز غیرعادی در فرم جستجو وجود ندارد: یک فیلد متنی برای ورودی، یک دکمه جستجو و یک عنصر برای نماد

CSS

حالا بیایید سبک هایی را اضافه کنیم تا فرم جستجو در صفحه زیبا به نظر برسد.

از آنجایی که با کلیک روی آن ظاهر می شود، در ابتدا پنهان است. این کار با استفاده از اموال انجام می شود سرریزو معنی آن پنهان شده است، در نتیجه هر چیزی که خارج از نماد است پنهان می شود (در پایان فقط نماد را می بینیم، اما فیلد متن را نه):

.sb-search ( موقعیت : نسبی ؛ حاشیه بالا : 10 پیکسل ؛ عرض : 0 % ؛ حداقل عرض : 60 پیکسل ؛ ارتفاع : 60 پیکسل ؛ شناور : راست ؛ سرریز : پنهان ؛ -webkit-transition : عرض 0.3 ثانیه؛ -moz- انتقال : عرض 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% ؛ ارتفاع : 60 پیکسل ؛ حاشیه : 0 ؛ z-index : 10 padding : 20px 20px : 20px color : #2c3e50 ; ;

رنگ متنی را که در پس‌زمینه درخواست است (متنی که هنگام جستجو وارد می‌کنیم) تعیین می‌کنیم:

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

.sb-search-input : :-webkit-input-placeholder ( color : #efb480 ; ) .sb-search-input :-moz-placeholder ( color : #efb480 ; ) .sb-search-input : :-moz- مکان نگهدار ( رنگ : #efb480 ; ) .sb-search-input :-ms-input-placeholder (رنگ: #efb480 ; )

دکمه جستجو همیشه بالای بلوک ها و عناصر دیگر صفحه قرار دارد، بنابراین ما آن را می دهیم ارزش عالی z-index:

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

.sb-icon-search (رنگ: #fff؛ پس‌زمینه: #e67e22؛ z-index: 90؛ اندازه قلم: 22 پیکسل؛ فونت-خانواده: "icomoon"؛ صحبت کردن: هیچ؛ سبک فونت: معمولی؛ وزن فونت : normal font-variant : normal text-transform : none ; \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() format("Embedded-opentype" ), url ( "../fonts/icomoon/icomoon.woff") قالب ("woff" ), آدرس اینترنتی ( "../fonts/icomoon/icomoon.ttf") قالب (اسکریپت "truetype" ><script src = "js/uisearch.js" > <اسکریپت > new UISearch(document.getElementById("sb-search"));</script>

نتیجه گیری

یک فرم جستجوی زیبا که فضای بسیار کمی را در سایت اشغال می کند و با کلیک بر روی نماد جستجو به زیبایی ظاهر می شود.

مقالات مرتبط

سکونتگاه های نظامی پوشکین در مورد اراکچیوو

الکسی آندریویچ آراکچف (1769-1834) - دولتمرد و رهبر نظامی روسیه، کنت (1799)، ژنرال توپخانه (1807). او از خانواده ای اصیل از اراکچیف ها بود. او در زمان پل اول به شهرت رسید و به ارتش او کمک کرد...
آزمایشات فیزیکی ساده در خانه

می توان در دروس فیزیک در مراحل تعیین اهداف و مقاصد درس، ایجاد موقعیت های مشکل در هنگام مطالعه یک مبحث جدید، استفاده از دانش جدید هنگام تثبیت استفاده کرد. ارائه "تجربه های سرگرم کننده" می تواند توسط دانش آموزان استفاده شود تا ...
سنتز دینامیکی مکانیزم های بادامک مثالی از قانون سینوسی حرکت مکانیزم بادامک

مکانیزم بادامک مکانیزمی با یک جفت سینماتیکی بالاتر است که توانایی اطمینان از باقی ماندن لینک خروجی را دارد و ساختار دارای حداقل یک پیوند با سطح کاری با انحنای متغیر است. مکانیزم بادامک ...
جنگ هنوز شروع نشده است همه نمایش پادکست Glagolev FM

نمایشنامه سمیون الکساندروفسکی بر اساس نمایشنامه میخائیل دورننکوف "جنگ هنوز شروع نشده" در تئاتر پراکتیکا روی صحنه رفت. آلا شندروا گزارش می دهد. طی دو هفته گذشته، این دومین نمایش برتر مسکو بر اساس متن میخائیل دورننکوف است.
ارائه با موضوع "اتاق روش شناختی در یک داو"

| تزیین دفاتر در یک موسسه آموزشی پیش دبستانی دفاع از پروژه "دکوراسیون اداری سال نو" برای سال بین المللی تئاتر در ژانویه بود A. Barto Shadow Theater Props: 1. صفحه نمایش بزرگ (ورق روی میله فلزی) 2. لامپ برای آرایشگران ...
تاریخ های سلطنت اولگا در روسیه

پس از قتل شاهزاده ایگور ، درولیان ها تصمیم گرفتند که از این پس قبیله آنها آزاد است و مجبور نیستند به کیوان روس ادای احترام کنند. علاوه بر این ، شاهزاده آنها مال سعی کرد با اولگا ازدواج کند. بنابراین او می خواست تاج و تخت کیف را به دست گیرد و به تنهایی ...