За многу луѓе, ефективноста во пребарувањето информации на Интернет е самите нозе што го хранат волкот. Каде можам да најдам ажурирани и ажурирани информации? Каде да купите поевтино и да продадете поскапо? Каде можам да најдам најточни упатства за извршување на одредени задачи? Каде да гледате филмови преку Интернет? Со цел да одговорат што е можно поправилно на овие и слични прашања на корисниците, пребарувачите од година во година ги подобруваат веќе софистицираните механизми за доставување страници во резултатите од пребарувањето за специфични кориснички прашања. Целта на пребарувачите е да ги однесат луѓето на највисок квалитет што е можно за да добијат одговори на поставените прашања.

Покрај моторите за пребарување, самите пребарувачи се опремени со филтри за пребарување, така што секој корисник може да го намали пребарувањето на информации или да го намали своето барање.

Размислете подолу за некои екстензии за пребарување што можат да ги надополнат популарните прелистувачи и, како резултат, да ја зголемат ефикасноста на пребарувањето информации на Интернет.

Екстензии за пребарување за Google Chrome

Пребарувајте ја тековната страница

Не секоја страница е опремена со внатрешен пребарувач и на такви ресурси треба да трчате од дел до дел долго време во потрага по специфични информации. Вграденото проширување на прелистувачот за пребарување во рамките на страницата е универзална алатка која секогаш ќе биде при рака, без разлика која страница ќе ја посетите. Сè што треба да се направи за да се најдат потребните информации во рамките на една страница е да внесете клучен збор во малото поле за пребарување што се појавува кога ќе кликнете на копчето за проширување на лентата со прелистувачот.

Резултатите од пребарувањето на пребарувачот ќе се отворат во нов табулатор на прелистувачот и тие ќе ги изберат страниците на одредена страница каде што се наоѓа клучниот збор.

Пребарувањето на тековната страница е спроведено со претходно инсталиран мотор за пребарување Google, но во параметрите за проширување, можете да инсталирате друг пребарувач - Yandex, Yahoo или Bing. За да го направите ова, јавете се на контекстното мени на копчето за продолжување и изберете ја командата "Параметри".

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

Алтернативно пребарување на Google

Пребарувачот „Јандекс“ првично обезбедува можност за пребарување информации во други два пребарувачи - Гугл и Бинг - со еден клик, иако врските за одење до овие машини за пребарување заедно со внесеното барање за клучеви се преполнети на самото дно на страницата со резултатите од пребарувањето.

Но, Гугл е повеќе себичен во овој поглед - во резултатите од пребарувањето не се споменува конкурентни пребарувачи. Оваа ситуација може да се коригира со спроведување на екстензијата "Алтернативно пребарување на Google" во Google Chrome.

Полесно е да инсталирате специјална екстензија за оваа намена TMS (Torrents MultiSearch) отколку постојано да го внесувате додатокот на клучниот збор "torrent" за да добиете резултати од пребарувањето за торент тракерите.

Копчето за продолжување е вградено во лентата со алатки на прелистувачот и кога ќе кликнете, ќе се отвори мало поле за пребарување за да го внесете вашето барање.

Резултатите од пребарувањето се појавуваат во посебен таб и оваа содржина ќе се најде само на торент тракерите на Runet, а не на страниците на варезник, софтвер и медиумски портали или официјални страници.

Во резултатите од пребарувањето за торнер тракерите, пронајдената содржина може да се филтрира според големината на датотеката или датумот на нејзино поставување. Може да бидат наведени дополнителни клучни зборови за да се намали пребарувањето.

Резултатите од пребарувањето исто така може да се гледаат одделно за специфични тракери за следење и одделно за типови содржина како што се филмови, музика, софтвер.

Покрај тоа, наставката TMS е вметната во контекстното мени на прелистувачот, така што ќе можете да испраќате кој било збор или фраза обележана на страниците на Интернет до пребарување на торент тракери без непотребна врева со копирање и лепење.

Контекстуално пребарување

Google Chrome имплементираше функција за контекстуално пребарување користејќи единствен пребарувач инсталиран во стандардниот прелистувач. Проширувањето „Контекстуално пребарување“ има за цел да го зголеми бројот на пребарувачи што можат да се користат за пребарување на кој било избран збор на страниците на страницата.

Екстензијата првично има можност за пребарување на најпопуларниот тракер за траси RuTracker, Википедија и медиумскиот портал Kinopoisk.Ru.

Другите мотори за пребарување, така што преку нив ќе може да се бараат информации директно од контекстното мени на прелистувачот, се додаваат во параметрите на наставката. Да го отвориме менито Google Chrome, изберете „Settings“ и да одиме во делот за екстензии инсталирани во прелистувачот.

Во списокот на екстензии, изберете што ни треба - "Пребарување контекст". Кликнете на врската "Опции".

