.
Mi a különbség
Mi a különbség ? Nincs különbség az első vagy a második módon létrehozott beküldő gombok működésében. A különbség az, hogy az elem egy tároló, így más elemek is elhelyezhetők benne, például képek vagy ikonok.
Kétféleképpen adhat hozzá szöveget az űrlapmezőkhöz:
Input::-webkit-input-placeholder ( szín: #B6C0A5; betűstílus: dőlt; háttér: #E0EFCA; ) input:-moz-placeholder ( szín: #B6C0A5; betűstílus: dőlt; háttér: #E0EFCA; ) bemenet:-ms-input-placeholder; font
2)
Bemenet (szín: fehér; )
Az ikonok megjelenítéséhez ne felejtse el megadni a .
2. Keresőmező ikon gombbal
* (box-sizing: border-box;) form (pozíció: relatív; szélesség: 300px; margó: 0 automatikus; ) bemenet (szélesség: 100%; magasság: 42px; padding-left: 10px; border: 2px solid #7BA7AB; border-radius: 5px; körvonal: 5px; körvonal: gomb színe:9 felső: 0; jobb: 0px; szélesség: 42px; magasság: 42px; szegély: nincs; háttér: #7BA7AB; szegélysugár: 0 5px 5px 0; kurzor: mutató; ) button:before ( tartalom: "\f002"; betűcsalád: FontAwesome; 1 font-px; font 3. Keresőmező belül gombbal
* (box-sizing: border-box;) form ( pozíció: relatív; szélesség: 300px; margó: 0 auto; ) bemenet, gomb (szegély: nincs; körvonal: nincs; keretsugár: 3px; ) bemenet (szélesség: 100%; magasság: 42px; háttér: #F9F0DA; padding-px; 6p5px; magasság: 6px ; pozíció: abszolút; felül: 8px; jobbra: 8px; háttér: #F15B42; kurzor: mutató; ) gomb:előtte (tartalom: "\f105"; betűcsalád: FontAwesome; szín: #F9F0DA; betűméret: 20px; betűsúly: félkövér;) 4. A keresőmező "lapos" stílusban
* (dobozméret: keret-doboz;) forma (pozíció: relatív; szélesség: 300px; margó: 0 automatikus; háttér: #A3D0C3; ) bemenet, gomb (szegély: nincs; körvonal: nincs; háttér: átlátszó; ) bemenet (szélesség: 100%; magasság: 42px; padding-bal :4; abszolút szélesség: 4px; szélesség:4; felül: 0; jobbra: 0; kurzor: mutató; ) gomb:előtte ( tartalom: "\f002"; betűcsalád: FontAwesome; betűméret: 16 képpont; szín: #F9F0DA; ) 5. Keresőmező vastag alsó szegéllyel
* (box-sizing: border-box;) form (pozíció: relatív; szélesség: 300px; margó: 0 auto; háttér: #F9F0DA; keret-alsó: 4px tömör #be290e; ) bemenet, gomb (szegély: nincs; körvonal: nincs; háttér: átlátszó; ) bemenet (szélesség: 100%;x magasság:1 gomb magasság:4p;x magasság:1 kiegészítés 2px; szélesség: 42px ; pozíció: abszolút; felül: 0; jobbra: 0; kurzor: mutató; ) gomb:előtte (tartalom: "\f178"; betűcsalád: FontAwesome; betűméret: 20px; szín: #be290e; ) 6. Keresőmező változó szegélyszínnel
* (box-sizing: border-box;) form ( pozíció: relatív; szélesség: 300px; margó: 0 auto; ) bemenet, gomb ( körvonal: nincs; háttér: átlátszó; ) bemenet ( szélesség: 100%; magasság: 42px; padding-left: 15px; border: 3px solid #F9F0DA;nincs magasság:4p); pozíció: abszolút; felső: 0; jobbra: 0; kurzor: mutató; ) gomb:előtte (tartalom: "\f002"; betűcsalád: FontAwesome; betűméret: 16px; szín: #F9F0DA; ) input:focus (szegélyszín: #311c24; ) 7. Csúszó keresőmező
A keresőmező az ikon gombra kattintva jelenik meg.
* (box-sizing: border-box;) form (pozíció: relatív; szélesség: 300px; margó: 0 auto; magasság: 42px; ) input (magasság: 42px; szélesség: 0; padding: 0 42px 0 15px; border: none; border-bottom: 2px átlátszó háttér: 2px átlátszó háttér; körvonal: . .8, 0, 1); pozíció: abszolút ; felül: 0; jobbra: 0; z-index: 2; ) bemenet:fókusz (szélesség: 300px; z-index: 1; szegély-alsó: 2px tömör #F9F0DA; ) gomb ( háttér: #683B4D; szélesség: szélesség:4 jobbra; 2pxx; szélesség: 4 jobbra 0; kurzor: mutató; ) gomb:előtte ( tartalom: "\f 002"; betűcsalád: FontAwesome; betűméret: 16 képpont; szín: #F9F0DA; )8. A keresőmező növelése
* (box-sizing: border-box;) form ( szélesség: auto; lebegés: jobb; margó-jobb: 30px; ) input ( szélesség: 250px; magasság: 42px; padding-left: 15px; border-radius: 42px; border: 2px solid #324b4e; átmeneti vonal; nincs háttér; #.fline9:0; ) input:focus (szélesség: 300 px; ) gomb (szélesség: 42px; magasság: 42px; háttér: nincs; szegély: nincs; pozíció: abszolút; felső: -2px; jobb: 0; ) button:before( tartalom: "\f002"; font-family: FontAwesome; szín: #32)4b Ebben az oktatóanyagban egy legördülő keresési űrlapot hozunk létre, amely tökéletesen illeszkedik a mobileszközök felületének kialakításához. Csak CSS-t használunk az elem megvalósításához – JavaScript vagy további jelölés nélkül. egyszerű és hatékony módszer kompakt keresési űrlap megvalósításához.
Célja
Mobileszközökön minden pixel számít. Az űrlap megjelenítéséhez szükséges hely minimálisra csökkentése érdekében az űrlap kezdetben kompakt formában jelenik meg, majd kibővül, amikor bemeneti fókuszt kap (:focus). Ez a megközelítés lehetővé teszi, hogy helyet takarítson meg az egyéb felületelemek és tartalom számára.
HTML jelölés
Az űrlap HTML5-öt használ. A kód nagyon egyszerű:
Az alapértelmezett keresési űrlap nézet visszaállítása a Webkit böngészőkben
Alapértelmezés szerint a Webkit böngészőkben a keresési űrlap így fog kinézni:
Ahhoz, hogy a keresési űrlap normál szövegbeviteli mezőnek tűnjön, a következő stílusokat kell hozzáadnia:
Input ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) input::-webkit-search-decoration, input::-webkit-search-cancel-button (megjelenítés: nincs; )
Keresési űrlapunk felépítése
A beviteli mező normál szélessége 55 képpont lesz, és 130 képpontra bővül :focus állapotban. Az átmeneti tulajdonság az animációhoz, a box-shadow pedig a világító effektushoz használatos.
Bemenet (háttér: #ededed url(img/search-icon.png) nem ismétlődik 9 képpont középen; szegély: tömör 1px #cc; kitöltés: 9px 10px 9px 32px; szélesség: 55px; /* Alapértelmezett szélesség */ -webkit-border:-radius;-moz1radius-radius 0em; -webkit- átmenet: minden .5s; -moz-transition: minden .5s; átmenet: minden .5s; ) input:focus (szélesség: 130px; /* Szélesség bemeneti fókusszal */ háttérszín: #fff; szegélyszín: #6dcff6; -webkit-box-shadow: 5px0,7,2,2 ba,5px 0,7); -box-shadow: 0 0 5 px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); /* Ragyogó hatás */ )
B példa
A B példában a keresési űrlap jelentősen le van csökkentve - csak az ikon jelenik meg szöveg kitöltése nélkül. Figyelje meg, hogy a keresőmező kitöltési és szélességi tulajdonságai megváltoztak, és kerek gombot alkottak. A color:transparent tulajdonság a szöveg láthatatlanná tételére szolgál.
#demo-b bemenet (szélesség: 15px; padding-bal: 10px; szín: átlátszó; kurzor: pointer; ) #demo-b input:hover (háttérszín: #fff; ) #demo-b input:focus (szélesség: 130px; auto padding-left: 32px; cursor: #0:fx; color)-sor:0:0;
Böngésző kompatibilitás
A leírt módszer minden nagyobb böngészőben működik: Chrome, Firefox, Safari és IE8+. Az IE7 és régebbi böngészőkben a funkció nem működik a :focus pszeudoosztály és a keresőmezőtípus támogatásának hiánya miatt.
A kombinált cím- és keresősáv lehetővé teszi a keresőmotorok lekérdezését vagy webcímek megadását a kereséshez amit te keresek a neten. Az Opera alapértelmezés szerint a Google keresőjét használja.
Keresés az interneten:
kattints a Keressen vagy írjon be címet terület. Írja be a keresni kívánt kulcsszavakat. Például írja be a filmeket. Kattintson a megjelenő prediktív keresési javaslatok egyikére, vagy nyomja meg a gombot Belép .
A prediktív keresési javaslatok gépelés közben jelennek meg. Ha egy másik keresőmotorból, például a Yahoo!-ból, az Amazonból vagy a Bingből származó találatokat szeretné megtekinteni, kattintson a megfelelő fülre, amely a prediktív keresési javaslatok mezőjének jobb alsó sarkában jelenik meg.
Ha már tudja egy oldal helyét, írja be közvetlenül a webcímet a kombinált cím- és keresősávba, majd nyomja meg az Enter billentyűt az oldalra való navigáláshoz. Például írja be a www.opera.com címet, és nyomja meg az Enter billentyűt az Opera Software kezdőlapjának megnyitásához.
alapértelmezett keresőmotor
Az Opera alapértelmezett keresője a Google, de érdemes lehet az Ecosia, a DuckDuckGo, az Amazon vagy a Wikipedia használatával keresni. Az alapértelmezett keresőmotor módosítása:
Menj Beállítások . Alatt kereső motorok , válassza ki a kívánt keresőmotort a legördülő menüből.
Egyéni keresők
Az Opera alapértelmezett keresőin kívül beállíthatja a kombinált címet és keresősávot is, hogy más keresőmotorokból származó eredményeket jelenítsen meg. Ehhez tegye a következőket:
Kattintson a jobb gombbal (Mac esetén a Ctrl + kattintás) egy webhely keresősávjára, és válassza ki Keresőmotor létrehozása… Rendeljen nevet és kulcsszót a motornak. Kattintson rendben .
Hozzon létre egy egyéni keresőmotort
Egyéni keresőmotorban történő keresés létrehozásához először írja be a motorhoz rendelt kulcsszót, majd egy szóközt, majd írja be a lekérdezést.
A beállítások oldalon szerkesztheti a kulcsszavakat, valamint kezelheti vagy eltávolíthatja a keresőmotorokat. Ehhez tegye a következőket:
Menj Beállítások . Alatt kereső motorok , kattints a Keresőmotor kezelése gomb.
Keresés egyéni keresőmotorral
Ha egyéni keresőmotort szeretne használni a keresésben, írja be a kulcsszót, majd egy szóközt a lekérdezés előtt. Például a Bing a „b” kulcsszóval rendelkezik. A Binggel való kereséshez írja be, hogy „b Mi Idaho fővárosa”. Az eredmények megnyílnak a Bing keresési eredményoldalán.
A kulcsszó és a keresési lekérdezés közötti tér fontos az egyéni keresőmotor kiválasztásához.
Módosítsa a keresőmotorokat a kiemelt szöveges helyi menüben
Az Opera kereső felugró eszközével szöveget jelölhet ki a weboldalon, és a kiválasztott szöveget keresési lekérdezésként használhatja. A kereső felugró eszköz az alapértelmezett keresőmotort használja. Előfordulhat azonban, hogy a keresési lekérdezés szövegének kiemelése után egy másik motortól származó eredményeket szeretne kapni.
A helyi menü használatával történő kereséshez jelöljön ki egy szöveget a weboldalon, és kattintson a jobb gombbal (vagy CTRL + kattintás) a kijelölésre.
A felugró ablakban vigye az egeret fölé Keresés ezzel , majd válassza ki a használni kívánt keresőt.
A keresés eredménye új lapon nyílik meg.
Keresőmotorok módosítása az Azonnali keresésben
A keresési előugró ablak használata:
Szöveg kiemelése egy weboldalon. Egy felugró ablak jelenik meg a kiemelt szöveg felett, beleértve a beállításokat is Keresés és Másolat (és Ossza meg ha Mac-en). Ha egy pénznem, egység vagy időzóna ki van jelölve, az átváltott érték megjelenik a felugró ablakban .
Válassza ki Keresés az alapértelmezett keresőmotor lekérdezéséhez a kiemelt szöveggel. Válassza ki Másolat a kiemelt szöveg vágólapra másolásához. Ha van konvertált érték az előugró ablakban, kattintson az értékre a vágólapra másolásához.
A keresési előugró eszköz letiltása, beleértve annak összes funkcióját:
Menj Beállítások . Kattintson Fejlett a bal oldalsávon, és kattintson Jellemzők . Alatt Keresés előugró ablak , kikapcsolni Engedélyezze a keresési előugró ablakot a szöveg kiválasztásakor .
Sok ember számára az internetes információkeresés hatékonysága éppen az a láb, amely a farkast táplálja. Hol találok naprakész és naprakész információkat? Hol lehet olcsóbban venni és drágábban eladni? Hol találom a legpontosabb utasításokat bizonyos feladatok elvégzéséhez? Hol lehet online filmeket nézni? Annak érdekében, hogy a felhasználók ilyen és hasonló kérdéseit a lehető legpontosabban megválaszolhassák, a keresőmotorok évről évre fejlesztik a webhelyek bizonyos felhasználói lekérdezések esetén a keresési eredmények között való megjelenítésének már kifinomult mechanizmusait. A keresőmotorok célja, hogy az embereket a lehető legjobb oldalra vigyék, hogy választ kapjanak kérdéseikre.
A keresőmotorok mellett maguk a keresőmotorok is fel vannak szerelve keresőszűrőkkel, így bármely felhasználó szűkítheti az információkeresés körét, vagy megadhatja kérését.
Az alábbiakban vegye figyelembe azokat a keresési bővítményeket, amelyek hozzáadhatók a népszerű böngészőkhöz, és ennek eredményeként növelik az információkeresés hatékonyságát az interneten.
Keresési bővítmények a Google Chrome-hoz
Keresés az aktuális oldalon
Nem minden webhely van felszerelve belső keresővel, és az ilyen erőforrásokon hosszú ideig kell szakaszról szakaszra futnia konkrét információk keresésében. A webhelyen belüli kereséshez használható böngészőbővítmény egy univerzális eszköz, amely mindig kéznél lesz, függetlenül attól, hogy melyik webhelyre érkezik. Mindössze annyit kell tennie, hogy megtalálja a szükséges információkat a webhelyen belül, csak be kell írnia egy kulcskérdést egy kis keresőmezőbe, amely akkor jelenik meg, amikor a böngészőpanelen a bővítmény gombra kattint.
A keresőmotor keresési eredményei egy új böngészőlapon nyílnak meg, és egy adott webhely azon oldalai kerülnek kiválasztásra, ahol a kulcsszó előfordul.
Az aktuális webhely keresése be van ágyazva egy előre telepített Google keresőmotorral, de beállíthat egy másik keresőt is a kiterjesztés paramétereiben - Yandex, Yahoo vagy Bing. Ehhez hívja meg a helyi menüt a bővítmény gombján, és válassza ki a "Paraméterek" parancsot.
A bővítési lehetőségek egy új böngészőlapon nyílnak meg, ahol választhatunk egy másik keresőt. És máris keresni fog az oldalon.
Alternatív Google keresés
A Yandex keresőmotor kezdetben lehetővé teszi, hogy egy kattintással két másik keresőmotorban – a Google-ban és a Bingben – keressen információt, bár az ezekre a keresőmotorokra mutató hivatkozások a beírt kulcskérdéssel együtt a keresési eredményoldal alján találhatók.
A Google azonban önzőbb ebben a tekintetben – keresési eredményei között szó sincs egymással versengő keresőmotorokról. Megoldhatja ezt a helyzetet, ha implementálja a Google Chrome Alternatív keresés bővítményét a Google Chrome-ban.
Ahelyett, hogy folyamatosan beírná a „torrent” kulcsszó függelékét minden alkalommal, hogy keresési eredményeket kapjon a torrentkövetőkre, egyszerűbb telepíteni egy speciális bővítményt erre a célra, a TMS-t (Torrents MultiSearch).
A bővítmény gomb be van ágyazva a böngésző eszköztárába, és rákattintásra egy kis keresőmező nyílik meg a lekérdezés megadásához.
A keresési eredmények külön lapon jelennek meg, és ez csak a Runet torrentkövetőiben található tartalom lesz, warez oldalakon, szoftver- és médiaportálokon vagy hivatalos oldalakon nem.
A torrentkövetők keresési eredményei között a talált tartalom fájlméret vagy feltöltés dátuma szerint szűrhető. A keresés szűkítéséhez további kulcsszavakat is megadhat.
A keresési eredmények külön-külön is megtekinthetők az adott torrentkövetőknél, és külön-külön olyan tartalomtípusoknál, mint például filmek, zenék, szoftverek.
Ezen kívül a TMS kiterjesztés be van ágyazva a böngésző helyi menüjébe, így az internetes oldalakon kiemelt szót vagy kifejezést elküldheti a torrentkövetők keresésére anélkül, hogy túl sok másolási és beillesztési gondot okozna.
Kontextus szerinti keresés
A Google Chrome egy kontextus szerinti keresési funkciót implementált az alapértelmezett böngészőbe telepített keresőmotor használatával. A "Context Search" bővítmény célja, hogy növelje azon keresőmotorok számát, amelyekkel a webhelyek oldalain bármely kiválasztott szóra kereshet.
A kiterjesztés kezdetben képes keresni a legnépszerűbb torrentkövetőben, a RuTrackerben, a Wikipédiában és a Kinopoisk.Ru médiaportálon.
Más keresőmotorok, hogy rajtuk keresztül közvetlenül a böngésző helyi menüjéből lehessen információkat keresni, a kiterjesztés paraméterei között szerepelnek. Nyissa meg a Google Chrome menüt, válassza a "Beállítások" lehetőséget, és lépjen a böngészőben telepített bővítmények részéhez.
A bővítmények listájában válassza ki a szükségest - "Kontextus keresés". Kattintson a "Beállítások" hivatkozásra.
Keresési bővítmények az Opera számára
Keresés a webhelyen belül
A bővítmény gomb a böngésző eszköztárán található, és rákattintva előhívható a keresőmező a kulcskérdés megadásához, valamint a keresőmotor módosítása.
Az előre telepített Yandex és Google a bővítmény beállításaiban kiegészíthető más keresőmotorokkal. Hívja a helyi menüt a bővítmény gombján, és válassza ki a „Beállítások” parancsot.
Ugyanúgy, mint a Google Chrome Context Search bővítménye esetében, új keresőmotor hozzáadásához meg kell adnia annak URL-karakterláncát.
Torrentek MultiSearch
Hasonló képkeresések
A Hasonló képkeresés egy további parancsot ad az Opera böngésző helyi menüjéhez, amellyel több keresőmotor segítségével is kereshet hasonló képeket.
Vagy bemutatásra kerül a hasonló képekkel ellátott kiadványok listája.
Keresési bővítmények a Mozilla Firefoxhoz
Webhelykeresés
Az előző két esethez hasonlóan a Mozilla Firefox böngészőhöz is létezik egy speciális kiterjesztés az internet bármely webhelyén belüli kereséshez.
A helyszíni keresés csak a Fire Fox esetében van beágyazva a böngésző meglévő keresőmezőjébe, az ikonját piros nagyító formájában hozzáadva a normál keresési ikon elé.
Az alapértelmezett keresőmotor módosítása a szokásos Mozilla Firefox kereséshez a webhelyeken belüli kereséshez is módosítja a keresőmotort.
A Site Search bővítmény be van építve a Mozilla Firefox helyi menüjébe, és ha bármelyik szót kiválasztja, amely a kezedbe kerül, a webhely összes olyan oldalát láthatja, ahol ez a szó szerepel, külön keresési eredményekben.
Keresés byffox szerint
Az ilyen „még kiforrott” nevű szoftvertermékek általában sok felhasználót bosszantanak azzal a ténnyel, hogy még csak utalnak is a javasolt eszköztár céljára.
És csak a leírás részletes megismerése után kell megtudnia, hogy pontosan mit kínál a "Softina from Vasya" vagy a "Repak játszott Petyától". Azonban egy ilyen komolytalan név mögött, mint a "Keresés byffox alapján", hasznos és intelligens funkció rejlik. Ez a bővítmény lehetővé teszi, hogy a böngésző helyi menüjét egy további keresési paranccsal töltse fel a kiválasztott szóra különböző keresőmotorok segítségével.
Ez a megjegyzés az előző cikk folytatása (lefordítva) "Blog keresése a Google AJAX Search API-val és a jQuery-vel".
Először demó :
Blogkeresés↓ A felbukkanó keresés "alapjául" egy jQuery modális ablak bővítményt választottam az ún. felfed . Könnyű, felesleges elemek nélkül, és nagyon könnyen csatlakoztatható. A telepítés feltárása .felfedni.css .
A következő lépés a plugin inicializálása" hangolás " forgatókönyv (tedd ide): felugró tartalom (ezt a poszt törzsébe tesszük):
Blogkeresés↓
illessze be ide a „Blog keresése a Google AJAX Search API és a jQuery segítségével” cikk összes keresési kódját.
A kódon belüli megjegyzésem szerint másolja be a teljes "google keresőt" oda amiről most szó esik. A css stíluslapon növelnie kell a fehér négyzet területét.
És az utolsó lépés az link a modális ablakhoz , amely lehet szöveges vagy grafikus. Linkkód képként (a bejegyzés törzsében is): felfed , egy modális ablakbővítmény, kétféle animáció létezik: fade and fadeAndPop , az effektus állítható sebessége: animációs sebesség: 300 , valamint a teljes ablak bezárásának lehetősége a halvány háttérre kattintva: closeonbackgroundclick: igaz .
Ezek a beállítások a "konfigurációs" szkriptbe vannak írva (lásd fent):
$("#myModal").reveal(( animation: "fadeAndPop", //fade, fadeAndPop, none animationspeed: 300, //milyen gyorsak az animációk closeonbackgroundclick: true, //ha rákattint a background will modal close? dismissmodalclass: "close-reveal-modal)" //az az osztály zár be a gombot
Vagy ezek az opciók csatlakoztathatók ezen keresztül link modális ablakon (lásd fent) keressen egy külön ablakban - tiszta kísérlet, és alaposabb testreszabást igényel.
