V dnešnom článku to poviem ako vytvoriť jednoduchý pluginjQuery. . A tak, že je zaujímavé vytvoriť ho, budeme dať skutočnú úlohu, že tento plugin by mal vykonávať. Bez toho, ako dlho som sa rozhodol vytvoriť plugin, že pri rolovaní stránky dole, to bude mať blok v rohu obrazovky, keď kliknutím na ktoré strana hladko posúvala nahor. Teraz sú takéto veci pomerne populárne a nájdete na mnohých stránkach.
Formulácia problému
Predtým, ako budete pokračovať, poďme naše úlohy do niekoľkých etáp:
- Keď užívateľ scrupujete stránku viac ako jednu výšku obrazovky, potom by mal byť obrazovka hladko v dolnej časti obrazovky.
- Po kliknutí na tento blok sa stránka musí automaticky prejsť na začiatok stránky.
- Ak používateľ zvolávate stránku, blok sa musí automaticky skryť
Požiadavky na plugin
Plugin musí mať nastavenia:
- ak chcete zadať obrázok, ktorý sa zobrazí v bloku
- nastavenie výšky posúvania obrazovky, po ktorej sa zobrazí blok pre rolovanie
Takže, s požiadavkami a úlohami prišiel. Teraz môžete bezpečne prejsť na implementáciu tohto pluginu na jQuery.
Pre vytvorenie pluginu na jQuery Je potrebné umiestniť kód pluginu do samostatného súboru, ktorý by bol názov: jquery.nolding_plangin.js. . Toto je taký štandard. Takže je lepšie držať sa ho.
Takže naša plugin bude nazývaný scrlebník , takže vytvorte prázdny súbor s názvom jquery.scroller.js.
Ak chcete vytvoriť plugin, je potrebné namietať. jquery.fn. Pridajte novú metódu, kde názov metódy je názov nášho pluginu. Pozrime sa na príklad:
Ako ste mali čas, aby ste si všimli, namiesto znamenia dolára $ Používame slovo jQuery. . To sa robí tak, že náš plugin nie je v rozpore s inými knižnicami Javascript (napríklad Mootools, prototyp), ktoré tiež používajú znamenie dolára $ . Ak ste oboznámení s znakom dolára $ , potom musí byť celý zásuvný kód prekonať vo výslednom samotnom uzavretí:
V prvom a poslednom riadku tohto kódu sme vyhlásili anonymnú funkciu, ktorá trvá len jeden parameter $ a okamžite ho nazýval a objekt bol prenesený ako parameter jQuery. . Teraz môžeme bezpečne používať značku dolára vo vašom kódexe a nemyslieť na žiadne konflikty s inými knižnicami.
Ďalším krokom je implementácia schopnosti klásť niektoré nastavenia pre plug-in, ktorý sme hovorili vyššie. Je implementovaný nasledujúcim spôsobom:
(Funkcia ($) ($ .fn.scroller \u003d Funkcia (možnosti) (// Predvolené hodnoty Možnosti \u003d $ .EXTEND (IMG_SRC: "Images / ScrolpUp.png", Výška: 1.5,), Možnosti);); ) (jQuery);
Všetky parametre sú uložené v premennej možnosti. . Inicializovať túto premennú, používame libráciu $ .EXTEND () , Prvý argument, ktorý označuje objekt, s predvolenými parametrami, druhým argumentom je parametre špecifikované užívateľom. V našom prípade sa používajú 2 parametre:
- img_src. - Úplná cesta k obrázku na serveri, ktorá sa zobrazí v bloku v dolnej časti stránky. Predvolené je - "Images / ScrollUp.png"
- výška - Výška posúvania stránky, po ktorej sa blok zobrazí. Predvolená hodnota je - 1,5
Pred pokračovaním by sa malo povedať niekoľko slov o kontexte. Vnútri plugin vyhradené slovo toto Tento odkaz na objekt jQuery. Ku ktorému je plugin nazývaný. Ale keď sa použije kódu pluginu zavolaj späť funkcie potom tam toto - Toto je odkaz na pôvodný dom domu. Chyby vznikajú, keď sú vývojári opäť $ (toto) Alebo naopak, zabudnite to urobiť. Nižšie v texte pochopíte všetko.
Tak, pohybujú sa. Vzhľadom k tomu, náš plugin môže byť okamžite nazývaný do súboru prvkov ( $ ("Trieda"). Scroller ();) Potom potrebujeme tento okamih, aby sme zohľadnili a obchádzali všetky prvky, ktoré vstúpili do tejto súpravy a na každý použitý náš plugin. Je to realizované veľmi jednoduché. Použitá funkcia každý () . Pozrime sa na príklad:
Ako vidíte v tomto prípade toto - Toto je odkaz na objekt JQuery, takže tu nie je potrebné urobiť $ (toto) ! Okrem toho naša plugin vráti tento objekt toto Pretože kľúčové slovo sa používa návrat. . Toto sa vykonáva, aby sa zachovali JQuery Call Reťaze. Koniec koncov, krása a stručnosť reťazcov jquery hovorov je jedným z dôvodov, prečo je jQuery tak populárny. Preto, aby váš plugin podporoval tieto reťazce hovorov, musíte sa uistiť, že váš plugin vráti to toto Vo svojej hlavnej funkcii
Teraz môžete začať implementovať funkciu plug-in. Vyhlasujme niekoľko premenných pre ďalšiu prácu.
(Funkcia ($) ($ .fn.scroller \u003d Funkcia (možnosti) (// Predvolené hodnoty Možnosti \u003d $ .EXTENDE ((IMG_SRC: "Images / Scrolup.png", Výška: 1.5,), možnosti); návrat TENTO PRÍPRAVA (FUNKCIA () (// Odkaz na Native Dom Var $ This \u003d $ (THO), // Výška výšky posúvacieho prvku \u003d $ this.Height (), obsah \u003d "
Aby som sa v budúcnosti nemali zamieňať, vytvoril som miestnu premennú $ Toto ktorý pridelil objekt JQuery. Tiež identifikovala počiatočnú výšku objektu, pretože je z neho, ktorá bude závisieť od toho, kedy sa blok objaví v dolnej časti obrazovky. Okrem toho vytvorili HTML označenie nášho bloku a vložili ho do objektu, pre ktorý bol plný plugin.
Teraz zostáva zavesiť udalosť zvitok Pre vybratú položku a v závislosti od nastavení plug-in a prejdite cez stránku, výstup alebo skryť blok v dolnej časti obrazovky. A tiež po kliknutí na tento prístroj prejdite cez stránku na začiatku obrazovky.
(Funkcia ($) ($ .fn.scroller \u003d Funkcia (možnosti) (// Predvolené hodnoty Možnosti \u003d $ .EXTENDE ((IMG_SRC: "Images / Scrolup.png", Výška: 1.5,), možnosti); návrat tento .EACH (funkcia () (var $ this \u003d $ (this), výška \u003d $ this.Height (), obsah \u003d "
Aby ste mohli používať tento plugin na vašej stránke, musíte byť medzi tagmi
Pripojte samotnú knižnicu JQuery a samotný plugin.V poslednej dobe, v procese vytvárania úverov, čelia problému - bolo potrebné umiestniť "akordeón". Nie je to ani plugin, ale len súbor funkcií JQuery. Postupne sa kód stal zložitejší a v určitom okamihu som si uvedomil, že je potrebné zariadiť ho samostatným pluginom. Zjednodušuje jej podporu a môže byť vyradený podľa potreby.
Nikdy som napísal jquery-plugins, takže som mal na Google trochu a nájsť príklady a tutoriály. Z nejakého neznámeho dôvodu, takmer všetky vodiace lišty obsahujú neuveriteľné množstvo nepotrebných informácií, kde sa vyskytuje nejasnosť na 2 minútovú čítanie, pretože to znamená, že čítanie je dokonale rozobraté v JS, a v jemnosti JQuery, čo je nesprávne nesprávne. :)
Preto som sa rozhodol napísať môj manuál určený pre nepripravený čitateľa.
Začnime s úlohou. Urobme si určitý kód JQuery, ktorý sa má vydať ako plug-in. Nebudeme komplikovať úlohu, vezmime si niečo veľmi jednoduché, napríklad pokles triedy prvku v kliknutí (poďme nazvať "počiatočný kód").
JS Kód: $ (". Kliknite na tlačidlo"). Kliknite na položku (Funkcia () ($ (toto) .toggleclass ("T-Red")); HTML kód:
Do triedy.click sme držať "Kliknite na tlačidlo", ktorý zmení svoju triedu CSS na T-Red. Metóda TogGleclass umožňuje / zakáže triedu pre každé kliknutie.
Po konverzii tohto kódu do pluginu, bude možné ho volať takto:
$ (". Kliknite na tlačidlo"). MYCLICK ();
Ide o typickú výzvu pluginu JQuery. Bude žiaduce poskytnúť možnosti, aby bolo možné nastaviť ľubovoľnú triedu CSS. Nech je to:
$ (". Kliknite na tlačidlo"). MYCLICK (((na: "t-zelené"));
Nuž, navyše by bolo skvelé nastaviť triedu CSS v údajoch Atribút HTML, ktorý vám umožní zadať priamo v HTML Markupi:
Takmer všetky pluginy JQuery sú teraz postavené na jednej šablóne rámu. Pre komplexné plug-iny sa tento rám dokončuje, aby pripojili metódy a iné "čipy", ale v našom prípade je všetko veľmi jednoduché - máme jednu základnú funkciu.
(Funkcia ($) (// jquery-pygging funkcia $ .fn.myclick \u003d funkcia (možnosti) (// Možnosti var Config \u003d $ .EXTEND (((), (OP1: "", OP2: ""), Možnosti) ;
Linka $ .fn.myclick nastaví spôsob, ako spôsobiť plugin zvonku (myclick). Odporúča sa použiť takýto názov tak, aby nebol v rozpore s inými pluginmi.
Možnosti sú stanovené takým spôsobom, že v prípade ich neprítomnosti pridelila nejaký druh predvolenej hodnoty.
Hlavná () funkcia skutočne vykonáva hlavnú prácu pluginu. Pri volaní plug-in bude automaticky vykonaná v riadku tohto zariadenia (funkcia () (hlavná ($ (THO));); . Ak sa rozhodnete zmeniť jej meno, nezabudnite vykonať zmeny av tomto kódexe.
Teraz zvážiť hlavné (). Jeho parameter E nie je nič iné ako používaný prvok. Náš zdrojový kód sa presunie na túto funkciu v tomto formulári:
Funkcia Hlavná (E) (E.CLICK (funkcia () .toggleclass ("t-červená"));)
Tento istý "počiatočný" kód, iba sme použili premennú E namiesto $ (". Kliknite na tlačidlo").
Teraz pridajte možnosti. Všetko je tu veľmi jednoduché:
Var config \u003d $ .extend ((), (na: "t-červený"), možnosti);
Máme jednu možnosť. Získajte ho do hlavných () funkcií, ako je tento: config.to. V tomto prípade obsahuje premenná konfigurácie všetky možnosti a config.to konkrétne vybrané. CSS Trieda štandardne môžete nastaviť ľubovoľne. Hlavná () funkcia bude teraz taká:
Funkcia hlavná (E) (E.CLICK (funkcia () .toggleclass (config.to)));)
Teraz môžete nastaviť možnosti pri volaní pluginu, ale stále potrebujeme pridať schopnosť zmeniť ich / sadu prostredníctvom atribútov údajov. Budeme používať celú funkciu JQuery - Funkciu údajov (). Vracia hodnotu zadaného atribútu (bez predpony "údajov -").
Funkcia Hlavná (E) (var na \u003d edata ("to"); ak (! Až) (to \u003d config.to) e.click (funkcia () ($ (toto) .toggleclass (to))); )
Po prvé, získame atribút dát "na" v rovnakej premennej. Kontrola: Ak nie je atribút (nie je špecifikovaný), premenná je priradená hodnota z možnosti.
Ukázalo sa, že takýto plugin:
(Funkcia ($) ($ .fn.myclick \u003d funkcia (možnosti) (((), (na: "t-červená"), možnosti); Funkcia Hlavné (E) (var na \u003d e .data ("na" ); Ak (! Až) (to \u003d config.to) e.click (funkcia () ($ (this) .toggleclass (to)));) toto )); Vrátiť sa tým;);)) (jQuery);
Podobné jednoduché pluginy sú vhodné na použitie, kde potrebujete zmeniť parametre pre viac blokov na stránke.
Ako už viete, jednou z hlavných vlastností knižnice JQuery je veľmi výhodné vyhľadávanie položiek a možnosť ďalšej manipulácie s nimi. Zoznam týchto manipulácií je teda možné rozšíriť organizovaním nových metód pre objekt JQuery. Dajte do samostatného súboru, takéto rozšírenia sú pluginy pre knižnicu JQuery.
Ďalej, popisujú pravidlá pre vytvorenie vlastných plug-inov. Ako príklad implementujeme samostatný plnohodnotný plugin. Jeho funkčnosť bude spočívať pri pridávaní nového správania pre vybrané prvky - zmena farby, keď sa vznášate kurzor. Poďme zavolať na responzívneblokové plugin (citlivý blokový prvok).
Vytvorenie súboru s pluginom a jeho pripojením
Zvyčajne sa pluginy Javascript nachádzajú v samostatných súboroch. Pre súbory s pluginmi JQuery existuje dohoda o ich mene - mala by uspokojiť formát jquery.planginname.js. Súbor s naším pluginom sa teda bude musieť nazývať jquery.responsiveblock.js.
Aby bol náš plugin dostupný na stránke, musíte súbor pripojiť pomocou knižnice JQuery a potom súbor JS s naším pluginom plugin:
~ Lt ~ script src \u003d "jquery.min.js" ~ gt ~ ~ ~ lt ~ skript src \u003d "jquery.responsiveblock.js" ~ gt ~ ~ Lt ~ / skript ~ gt ~
Základ pre plugin
Spôsob podľa toho, v tele spôsobu, vždy obsahuje aktuálny predmet JQuery (ten, na ktorom bola zavolaná metóda). Aby sme obišli všetky vybrané položky samostatne, používame metódu .ECH (). Aby bolo možné pokračovať v reťazci metód, naša metóda bude musieť vrátiť aktuálny objekt JQuery:
(Funkcia ($) (jquery.fn .responsiveblock \u003d funkcia () (var robiť \u003d funkcia () ();)) (jQuery);
Pridanie vlastností pluginu
Väčšina pluginov vyžaduje nastavenia. Napríklad v našom plugíne bude veľmi užitočné označiť farbu prvku, zatiaľ čo kurzor a farba po návode nie je indukovaná. Existuje jedna jednoduchá možnosť na organizovanie nastavení na plugini JQuery. Umožní vám, aby ste zadali zoznam vlastností, ako aj ich predvolené hodnoty. Jeho hodnoty týchto vlastností, s týmto, môžu byť nastavené v čase inštalácie zásuvnej do položky, v prvom parametri:
(Funkcia ($) (jquery.fn .responsiveBlock \u003d funkcia (možnosti) ( // Nastavte zoznam vlastností a poukazujte na predvolené hodnoty pre nich. // Ak ste nazývaní zvykom // Možnosti pre niektoré z nich, potom sa automaticky prepíšu // príslušné predvolené hodnoty Možnosti \u003d $ .EXTEND ((Defcolor: "Biela", HoverColor: "červená"), možnosti); va make \u003d funkcia () // Implementácia metódy metódy so samostatným prvkom stránky ); Vrátiť toto .EACH (urobiť); // Výsledkom je, že metóda responsiveBlock vráti aktuálny objekt JQuery ); )) (jQuery); // Teraz môžete nastaviť predvolené nastavenia plugin: $ ("div: prvý") .responsiveBlock (); // alebo zadajte svoje hodnoty niektorých alebo všetkých nastavení $ ("Div: posledný") .responsiveBlock ((Defcolor: "#bbbb")); $ ("Ul") .responsiveBlock ((DEFCOLOR: "#AAAAAAAAA", HoverColor: "Zelená"));
(Pre lepšie pochopenie tohto príkladu stojí za to oboznámiť s vymenovaním funkcie $ .EXTEND).
Vyššie uvedená Billet je najčastejšou verziou šablóny pre plug-iny JQuery. Preto, ak sa rozhodnete napísať plugin, môžete bezpečne začať s ním (prirodzene s vaším názvom plugin a zoznam nastavení).
Ďalšia implementácia
~ Lt ~! DOCTYPE HTML ~ GT ~ ~ ~ LT ~ LT ~ HTML ~ GT ~ ~ LT ~ LT ~ HEAD ~ GT ~ ~ LT ~ LT ~ Skript SRC \u003d "http://code.jquery.com/jquery-tentest.min.js" ~ gt ~ ~ Lt ~ / skript ~ gt ~ ~ lt ~ štýl ~ gt ~ DIV (polstrovanie: 10px; okraj: 5px; Hranica: 3px Solid Red Red) ~ Lt ~ / Head ~ gt ~ ~ lt ~ ~ Body ~ gt ~ ~ lt ~ div ~ gt ~ blok na strane ~ lt ~ skript ~ gt ~ ~ lt ~ script ~ gt ~ ~ ~ lt ~ script ~ gt ~ (funkcia ($) (jquery.fn.responsiveBlock \u003d funkcie (možnosti). Defcolor: "Biela", // Farba prvku nad ktorým nie je žiadny hovercolor kurzor: "červená" // farba prvku, ku ktorej je kurzor indukovaný), možnosti); var robiť \u003d funkcia () (// tu Zariadenie bude obsahovať samostatný // DOM prvok, ku ktorému bude potrebné použiť // VPLYVY US $ (tento) plugin ("pozadia-color", možnosti.defcolor) .mousenter (funkcia () ($ (Toto). CSS ("pozadie -color", možnosti.Hovercolor);)) .MOUSELEAVE (funkcia () ($ (this) .css ("na pozadí-color", možnosti.Defcolor);););) );););)) (jQuery); $ ("DIV"). Responsiveblock (); ~ Lt ~ / skript ~ gt ~ ~ lt ~ ~ ~ lt ~ / html ~ gt ~
Generovanie udalostí
Knižnica JQuery vám umožní usporiadať svoje vlastné udalosti na položkách a ďalej nainštalovať ich manipulátory (ako na udalosti ONCLICK alebo ONMUSEEMOVE). Ak chcete vygenerovať svoje vlastné udalosti na vybraných položkách, musíte použiť metódu .trigger () a môžete nainštalovať ich manipulátory pomocou .O (). Preto môžu pluginy poskytnúť nielen novú funkčnosť, ale aj pridružený systém udalostí, ktoré budú môcť používať akýkoľvek používateľ vášho pluginu.
Aby sa názvy udalostí vášho plugin mohli prekročiť mená iných ľudí, používajte menné priestory. Pre to vhodné použiť názov samotného pluginu.
V našom plugíne môžete organizovať stavovú udalosť, ktorá sa vyskytne pri zmene stavu prvku (kurzor je vyvolaný alebo nie):
(Jquery.fn .responsiveBlock \u003d funkcia (možnosti) (možnosti \u003d $ .EXTEND ((Defcolor: "White", // farebný prvok nad ktorým žiadny kurzor HoverColor: "červená" // farba prvku, ku ktorej je kurzor indukovaný ), Možnosti); va make \u003d funkcia () // tu premenná bude obsahovať samostatnú // Dom prvok, ku ktorému budete musieť použiť // nárazový plugin $ (this) .cs ("na pozadí farbe", možnosti.Defcolor) .MOUSEENTER (funkcia () ($ (this) .css ("na pozadí-color", možnosti.) // - volacie udalosti) .mouseleave ("Funkcia (). ); Vrátiť toto .EACH (urobiť); ); )) (jQuery); // Teraz sa manipulátory stanice udalosti uvedú na prvky stránky: $ ("DIV") .on ("responsiveblock.statechange", psovod);
pluginy JQuery sú medzi najcfektívnejšími komponentmi pri budovaní lokality a skutočne akúkoľvek webovú aplikáciu. Umožňujú rozšíriť svoju funkciu. Tento článok uvádza najužitočnejšie pluginy v roku 2012. Pre pohodlnejšie vyhľadávanie všetky pluginy sú rozdelené do nasledujúcich kategórií: rozloženie webových stránok - pluginy, štítky na navigáciu, pluginy formulárov, plug-iny pre vytváranie posuvníkov, plug-iny pre grafy a grafy, efekty na obrázky a iné. Aj medzi tieto pluginy majú pluginy, ktoré vám pomôžu vytvoriť vaše adaptívne aplikácie.
Plugins Layout stránky
vyrovnanie. JQuery je plugin, ktorý vám umožní vytvoriť blokovú štruktúru miesta. Umožňuje vyrovnať výšku a šírku akéhokoľvek prvku.
Nový plugin pre adaptívne usporiadanies.Fretile vám umožňuje vytvárať prvky akejkoľvek veľkosti, zatiaľ čo potreba vytvoriť pevnú veľkosť stĺpcov mriežky zmizne.
Gridster.js jQuery plugin pre budovanie drag and drop - grid. Tiež použitie môže byť dynamicky odstránené a pridávať prvky z mriežky.
Zoomooz.js. - Toto je ľahko použiteľný jQuery-plugin na zvýšenie akéhokoľvek prvku webovej stránky. Môžete ľahko pridať efekt priblíženia jednoduchým pridaním triedy "ZoomTarget" na ľubovoľný prvok HTML. Zvýšenie je možné resetovať kliknutím na stránku. Plugin bol testovaný v Internet Explorer 9, Safari 3 +, Firefox 3.6 +, Opera a Chrome.
Wookmark je plugin na vytvorenie dynamickej multiscount šablóny.
jquery skrytá je plugin, ktorý vám umožní pridať ľubovoľnú položku, aj keď je skrytý.
Stellar.js - jquery-plugin, ktorý poskytuje účinok paralaxu pre položky.
Plugin JQuery, ktorý pridáva účinok skutočného preklopenia stránok počas prechodu medzi sekciami. Použité hardvérové \u200b\u200bzrýchlenie. Pracuje na tabletách a smartfónoch.
Plugin pre adaptívne typografiu. To vám umožní používať volič generujúci dokonalú veľkosť písma.
Umožňuje stavať animované pohyby na stránke, vrátane všetkých možných transformácií.
Pluginy na navigáciu
HorizontalNAV je plugin JQuery, ktorý natiahne horizontálnu menu tak, aby zodpovedala celej šírke nádoby. Ak ste sa niekedy pokúsili vytvoriť účinok správneho napätia navigačného menu na kontajneri CSS z projektu, potom určite viete, aké ťažké je to urobiť pre kompatibilitu s krížovým prehliadačom. Tento plugin to jednoducho.
stickyMojo je jednoduchý, rýchly a flexibilný zásuvný bočný panel "Lipuchy" na jQuery. Pracuje s Firefoxom, Chrome, Safari a IE8 + (dobre podporuje starú verziu, tj).
dDSLICK je plugin, ktorý vám umožní vytvoriť rozbaľovacie ponuky s obrázkami a opismi.
Plugin pre jednoduchú organizáciu rozbaľovacích panelov. Plugin podporuje prácu s cookies na uloženie stavu panelov. Medzi možnostiach majú referenčné funkcie na konfiguráciu procesu otvárania a zatvárania sekcií.
Plugin na vytvorenie skladacích blokov, ktoré môžu obsahovať akékoľvek údaje v obmedzenom priestore.
Tvorba pluginov
Plugin vám umožňuje určiť úroveň zložitosti hesla.
JQuery-plugin na vizualizáciu procesu preberania súborov. Podporuje drag & drop a vytvorí okamžité náhľady pre fotografie.
Plugin, ktorý určuje a kontroluje čísla kreditných kariet. Umožňuje určiť typ kreditnej karty.
Plugin na filtrovanie údajov. Môžete filtrovať údaje na štítku a pre niekoľko značiek a kategórií.
Plugin, ktorý kontroluje vstup e-mailov na správnosť pripraveného zoznamu (tu môžete zahrnúť najobľúbenejšie poštové služby pošta.ru, yandrex.ru, gmail atď.).
Pluginy na vytváranie posúvačov a karuselín
Plugin, ktorý vám umožní ovládať prechody pomocou myši, touchPad a klávesnice. Pre prechody, ktoré sú štandardne nastavené, môžete pridať ďalšie, ktoré sú tiež v zdrojovom súbore.
iosslider.
iosslider je plugin pre adaptívny cross-prehliadač.
RSLIDER - Full-Screen Adaptive Slider. Oh sa automaticky prispôsobí šírke obrazovky.
Fresco je adaptívny like-plugin. Môže byť použitý na vytvorenie úžasných programov prekrytia, ktoré fungujú perfektne na všetkých veľkostiach obrazovky vo všetkých prehliadačoch, na všetkých zariadeniach.
BOKBLOCK: Plugin Flip Obsah
Bookblock je jquery-plugin, ktorý môže byť použitý na vytvorenie komponentov vo forme brožúr, ktoré vám umožnia vytvoriť navigáciu ako "Stránky otáčania". Tu môžete použiť akýkoľvek obsah, či už obrázky alebo text. Plugin transformuje konštrukciu len v prípade potreby (inými slovami, len keď sa stránka otáča) a používa sa prekrývajúce sa a tiene, aby poskytli realizmus.
Adaptér je ľahký obsahový posuvník, ktorý poskytuje vývojárom jednoduché rozhranie, aby vytvorili krásne 2D alebo 3D alimáciu diapozitívov. V súčasnej dobe existuje podpora pre 3D vlastnosti v prehliadačoch WebKit a Firefox. Všetky 2D prechody boli testované v IE6 + a iných moderných prehliadačoch.
Nepretržité kolotoč s niekoľkými užitočnými funkciami.Je ľahké konfigurovať a podporuje aj staré prehliadače.
Rhinoslider. - Docela flexibilné jQuery. Plugin Slideshow. Ponúka sa nielen rôzne účinky, ale je možné pridať svoje vlastné štýly, efekty a funkcie do posúvača.
Sekvencia je jQuery-plugin pre rolovanie obsahu s pôvodným spôsobom a poskytuje vám úplnú kontrolu. Môžete použiť akýkoľvek typ obsahu; Bude posúvať nekonečne. Tu sa používa sémantická značka, ako aj adaptívne šablóny a zariadenia založené na dotykovej technológii.
GLISSE.JS je jednoduchá, adaptívna a ľahko prispôsobiteľná giremná galéria.
Pluginy pre grafy a grafy
Morris.js je ľahká knižnica, ktorá používa JQuery a Raphaël, aby uľahčili čerpanie časových plánov.
Jquery Org Graf je plugin, ktorý vám umožní vytvoriť stromové štruktúry s vnorenými prvkami. Údaje sa zadávajú do zabudovaného neusporiadaného zoznamu, ktorý robí plugin neuveriteľne ľahko použiteľný.
Pluginy pre typografiu
Bacon.js je plugin JQuery, ktorý vám umožní zabaliť text okolo krivky bez pokoja alebo čiary.
TextAlizer - jquery plugin na vytvorenie krásnych účinkov cez text. Podporovaná práca v: Chrome, Safari 4+, Firefox 3.5+, tj 6,7,8,0, Opera 10.6+, mobilné Safari (iOS 4)
Slabtext je veľmi užitočný jQuery-plugin, ktorý rozjasňuje záhlavie pred zmenou veľkosti každého riadku, aby ste naplnili dostupnú oblasť horizontálne.
trunk8 je text Trigtele plugin v jQuery. Umožňuje znížiť veľký blok textu na menšiu časť pre predbežnú kontrolu.
Pluginy na vytvorenie rôznych efektov pre obrázky
Toto je plugin JQuery, ktorý používa filtre CSS3 na vytvorenie efektu sklopenia.
Plugin na implementáciu účinku adaptívnych obrázkov.
plugin JQuery, ktorý uľahčuje vytváranie obrázkových kariet. S týmto nástrojom je možné zvýrazniť alebo zvolený akýkoľvek mapový obraz, ako aj karta je možné ovládať rôznymi spôsobmi. Pracuje na všetkých hlavných prehliadačoch, vrátane programu Internet Explorer 6, nepoužíva blesk a nevyžaduje nič iné ako JQuery. Niektoré pokročilé efekty vyžadujú podporu HTML5, ale stále bude fungovať v starom prehliadačoch.
1. Implementácia portfólia pomocou galérie JQuery
Miniatúry projektov sa posúvajú pri zmene polohy kurzora myši v ľavom stĺpci. V oblasti obsahu je zväčšený obrázok zobrazený s názvom projektov, popisov a zoznam použitých technológií. Pri pohybe medzi miniatúrami, informácie o projektoch sa navzájom nahrádzajú ohromujúcim animovaným efektom. Keď kliknete na obrázok na stránke, ktorá opisuje, tiež sa zvyšuje pomocou animácie jQuery. Chcem tiež poznamenať úžasný elegantný vzhľad celej portfóliovej stránky. Pozrite sa na demo.
2. Super implementácia lokality-portfólia pomocou CSS a JQuery
Vynikajúca implementácia fotografického stránky-portfólia. Keď kliknete na položku menu z rozptýlených štvorcov, zozbiera sa oblasť s pevnou výškou a šírkou. Aby bolo možné umiestniť viac informácií do pevnej oblasti, rolovanie obsahu. Neobvykle implementovaná implementácia práce práce z portfólia: Keď kliknete na miniatúr, fotografia sa zobrazí ako obrázok na pozadí, ktorý sa automaticky zmenší, keď sa zmení okno prehliadača.
3. Nástenné portfólio na jQuery
Pôvodné riešenie pre vytvorenie online portfólia. Projektové bloky (miniatúry a krátky popis s odkazom) sa zobrazujú niekoľkými v rade, keď sa zmení okno prehliadača, bloky sú prerozdelené rovnomerne na stránke s animovaným efektom. Každý projekt môže mať niekoľko miniatúrnych obrázkov, prechod medzi ktorými sa vykonáva pomocou šípok. Keď kliknete na odkaz Otvorí stránku s kompletným popisom, na ktorom je text umiestnený na priesvitnú jednotku pevnej výšky s rolovaním. Ako pozadie pozadia sa používa škálovateľný obraz projektu. Vyzerá cool - pozri demonštráciu.
4. Smooth Jquery Rolling Stránky
Implementácia vertikálneho a horizontálneho rolovania.
5. JQuery Plugin "Draggible Image Boxs Grid"
Pretiahnutím mriežky pozostávajúcej z blokov s obsahom a obrázkami. Mriežka môže byť ťahaná myšou (stlačte ľubovoľné tlačidlo myši a potiahnite požadovanú stranu). Keď kliknete na miniatúry, hlavný obraz je nasadený na celej šírke obrazovky. Pri kliknutí na tmavého bloku s textom je oblasť odhlásený podrobnejším popisom.
6. Jedno-stránky portfólio stránky
Jednorazová stránka s animovaným zmenou obsahu. Na demo stránke prejdite cez karty Menu, aby ste videli účinok.
7. Zapnutie zobrazenia zobrazenia blokov na jQuery
Pomocou tohto pluginového pluginu jQuery "môžete implementovať prepínač na stránke, ktorou návštevník prepne zo zobrazenia tabuľky informácií k plnému zobrazeniu popisu blokov. Dokonale vhodné na implementáciu portfólia.
8. Šablóna pre stránku reštaurácie s galériou Jquery a mapa z Google
Originálne riešenie JQuery vytvorené pre stránku Cafe. Šablóna implementuje zaujímavú galériu JQuery, ktorá zobrazuje riad z ponuky. Obrázky v galérii sú zmenšené v závislosti od veľkosti okna prehliadača. Najprv sa galéria zobrazuje znížené obrázky s názvom a stručným popisom riadu, zatiaľ čo fotografia plnej veľkosti sa zobrazuje zatemnená v pozadí. Navigácia medzi dostupnými fotografiami sa vykonáva pomocou šípky alebo myši. Kliknutím myši v režime galérie odstránia miniatúry s popisom a poskytnete možnosť zvážiť pôvodné veľké obrázky natiahnuté na celú šírku okna. Ak sa chcete vrátiť do menu stránky z galérie, musíte kliknúť na odkaz v pravom hornom rohu. Okrem elegantnej galérie Chic Jquery v šablóne je mapa z Google veľmi efektívne integrovaná.
9. Plagin Plazm
Vytvorenie zvláštnych "steny" z fotografií alebo blokov HTML, ktoré môžu byť pretiahnuté pomocou myši cez obrazovku v pevnej oblasti.
10. plugin na zobrazenie prvkov okolo kruhu
Zobrazenie na stránke rôznych prvkov okolo obvodu zadaného priemeru.
11. Stránka-plug "stránky v rozvoji"
Stránka implementuje možnosť odosielania e-mailovej adresy, ktorá je zaznamenaná v databáze a ktorú môžete poslať oznámenie o otvorení stránky. Tiež je stránka zdobená malým prezentáciou implementovaným na základe JQuery Nivo Slider v plugin. 2.3.
12. Plugin QuickFlIP 2
Pri kliknutí na odkaz môžete zarobiť zaujímavý účinok otočnej vizitky.
13. Kliknite na položku JQuery
Myšlienkou je sledovať kliknutie používateľov. Ak chcete sledovať plugin v práci na demo stránke, vložte myšou a potom kliknite na tlačidlo "Analýza". A na priesvitnom pozadí sa zobrazia body, kde ste klikli myšou.
Implementácia klávesnice sympatickej obrazovky. Málo, za niečo, čo prídete šikovne.
15. Poznámky
Implementácia listov s poznámkami. Text je možné upravovať a scrapbooks sa vymažú alebo presúvajú cez obrazovku. Ak chcete zobraziť príklad, prejdite na demo demo stránku.
16. Hodnotenie na jQuery
17. HOVERATTRIBUTE.
Zaujímavý dizajn odkazov: Keď sa vznášate, zmení jeho polovice. Vyzerá v pohode.
18. JQuery Fancy Capture pre registračný formulár
Implementácia CAPTCHA pre registračný formulár. Plugin je sada čísel, ktoré potrebujú pretiahnuť a pokles vo vzostupnom poradí. Pomerne zaujímavý spôsob, ako potvrdiť, že registrácia je živá osoba, nie robota.
V dolnej časti obrazovky sa zobrazia tlačidlá, ktoré možno použiť na hladký posúvanie smerom nahor alebo nadol.
20. Prekladateľ. jQuery plug "JTextTranslate"
Plugin používa jazykové API Google a môže preložiť text do ľubovoľných jazykov poskytnutých spoločnosťou Google. Ak chcete preniesť, musíte kliknúť na ikonu vedľa odseku a z rozbaľovacieho zoznamu, aby ste vybrali jazyk, ku ktorému chcete preložiť.
21. plugin JQuery pre navigáciu na stránke
Vynikajúca implementácia rolovacích odkazov pre navigáciu stránok. Implementované pomocou jQuery.
22. plugin jquery "
Tento plugin JQuery vám umožní implementovať "Papier" Poznámky na vašej stránke.
23. JQuery Zapojenie "Catch404"
24. jquery plugin jbreadcrub
Plugin na vytvorenie animovaného reťazca navigácie "chleba crumbs"
25. Plugin "Reel"
26. JQuery plugin "tanečný parket"
jQuery plugin na implementáciu stránky s tovarom. Keď kliknete na produkt, zobrazí sa jeho popis.
27. JQuery Zapnutie "3D oblaku štítkov"
28. Volumetrické tlačidlá CSS
29. Animované Horizontálne rolovanie
jQuery efekt vertikálnej rolovania. Je ideálny pre implementáciu jednorazových stránok a portfóliových lokalít. Ak chcete zobraziť efekt, kliknite na položku ponuky na stránke Demo.
30. jquery "Systém hodnotenia" plugin
jQuery efekt na implementáciu hodnotenia niečoho. Farba kruhov a textu pod nimi sa líši v závislosti od toho, ktorý kurzor myši sa vznáša.
31. JQUERE Panel Magic
Plugin, ktorý implementuje navigáciu na lokalitu. Zároveň je vaša stránka reprezentovaná ako mriežka dokumentov, medzi ktorými sa vykonáva prechod so zaujímavým účinkom jQuery.
Tento plugin môžete jednoducho používať na vytvorenie malých stránok a webových aplikácií. Tiež nebude zlý, aby sa pozrel na stránky portfólia.
32. Indikátor načítania na MOOTOULLS, MOOGRESSBAR PLUGIN
Veľkolepé sťahovanie indikátora.
33. MOOTOOLS plugin "cwcomplete"
Pri vypĺňaní poľa vám plugin povie možné možnosti na plnenie pomocou AJAX, zatiaľ čo bude filtrovať a zobrazovať iba tie možnosti, ktoré spĺňajú text, ktorý už bol zadaný v poli.
34. Vynikajúci chat AJAX pomocou jQuery a CSS3
Pred začatím rozprávania musí návštevník zadať vašu prezývku a e-mail. Pravý stĺpec ukazuje, koľko ľudí je povolených v rozhovore. Použité technológie: PHP, MySQL, JQuery, CSS.
35. Implementácia stránky "Navrhnite projekt"
Návštevníci môžu pridať novú ponuku alebo hlasovanie za už existujúcich. Vynikajúce riešenie pre tých, ktorí chcú vedieť názor na ich publikum o stránke. Aj táto stránka môže byť použitá na akumuláciu nových nápadov pre ďalší rozvoj vášho projektu. Použité technológie: PHP, MySQL, JQuery, CSS
36. Implementácia hlasovania / prieskumu s PHP a JQuery
37. Hlasovanie o Ajax "Tinyditor"
Presná implementácia prieskumov podľa lokality. Použité technológie: jQuery, Ajax, PHP a MySQL.
Veľmi zaujímavé riešenie pre implementáciu hlasovania na stránke. Pretiahnutie blokov hore a dole, uchopte myš nad obrázkami, môžete ich usporiadať na stránke v ľubovoľnom poradí. Čím vyššie opustíte blok, tým lepšie sa odhaduje, a podľa toho, ak je blok umiestnený v dolnej časti, znamená to, že ste sa vám najviac páčili. Po vložení blokov v požadovanej sekvencii musíte kliknúť na tlačidlo "Odoslať ankety" pre zohľadnenie hlasu. Stránka s výsledkami zobrazuje výsledky hlasovania a počet hlasov návštevníkov. Použité technológie: CSS, PHP, MySQL, JQuery.
Jednoduchý systém komentárov na Ajax s kontrolou správnosti záznamu informácií. Komentáre sú uložené v databáze. Implementované pomocou: PHP, MySQL, CSS, JQuery.
40. Číslo na prevzatie súborov
41. Poznámky na stránke PHP
Použité technológie: PHP, JQuery, CSS.
Keď idete na položky ponuky, obsah je načítaný bez reštartujte stránku. Použité technológie: PHP, JQuery, CSS.
43. Vyhľadávanie stránok JQuery pomocou technológie Google
Predajné vyhľadávanie pomocou aplikácie Google AJAX Hľadať API. Pre návštevníkovi môžete poskytnúť možnosť vyhľadávať na vašej stránke a na internete. V tomto prípade môže byť vyhľadávanie vykonané nielen prostredníctvom stránok stránok, ale aj na obrázkoch a multimediálnych súboroch.
44. JQUYER DESIGN IMPOZÍCIE ON
Veľmi zaujímavý efekt, možno použiť pri implementácii portfólia. Keď kliknete na obrázok, stmavuje sa priesvitným pozadím a objaví sa nápis s popisom toho, čo chcete venovať pozornosť.
45. Implementácia stránky "Otázková odpoveď" s jQuery
jQuery implementácia stránky FAQ na stránke. V hornej časti stránky zobrazí zoznam otázok. Keď kliknete na otázku, stránka sa hladko prejdite na vybraté, a aktívna otázka s odpoveďou na ňu je zvýraznená inou farbou. Tiež v oblasti skutočného odozvy sa zobrazí odkaz na návrat do zoznamu otázok.
46. \u200b\u200bStránka na Ajax. Obsah je načítaný bez reštartu stránky
47. Zmeňte farebné pozadie a text pomocou jQuery
Farba sa líši, keď prejdete kurzorom myši. To môže byť vykonané tak, aby sa farba náhodne zmenila.
48. Sprievodca stránok pomocou jQuery
S týmto zaujímavým pluginom môžete predstaviť návštevníka so základnými funkciami vašej stránky, ak sa prvýkrát dostal. Pri načítaní stránky v pravom hornom rohu, blokuje blok s návrhom na strávenie prehliadky stránky. Ak návštevník prvýkrát išiel na vašu stránku, môže použiť hlavné funkcie pomocou malého sprievodcu. V tomto prípade je stránka zatemnená a potrebné bloky v každom kroku sú označené značkou. Ak už návštevník bol na vašej stránke skôr, môže to zatvoriť okno s ponukou lokality exkurzie.
49. Virtuálna prehliadka stránky JoyRide Kit
S týmto pluginom môžete zaviesť návštevníka s hlavnou funkčnosťou stránky. Vykonáva sa vo forme sekvenčného popisu prvkov. Návštevník môže vidieť všetky výzvy kliknutím na tlačidlo Ďalej, alebo zatvorte prehliadku online (ak nie je prvýkrát, čo zasiahne túto stránku), ktorá využíva kríž.