Додатоци за пребарување за Opera

Пребарувајте во рамките на страницата

Копчето за продолжување се наоѓа на лентата со алатки на прелистувачот и со кликнување на него, можете да го повикате полето за пребарување за да внесете барање за клуч, како и да го промените пребарувачот.

Претходно инсталираните Yandex и Google во поставките за продолжување може да се надополнат со други машини за пребарување. Повикајте го контекстното мени на копчето за продолжување и изберете ја командата "Поставки".

На ист начин како и во случајот на проширувањето „Контекстуално пребарување“ за Google Chrome, за да додадете нов мотор за пребарување, мора да ја внесете неговата низа URL.

Мулти пребарување на торенти

Слично пребарување на слики

Сличното пребарување на слики додава дополнителна команда за пребарување слични слики со употреба на неколку пребарувачи во контекстното мени на прелистувачот Опера.

Или ќе биде презентиран список на публикации со слични слики.

Екстензии за пребарување за Mozilla Firefox

Пребарување на страници

Како и во претходните два случаи, постои посебна наставка за пребарување во која било страница на Интернет за прелистувачот Mozilla Firefox.

Само во случај на Fire Fox, пребарувањето на страницата е вградено во постојното поле за пребарување на прелистувачот, додавајќи ја неговата икона во форма на црвена лупа пред иконата за нормално пребарување.

Промената на стандардниот пребарувач за редовно пребарување на Mozilla Firefox повлекува и промена на пребарувачот и пребарување во рамките на страниците.

Продолжувањето за пребарување на страници е интегрирано во контекстното мени на Mozilla Firefox и со избирање на кој било збор што ќе ви се најде при рака, во индивидуалните резултати од пребарувањето можете да ги видите сите страници на страницата каде што е присутен овој збор.

Пребарување од byffox

Кои било софтверски производи со такви „сè уште не созреани“ имиња, по правило, нервираат многу корисници со фактот дека тие дури и не гледаат навестување за намената на предложените алатки.

И што точно нуди „Софтина од Васја“ или „Репак играно од Петја“, треба да дознаете само по детално запознавање со описот. Како и да е, зад ваквото несериозно име како „Пребарување од byffox“ стои корисна и разумна функционалност. Оваа наставка ви овозможува да го надополнувате контекстното мени на прелистувачот со дополнителна команда за пребарување за избраниот збор со користење на различни пребарувачи.

Овој пост е продолжение на претходната статија (превод) „Пребарај блог со API за пребарување Google AJAX и jQuery“.
Откако го напишав, размислував за тоа каде би било најуспешно да поставам ваква форма и тепих од резултати, освен за посебна страница. Идејата не чекаше долго: логично е да се обиде пребарување со резултати во скокачки прозорец.

Прво демо:

Пребарување на блогови

Како основа за скокачкото пребарување, избрав jQuery модален додаток наречен Открива ... Тој е лесен, без непотребни елементи и многу лесен за поврзување.

Инсталирање Откриј.
Врски до скриптата и стиловите се напишани во делот за шаблони:
Не заборавајте дека има png слика во архивата на приклучокот, што треба да ја ставите во вашиот албум picas и да ја напишете патеката до неа во открие.css.

Следниот чекор е да се иницијализира приклучокот " подесување" скрипта (ставете на истото место):

Потоа дефинираме скокачка содржина (го ставаме ова во телото на објавата):

Пребарување на блогови

тука ги вметнуваме сите кодови за пребарување од написот „Пребарувајте блог користејќи API за пребарување Google AJAX и jQuery“.

Според мојот коментар во овој код, копирајте го и залепете го целото „пребарување на Google“ таму, за што зборуваме сега. Во стилот на css, ќе мора да ја зголемите површината на белиот квадрат.

И последниот чекор е таа самата модална врска, што може да биде и текст и графички. Код за врска во форма на слика (исто така и во телото на објавата):

Имаат Открива, модален приклучок, постојат два вида на анимација: бледнеат и бледнеатAndPop, прилагодлива брзина на ефектот: анимација брзина: 300, и можноста да се затвори целиот прозорец со кликнување на затемнетата позадина: closeonbackgroundclick: точно.

Овие поставки се запишани во скриптата "конфигурација" (видете погоре):

$ ("# myModal"). открие ((анимација: "fadeAndPop", // fade, fadeAndPop, нема анимации со брзина: 300, // колку брзо се анимациите closeonbackgroundclick: true, // ако кликнете на позадината модално ќе се затвори? „затвори-откриј-модал“ // класа на копче или елемент што ќе затвори отворен модал));

Или, овие опции може да се поврзат преку врска до модален прозорец (види погоре)

Треба да се сфати дека таквата шема со пребарување во посебен прозорец - чист експеримент и бара повнимателно прилагодување.

Во ова упатство, ќе создадеме паѓачка форма за пребарување што совршено се вклопува во дизајнот на нашиот мобилен интерфејс. Само CSS ќе се користи за спроведување на елементот - нема JavaScript или дополнително обележување. Едноставен и ефикасен начин за спроведување на компактна форма за пребарување.

Назначување

На мобилните уреди, секој пиксел се брои. За да се минимизира количината на простор потребен за прикажување на формуларот, тој првично ќе биде прикажан во компактна форма и ќе се прошири по приемот на влезниот фокус (: фокус). Овој пристап заштедува простор за други елементи и содржина на интерфејсот.

HTML обележување

Формата користи HTML5. Кодот е многу едноставен:

Ресетирање на стандардниот приказ за формата за пребарување во прелистувачите на Webkit

Стандардно, во прелистувачите на Webkit, формата за пребарување ќе изгледа вака:

За да направите формата за пребарување да изгледа како редовно поле за внесување текст, треба да ги додадете следниве стилови:

Влез (-веб-комплет-изглед: текстуално поле; -вејбкит-кутија-големина: содржина-поле; фонт-семејство: наследство; големина на фонт: 100%;) влез :: - веб-комплет-пребарување-декорација, внесување :: - веб-комплет- копче за пребарување-откажување (приказ: нема;)

Ние ја формираме нашата форма за пребарување

Влезното поле ќе има редовна ширина од 55px и ќе се прошири на 130px во состојбата: фокус. Својството на транзиција се користи за анимација и кутија-сенка се користи за ефектот на сјај.

Внесување (позадина: # едрелирана url (img / search-icon.png) без повторување 9px центар; граница: цврста 1px #ccc; баласт: 9px 10px 9px 32px; ширина: 55px; / * Стандардна ширина * / -webkit- радиус на граница: 10em; -moz-граница-радиус: 10em; граница-радиус: 10em; -webkit-транзиција: сите .5s; -moz-транзиција: сите .5s; транзиција: сите .5s;) влез: фокус ( ширина: 130px; / * Ширина со фокус * / боја на позадина: #fff; граница-боја: # 6dcff6; -webkit-кутија-сенка: 0 0 5px rgba (109,207,246, .5); -moz-кутија- сенка: 0 0 5px rgba (109,207,246, .5); кутија-сенка: 0 0 5px rgba (109,207,246, .5); / * Ефект на сјај * /)

Пример Б.

Во примерот Б, формата за пребарување е значително минимизирана - само иконата се прикажува без пополнување на текст. Забележете дека својствата за полнење и ширина за полето за пребарување се променија во форма на тркалезно копче. За да го направите текстот невидлив, користете ја бојата: про transparentирно својство.

# влез демо-б (ширина: 15px; лево од полнење: 10px; боја: про transparentирен; курсор: покажувач;) # демо-b влез: лебди (боја на позадина: #fff;) # влез демо-б: фокус (ширина : 130px; полнење лево: 32px; боја: # 000; боја на позадина: #fff; покажувач: автоматско;)

Компатибилност со прелистувачот

Опишаниот метод работи во сите поголеми прелистувачи: Chrome, Firefox, Safari и IE8 +. Кај IE7 и постарите прелистувачи, функционалноста не работи поради недостаток на поддршка за: псевдо-класа и тип на поле за пребарување.

25 октомври 2019 година Записот е ажуриран

Лизгачка форма за пребарување на страницата

Станот стил се здоби со значителна популарност во дизајнот на веб-страници. И во оваа лекција ќе разгледаме друг елемент на страницата, кој е направен во овој стил. Овој елемент е форма за пребарување. Но, не едноставна, туку форма за пребарување што се појавува кога ќе се кликне и „се урива“ ако не се користи. Што се однесува до иконата за пребарување, таа е земена од датотеката SVG и може да се прошири на различна резолуција на екранот (и на мобилни уреди и на големи монитори).

Пример може да се види тука:

Преземи

Извадете формулар за пребарување

Како да се користи?

HTML

Прво, да ја дефинираме ознаката што ќе се најде на HTML-страницата:

1 2 3 4 5 6 7

<div id \u003d "sb-search" class \u003d "sb-search"\u003e <форма\u003e <класа на влез \u003d механизам за зачувување "sb-search-input" \u003d „Што ќе барам? type \u003d "text" value \u003d "" name \u003d "search" id \u003d "search"\u003e <влезна класа \u003d "sb-search-submit" type \u003d "submit" value \u003d ""\u003e <span class \u003d "sb-icon-search"\u003e </ форма\u003e </ div\u003e

Нема ништо необично во формуларот за пребарување: поле за текст за внесување, копче за пребарување и елемент за иконата.

CSS

Сега да додадеме стил за да може формата за пребарување да изгледа убаво на страницата.

Бидејќи ќе се појави кога ќе се кликне, првично е скриено. Ова е направено со користење на имотот прелевањеи неговото значење скриени, како резултат на што се крие сè што е надвор од иконата (како резултат, ја гледаме само иконата, а полето за текст не е):

.sb-пребарување (позиција: релативна; маргина-врв: 10px; ширина: 0%; мин-ширина: 60px; висина: 60px; плови: десно; претекување: скриено; -веб-пакет-транзиција: ширина 0,3s; -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 ; padding: 20px 65px 20px 20px; фонт-семејство: наследи; големина на фонт: 20px; боја: # 2c3e50;) влез [type \u003d "search"] .sb-search-input (-webkit-изглед: нема; -webkit -радиус-граница: 0px;)

Ние ја одредуваме бојата на текстот што е во позадината на барањето (текстот што го внесуваме за време на пребарувањето):

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 :: -moz- меморирање (боја: # efb480;) .sb-пребарување-влез: -ms-влез-механизам (боја: # 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; фонт-семејство: "икомун"; зборува: никој; фонт-стил: нормално; фонт-тежина : normal; фонт-варијанта: нормално; текст-трансформација: ниедно; -webkit-фонт-измазнување: антиалјачно;) .sb-икона-пребарување: пред (содржина: " \\ e000 "; }

Исто така, не заборавајте да вклучите специјални икони (SVG). За да вметнете икона во копчето за пребарување:

1 2 3 4 5 6 7 8 9 10

@ 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") формат (скрипта "вистински тип"\u003e<скрипта src \u003d "js / uisearch.js"\u003e <скрипта\u003e ново UISearch (document.getElementById ("sb-search"));</ скрипта\u003e

Заклучок

Убава форма за пребарување што зафаќа многу малку простор на страницата и се појавува прекрасно кога ќе кликнете на иконата за пребарување.

име на клучот на параметарот. За полето за пребарување, најчесто се користи "q" или "текст". клучна вредност на параметарот. Најчесто не се прашува. Корисникот може да го смени во свој текст ако не се наведени само читаните и оневозможените атрибути. блокирана модификација на корисникот блокиран пристап, модификација на корисникот и пренос на податоци на тековното поле на параметар не може да биде празен образец за внесување како во редовните изрази ЈС, што мора да се следи за да се достави формуларот минимален број на знаци потребни за да се достави формуларот максимален број на знаци што корисникот може да ги напише должината на полето во симболи совет за инструменти за навестување за меморирање за автоматско комплетирање на лебдењето. Современите прелистувачи покажуваат претходно внесени пребарувања на тековниот домен. Можете да го исклучите или да го направите поконкретно. список на препорачани прашања за правопис и граматика, проверен фокус на полето (т.е. периодот помеѓу кликнување на елемент и кликнување надвор од елементот) добиен при вчитување документ

Отстранете го крстот "Исчисти" во полето за пребарување, бришејќи го претходно внесениот текст

Како работи формата за пребарување на страницата

Наједноставниот HTML код

Ако напишете во полето „прашање“ и кликнете на копчето „Пронајди“, адресата на страницата ќе се смени од „http: //site/2011/06/forma-poiska-po-saitu..html ? текст \u003d прашање »Како што се случува кога ќе кликнете на врската. Кога страницата е вчитана, скриптата го проверува присуството на наведените параметри во URL-то и, доколку се најде, ги генерира и прикажува резултатите од пребарувањето на страницата.

име \u003d "текст">

Но, со цел да се зголеми брзината на вчитување на документот, скриптата што го обработува барањето, по правило, се става на само една страница на страницата, на која ќе се изврши транзицијата, ако нејзината адреса е запишана во атрибутот за акција: " http: // сајт / пребарување /? текст \u003d прашање ".

акција \u003d "http: // сајт / пребарување /">

За да работи скриптата, може да бидат потребни дополнителни параметри, кои се наведени во ... Ова поле не е прикажано.? пребарувач \u003d 808327& текст \u003d прашање ".

Отворете го резултатот од формата во ново јазиче користејќи го атрибутот за цел

цел \u003d "_ празно">

Каде да ја добиете скриптата за пребарување на страницата

Можеш да користиш

• понудени од специјалните услуги на Јандекс и Гугл,
• вградени во користениот CMS (доколку е достапен), на пример, на Blogger на „https: // страницата.ру/ пребарување? q \u003d прашање ", каде што" site.ru "се заменува со вашата адреса на блогот,
• развиен независно, на пример, во PHP.

Најлесната опција е пренасочување на барањето на Google:

Текст на копчето: „Пребарување“, „Пребарување“, „Пронајди“

Од поттикнувачките зборови „Најди“ има совршена форма и имплицира дека резултатот од пребарувањето ќе биде нужно позитивен.