Populární pluginy jquery. Jak napsat plugin v jQuery. Typografické pluginy

", ( text: $this.attr("title") )); // Pokud plugin ještě nebyl inicializován if (! data) ( /* Zde děláme některé další věci */ $(this).data( " tooltip", ( target: $this, tooltip: tooltip ) ) )), zničit: function() ( return this.each(function())( var $this = $(this), data = $); this. ) ( // ...), show: function() ( // ...), hide: function() ( // ...), update: function(content) ( // ... ) ); $.fn.tooltip = function(metoda) ( if (metody) ( return methods.apply(this, Array.prototype.slice.call(arguments, 1)); ) else if (typeof method === "object " | |. ! metoda) ( return methods.init.apply(this, arguments); ) else ( $.error("Metoda " + metoda + " v jQuery.tooltip"); ) ))(jQuery) ;

Používání dat vám pomáhá sledovat proměnné a stavy mezi voláními metod pluginu. Uložení všech dat do jednoho objektu usnadňuje přístup k nim a v případě potřeby je stejně snadné je smazat.

Psaní zásuvných modulů jQuery umožňuje co nejefektivněji využívat možnosti knihovny. A opětovné použití kódu vám šetří čas a zefektivňuje vývoj. Tady stručné shrnutí při psaní dalšího pluginu mějte na paměti:

• Vždy zabalte svůj plugin do funkce (function($)( // plugin zde ))(jQuery); .
• Nezahrnujte to do bezprostřední působnosti pluginu.
• Pokud váš plugin nepotřebuje vracet důležité hodnoty, pak to vždy vraťte, aby řetězení volání fungovalo.
• Neptej se velký počet argumenty při volání pluginu, je lepší předat objekt, který přepíše výchozí nastavení.
• Nepřidávejte více než jeden jmenný prostor na plugin do objektu jQuery.fn.
• Použijte jmenné prostory pro své metody, události a data.
• jQuery.fn se čte jako "jQuery effin".

V dnešní lekci si povíme stvořeníjqueryzapojit. Na našem webu byla zveřejněna více než jedna lekce pomocí jquery. Nejčastěji jsou tyto lekce založeny na jednoduché psaní kód spustit konkrétní úkol, ale vytváření zásuvných modulů z takového kódu poskytuje možnost znovu použít kód, protože ve formě zásuvného modulu tento kód získává větší flexibilitu díky použití možností (nastavení).

Vezmeme si například lekci. Posuvník je dobrým příkladem, protože je to docela populární věc a s flexibilním nastavením může fungovat více nebo méně různé úkoly(prezentace, kolotoč obrázků atd.).

Všechny požadavky na rozvržení jsou popsány ve výše uvedené lekci, takže se jimi nebudeme zabývat. Nazvěme náš budoucí plugin „mySimpleSlider“.

Plugin je nová metoda v objektu jquery proto pro vytvoření pluginu musíte do objektu jQuery.fn přidat funkci s její implementací, jak je znázorněno níže.

(function($)( jQuery.fn.mySimpleSlider = function(options)( // implementace metody bude zde); ))(jQuery);

Nyní začneme zvýrazňovat vlastnosti pluginu, které by se měly měnit v závislosti na každém konkrétním případu použití. Pro posuvník jsem vybral vlastnosti uvedené níže. V pluginu by měly být vlastnosti zapsány v následujícím tvaru:

Options = $.extend(( nextBtn:null, // tlačítko selektor "další" prevBtn:null, // tlačítko "předchozí" přepínač playBtn:null, // tlačítko selektor "přehrát/pauza":null, // "přepne " selector slideWidth:100, // krok rolování (px) delay:null, // Interval mezi automatickým rolováním trvání:500 // Rychlost přepínání snímků ), možnosti);

Poté uvnitř pluginu můžeme přistupovat k vlastnostem pomocí zápisu jako options.název_vlastnosti. Nyní můžeme začít psát funkce potřebné pro fungování pluginu, ale nejprve nastavíme globální proměnné ve vztahu k pluginu:

Posuvník Var = toto; // Objekt, na který je plugin aplikován var intervalID; // Ukazatel časovače

A tak začneme psát funkce. Jak můžete vidět z lekce, kterou jsme si vzali jako příklad, posuvník má ovládací prvky, které by neměly reagovat na akce uživatele při provádění animačních efektů, aby se předešlo konfliktům. Proto plugin vyžaduje funkce, které zakážou/povolí volání funkcí, když uživatel používá ovládací prvky. Tyto funkce jsou znázorněny níže.

// Funkce "zapnout" start())( // Po kliknutí na nextBtn $(options.nextBtn).on("click", next); // Volání funkce prev po kliknutí on prevBtn $(options.prevBtn ).on("click", prev Spuštění časovače pro automatické posouvání setTimer( /* Posouvání na vybraný snímek, pokud existují přepínače) */ if(options.selectors) ( $(options .selectors).on("click ", function())( selectSlide($(this).index()) ) ) ) // Funkce „Vypnutí“ finish())( // Zakázat volání funkcí všech události $(options.nextBtn).unbind() ; $(options.prevBtn).unbind(); $(volby.selektory).unbind( // Zastavení časovače automatického přepínání clearInterval(intervalID);

Kód pro spuštění časovače automatického posouvání byl přesunut do samostatná funkce setTimer protože to, zda spustit časovač nebo ne, závisí na několika parametrech nastavených při použití pluginu. Tato funkce je zobrazena níže.

Funkce setTimer())( // Pokud není nastaveno zpoždění, nespouštějte časovač if(!options.delay) return false; /* Pokud je zadáno tlačítko play/pause A je ve stavu "pause", nespouštět časovač */ if(options. playBtn) if($(options.playBtn).hasClass("pause")) return false // Spuštění časovače intervalID = setInterval(next, options.delay);

Funkce next())( /* Pokud je aktuální snímek poslední, pak se vraťte na první */ if(getIndex() == (getCount()-1)) ( selectSlide(0); ) // Jinak přejděte na další snímek else ( selectSlide(getIndex()+1); ) ) funkce prev())( /* Pokud je aktuální snímek první, pak přejděte na poslední */ if(getIndex() == 0) ( selectSlide(getCount()-1) // Jinak dojde k přechodu na předchozí snímek else ( selectSlide(getIndex()-1); ) );

Výše uvedené funkce používají další tři vlastní funkce, které jsou popsány níže.

// Funkce pro přepnutí na snímek //s vybranou funkcí indexu selectSlide(index)( // Zakázání spouštění událostí finish(); // Přepnutí na snímek $(slider).children("ul").animate ((left:options. slideWidth *-1*index+"px"), options.duration, start // Zobrazení vybraného snímku ve "stavovém řádku" $(options.selectors).removeClass("active"); (index).addClass("active" // Funkce, která vrací index aktuální funkce snímku getIndex())( return ($(slider).children("ul") .position().left / options. slideWidth) *(-1 ) // Funkce pro počítání počtu snímků funkce getCount() ( return $(slider).children("ul") .children("li").length; )

Naše funkce pluginu je dokončena udělat, který se spustí při zavolání pluginu. Bude obsahovat funkci pro povolení události a také kód, který spouští činnost tlačítka. přehrávání/pauza pokud existuje. Tento kód není součástí funkce Start protože se používá pouze jednou, když je plugin spuštěn. Tlačítko má dva stavy: hrát si A pauza, které jsou ovládány prostřednictvím tříd s příslušnými názvy. Funkce udělat má následující podobu:

Var make = function())( // Pokud je zadáno tlačítko přehrát/pozastavit if(options.playBtn) ( /* Když na tlačítko kliknete, změníme jeho stav na opačný než je aktuální a spustíme nebo zastavíme časovač v závislosti na stavu tlačítka */ $(options. playBtn).on("click", function())( if($(this).hasClass("pause")) ( $(this).removeClass( "pause" $(this).addClass("play" ) else ( clearInterval(intervalID); $(this).removeClass("play"); $(this).addClass("pause"); "); ) )); // Povolení reakce na události / / ovládací prvky start());

Po dokončení práce plugin vrátí funkci udělat:

Return this.each(make);

Tím končí naše lekce o vytváření vlastních pluginů. Hodně štěstí při realizaci vlastních nápadů a sbohem!

I přes tak velké množství dokumentace o psaní jquery pluginů není možné nikde najít ty dobré praktické rady. Neexistuje jediný příklad dokumentu, který by popisoval, jaké vlastnosti by měl mít dobrý plugin jquery. Ale dnes máte štěstí, v tomto článku se podíváme na 12 skvělých tipů, které vám pomohou napsat skvělý jquery plugin.

V tomto článku se méně zaměříme na samotný kód Java Script a zaměříme se spíše na praktické rady.

1 - Napište plugin pomocí správné šablony

Existují některé vzory, které do té či oné míry odpovídají „ správná cesta» pluginy pro psaní. Pokud se nebudete řídit těmito vzory, váš plugin nemusí fungovat správně. Zde je jeden z nejznámějších vzorů:

(function($, window, undefined)( $.fn.myPlugin = function(opts) ( var defaults = ( // nastavení vašich výchozích proměnných ) // rozšíření standardních možností o vlastní var options = $.extend(defaults, opts ||. ()); return this.each(function())( // řetězitelnost jQuery // akce pluginu ))(jQuery, okno);

Nejprve si vytvoříme anonymní funkci, která nás ochrání před používáním globálních proměnných. Ve výchozím nastavení jsou předány tři argumenty: $, window a undefined. Budou vyžadovány jádrem jQuery.

Dále napíšeme šablonu pluginu jQuery, $.fn.PluginName. Plugin tedy zaregistrujeme, aby jej bylo možné používat ve formátu $(selector).method() . Pokud to chcete vytvořit přímo místo psaní pluginu, který používá funkce, napište to takto:

$.PluginName = function(options)( // možnosti a akce pluginu)

Tento typ pluginu nemůže mít řetězec funkcí, bude se skládat z jedné přímé funkce. Například:

$.splitInHalf = function(stringToSplit)( var length = stringToSplit.length; var stringArray = stringToSplit.split(stringToSplit); return stringArray; )

V tomto kódu vrátíme pole řetězců. Pro větší přehlednost ještě jeden příklad:

$.getOddEls = function(jQcollection)( // návrat jQcollection.filter(function(index)( var i = index+1; return (index % 2 != 0); )); )

V tomto případě uživatel obdrží objekt jQuery, filtr, který je převzat z kolekce jQuery. Pluginy mohou vracet pole, řetězce, čísla, funkce a další datové typy.

2 – Zdokumentujte svůj kód (správně)

Nejdůležitější věcí, kterou můžete při publikování kódu udělat, je dokumentace. To znamená, že musíte vývojářům vysvětlit, co váš kód dělá nebo může dělat. Žádný uživatel nechce hádat, co váš kód umí.

Dokumentace je praxe, která nevyžaduje zvláštní pravidla pro jeho realizaci. I když už teď je jasné, že čím pohodlnější a podrobnější, tím lépe.

Je nutné dokumentovat jak uvnitř kódu (komentováním), tak vně - samostatným dokumentem, popisujícím každou třídu, metodu, volbu, jejich případy použití a tak dále.

3 – Udělejte svůj plugin flexibilní v nastavení

Nejoblíbenější pluginy poskytují možnost přístupu k proměnným, takže uživatelé mohou ovládat některé funkce pluginu. Dobrá věc je také možnost vlastního nastavení. Například při vytváření posuvného pluginu by relevantní nastavení byla rychlost posouvání, typ prezentace a rozšíření posuvného bloku.

Je také dobrým zvykem mít přístup k názvům tříd a ID, pomocí kterých vybíráme prvek DOM. Spolu s tím musí mít také přístup k funkci zpětného volání při každém jejím volání. Nebo když se posuvník zacyklí a vrátí se k prvnímu prvku (obrázku).

"Vaším úkolem je myslet na použitelnost a potřeby uživatelů."

Podívejme se na další příklad: plugin zadá požadavek na API, musí mít přístup k vrácenému objektu. Zde je příklad tohoto konceptu:

$.fn.getFlickr = function(opts) ( return this.each(function())( // zřetězení jQuery var defaults = ( // výchozí možnosti cb: function(data)(), flickrUrl: // standardní hodnoty ​​to call API ) // rozšíření možností o vlastní var options = $.extend(defaults, opts || ()); asynchronní funkce potom callback // předá API objekt, který byl vrácen $.ajax(flickrUrl, function(dataReturned)( options.cb.call(this, dataReturned); )); )); )

Tento kód nám umožňuje přístup k datům pomocí další řádek:

$(selector).getFlickr(function(fdata)( // data flickr v objektu fdata ));

Dalším způsobem přístupu k datům je použití háčků jako možností. Ve verzi jQuery 1.7.1 a vyšší můžeme po zavolání našeho pluginu použít .on(eventName, function()) k použití chování pluginu v vlastní funkce uživatelů. Například níže uvedený plugin je dobrým příkladem toho, jak to implementovat:

$.fn.getFlickr = function(opts) ( return this.each(function(i,el)( var $this = el; var defaults = ( flickrUrl: "http://someurl.com" ) var options = $. extend(defaults, opts || ()); $.ajax(flickrUrl, function(dataReturned)( $this.trigger("callback", dataReturned); )).error(function())( $this.trigger(" chyba ", dataReturned); )); )); )

To nám dává možnost zavolat plugin getFlickr a připojit k němu některá „přání“.

$(selector).getFlickr(opts).on("callback", function(data)( // action )).on("error", function())( // zpracování chyb ));

Možná si ani neuvědomujete, jak důležité je, aby byl váš plugin jQuery flexibilní a přizpůsobitelný. Čím složitější je váš plugin, tím více nastavení by měl obsahovat.

4 - Nepoužívejte příliš mnoho konfigurací

Navzdory předchozím slovům je velkou chybou používat příliš mnoho velké číslo nastavení. Například při vývoji uživatelského rozhraní je velmi výhodné používat pluginy, které mají všechny výchozí argumenty.

$(selektor).myPlugin();

Obecně to někdy není reálné, protože uživatel chce mít možnost přizpůsobit funkčnost. V tomto případě musíte poskytnout jak „výchozí“ možnost, tak možnost přizpůsobení pluginu. Ale zkuste použít pouze požadované parametry, jak ukazuje tento příklad načítání tweetů (plugin používá pouze jeden parametr „username“).

$(selektor).fetchTweets("jcutrell");

Tyto pluginy jsou mezi vývojáři velmi oblíbené... trvá to tweety a zabalí je do značky odstavce, která vyžaduje pouze zadání uživatelského jména.

5 - Umístěte instrukce CSS do samostatného souboru

Přirozeně to platí pouze pro určité pluginy... ale zkuste do nich vložit všechny instrukce CSS samostatný soubor. To usnadní vytváření uživatelského rozhraní.

Většina pluginů obsahuje obrázky a CSS styly. Nezapomeňte ale na druhý tip – CSS styly dokumentujte i s obrázky. Je nepravděpodobné, že by vývojáři chtěli procházet kód, aby našli, co potřebují změnit.

Nejpohodlnější je použít styling založený na přístupu třídy/ID. Ale třídy a ID by také měly být přístupné a popsané v dokumentaci, aby uživatel nemusel zjišťovat, co se tam děje.

6 – Uveďte příklady použití vašeho pluginu

Pokud nemůžete uvést příklady schopností vašeho pluginu, nezačínejte je psát. Uživatelé se na něj nebudou dlouho dívat, jednoduše odejdou hledat jiného.

Není to těžké, protože jste vývojář pluginů. Nebuďte líní. Zde je několik dobrých nápadů pro příklady:

• Příklad „Hello World“ je vždy vhodné použít v pluginech, které pracují s HTML a CSS.
• Rozšířené příklady – poskytují příležitost vidět všechny aspekty funkčnosti pluginu. Příklady by měly ukázat co nejvíce možností a možností.
• Příklady integrací – pokud má váš plugin možnost používat jiné pluginy. Nezapomeňte ukázat, jak do kódu integrovat další plugin.

7 - Napište plugin, který je kompatibilní s většinou verzí jQuery

jQuery, jako každá správná knihovna, roste a vyvíjí se. Některé staré metody již nejsou dostupné, některé nové se zavádějí. Dobrý příklad Toto je metoda .on(), což je komplexní řešení delegování událostí. Pokud napíšete plugin pomocí této metody, lidé, kteří používají jQuery 1.6, budou vynecháni. Nemyslím tím, že by váš kód měl obsahovat zastaralé metody, ale nezapomeňte ve své dokumentaci uvést verzi jQuery, kterou používáte.

8 - Seznam změn

Spolu s aktualizací kódu pluginu pod nová verze jQuery, musíte také sledovat a dokumentovat všechny aktualizace. Nejlepší způsob, jak to udělat, je s pomocí všech. slavná služba GitHub. Toto je veřejné úložiště, kde můžete ukládat všechny verze pluginu, changelog a další.

9 - Napište oblíbený plugin

Buďme upřímní, některé pluginy jsou nešikovné a najdou se i takové, které se pluginy nazvat vůbec nedají. Pojďme si tedy napsat oblíbené pluginy! Pamatujte, že svět nepotřebuje další slider plugin, těch je už dost.

Pokud se přece jen rozhodnete napsat plugin pro sociální sféru vývojářů, najděte si důvod, proč byste jej měli napsat. Jak rádi říkáme: „Proč znovu vynalézat kolo“? Samozřejmě někdy nové a nejlepší způsoby stejné věci jsou vítány. Ale musí to mít pádné praktické důvody.

10 - Poskytněte zkrácenou verzi kódu

Taková malá, ale velmi rozumná rada! Díky komprimované verzi je váš plugin populárnější. Pro vývojáře je také důležité vědět, kolik bude váš produkt „vážit“.

Při komprimaci kódu nezapomeňte uvést nekomprimovanou verzi.

11 – Váš kód je příliš srozumitelný

Když napíšete plugin jQuery, očekává se, že jej budou používat ostatní... že? Z tohoto důvodu by měl být váš kód pluginu co nejčitelnější. Pokud vše nacpete do jednoho řádku nebo nesémanticky pojmenujete proměnné, bude kód obtížně čitelný. Dobře naformátovaný kód, je to pěkný doplněk dokumentace. Co takhle dlouhá jména proměnné, nebojte se, můžete jen komprimovat kód.

Pokud pojmenujete proměnné „a“ nebo „x“, je to špatně!

Pokuste se také snížit počet řádků v každé funkci. To je snadnější na pochopení a logičtější.

12 - Test

Doufám, že svůj kód vždy otestujete, že? Pokud ne, jak jej můžete publikovat, pokud si nejste jisti jeho funkčností. Ruční testování je vždy důležité, ale pokud obnovíte stránku v prohlížeči, abyste otestovali funkčnost pluginu, není to správné. Doporučuji vám používat nástroje jako Qunit, Jasmine, Mocha.

Dokončovací myšlenky

Pokud plánujete napsat plugin jQuery, mějte na paměti tyto tipy. Možná mi něco uniklo. Jestli víš co ještě pozitivní vlastnosti musí mít dobrý plugin, dejte mi vědět do komentářů. Přeji vám kreativní úspěch!

V dnešním článku vám řeknu, jak vytvořit jednoduchý plugin projQuery. A aby bylo jeho vytvoření zajímavější, dejme tomu skutečný problém, kterou by měl tento plugin provádět. Bez váhání jsem se rozhodl vytvořit plugin, který při rolování stránky dolů zobrazí blok v rohu obrazovky a po kliknutí se stránka plynule posune nahoru. V dnešní době jsou takové věci docela populární a lze je najít na mnoha stránkách.

Formulace problému

Než budeme pokračovat, rozdělme náš úkol do několika kroků:

• Když uživatel posune stránku dolů o více než jednu výšku obrazovky, ve spodní části obrazovky by se měl hladce objevit blok s obrázkem šipky nahoru
• Když kliknete na tento blok, stránka by se měla automaticky posunout na začátek stránky
• Pokud uživatel posune stránku nahoru, blok by se měl automaticky skrýt

Požadavky na plugin

Plugin musí mít následující nastavení:

• k určení obrázku, který se objeví v bloku
• nastavení výšky rolování obrazovky, po které se objeví rolovací blok

Takže jsme vyřešili požadavky a úkoly. Nyní můžete bezpečně přejít k implementaci tohoto pluginu v jQuery.

Na vytvoření pluginu jQuery musíte umístit kód pluginu do samostatného souboru, který bude mít název: jquery.plugin_name.js . To je takový standard. Takže je lepší se toho držet.

Náš plugin se tedy bude nazývat scroller , takže vytvoříme prázdný soubor s názvem jquery.scroller.js

K vytvoření pluginu potřebujete objekt jQuery.fn přidat novou metodu, kde název metody je název našeho pluginu. Podívejme se na příklad:

Jak jste si možná všimli, místo znaku dolaru $ používáme slovo jQuery . To se děje tak, aby náš plugin nebyl v konfliktu s jinými javascriptovými knihovnami (například Mootools, Prototype), které také používají znak dolaru $ . Pokud jste více zvyklí pracovat se znakem dolaru $ , pak musí být veškerý kód pluginu zabalen do samotného uzavření volání:

V prvním a posledním řádku tohoto kódu jsme deklarovali anonymní funkci, která přebírá pouze jeden parametr $ , a okamžitě jej zavolal a předal mu objekt jako parametr jQuery . Nyní můžeme bezpečně používat znak dolaru v našem kódu a nemyslet na žádné konflikty s jinými knihovnami.

Dalším krokem je implementace možnosti nastavení některých nastavení pluginu, o kterém jsme hovořili výše. Toto se zavádí následujícím způsobem:

(function($)( $.fn.scroller = function(options)( //Výchozí hodnoty ​​options = $.extend(( img_src: "images/scrollup.png", height: 1.5, ), options); ) )(jQuery);

Všechny parametry jsou uloženy v proměnné možnosti . K inicializaci této proměnné použijeme funkci $.extend() , jehož prvním argumentem je objekt s výchozími parametry, druhým argumentem jsou parametry zadané uživatelem. V našem případě se používají 2 parametry:

• img_src — úplná cesta k obrázku na serveru, která se zobrazí v bloku ve spodní části stránky. Výchozí je "images/scrollup.png"
• výška — výška rolování stránky, po které se objeví blok. Výchozí hodnota je - 1,5

Než budeme pokračovat, je na místě pár slov o kontextu. Vyhrazené slovo uvnitř pluginu tento toto je odkaz na objekt jQuery , ke kterému je plugin volán. Ale když, v kódu pluginu jsou použity zpětné volání funkce pak tam tento je odkaz na nativní prvek DOM. K chybám dochází, když vývojáři věci přeženou $(toto) nebo to naopak zapomenou udělat. Níže v textu vše pochopíte.

Tak pojďme dál. Protože náš plugin lze volat přímo na sadu prvků ( $(".třída").scroller();), pak musíme vzít tento okamžik v úvahu a projít všechny prvky, které jsou součástí této sady, a na každý aplikovat náš plugin. To je velmi snadné implementovat. Použitá funkce každý() . Podívejme se na příklad:

Jak můžete vidět v v tomto případě tento je odkaz na objekt jQuery, takže to zde nemusíte dělat $(toto)! Náš plugin navíc tento objekt vrací tento , protože je použito klíčové slovo vrátit se . To se provádí pro podporu řetězců volání jQuery. Koneckonců, krása a stručnost volacích řetězců jQuery je jedním z důvodů, proč je jQuery tak populární. Proto, aby váš plugin podporoval tyto řetězce volání, musíte zajistit, aby to váš plugin vrátil tento ve své hlavní funkci

Nyní můžete začít implementovat funkcionalitu samotného pluginu. Pojďme deklarovat několik proměnných pro další práci.

(function($) ( $.fn.scroller = function(options) ( //Výchozí hodnoty ​​options = $.extend(( img_src: "images/scrollup.png", height: 1.5, ), options); return this .each(function())( //odkaz na nativní prvek DOM var $this = $(this), //Výška rolovatelného prvku height = $this.height(), content = "

", scrollup = $(content).appendTo("body"); )); ); ))(jQuery);

Aby nedošlo k záměně v budoucnu, vytvořil jsem lokální proměnnou $toto , kterému byl přiřazen objekt jQuery. Určili jsme také počáteční výšku objektu, protože na ní bude záviset, kdy se blok objeví ve spodní části obrazovky. Kromě toho jsme vytvořili html značku našeho bloku a vložili ji dovnitř objektu, pro který byl plugin volán.

Teď už jen zbývá akci pověsit svitek , pro vybraný prvek a v závislosti na nastavení pluginu a rolování stránky zobrazit nebo skrýt blok ve spodní části obrazovky. A také když kliknete na tento blok, posuňte stránku do horní části obrazovky.

(function($) ( $.fn.scroller = function(options) ( //Výchozí hodnoty ​​options = $.extend(( img_src: "images/scrollup.png", height: 1.5, ), options); return this .each(function())( var $this = $(this), výška = $this.height(), content = "

", scrollup = $(content).appendTo("body"); $this.scroll(function())( if($(this).scrollTop() >= height*options.height)( //zobrazení posouvání tlačítko nahoru scrollup.fadeIn( ) else( //skryje rolovací tlačítko scrollup.fadeOut(); ) )); ("click",function() ( $("html,body").animate((scrollTop:0),500; ))( $(this).css("kurzor",). "ukazatel"); )) (jQuery);

Aby bylo možné používat tento plugin na svém webu potřebujete mezi tagy propojte samotnou knihovnu jQuery a samotný plugin.

Takže jste si zvykli na jQuery a rádi byste věděli, jak napsat svůj vlastní plugin. Úžasný! Jste tam, kde máte být. Rozšíření funkčnosti jQuery pomocí pluginů a metod je velmi výkonné a může vám i vašim kolegům ušetřit mnoho hodin vývoje tím, že vaše nejčastěji používané funkce zabalíte do pluginů. Tento příspěvek nastíní v obecný obrys, základy, nejlepší metody a běžné chyby, které je třeba vzít v úvahu při psaní pluginu.

Začínáme

Začněme psát plugin JQuery přidáním nové metody do objektu jQuery.fn, kde název metody je název vašeho pluginu:

JQuery.fn.myPlugin = function() ( // sem umístěte kód pluginu);

Ale počkej! Kde je můj znak dolaru, který znám a miluji? Je stále k dispozici, ale musíte se ujistit, že váš plugin nebude v konfliktu s jinými knihovnami, které mohou také používat znak dolaru (Mootools, Prototype). Chcete-li to provést, musí být kód vašeho pluginu umístěn v samotném uzávěru volání.

(function($)( $.fn.myPlugin = function() ( // zde je kód vašeho pluginu); ))(jQuery);

To je lepší. Poté mohou ostatní knihovny změnit znak $, jak chtějí, vás to neovlivní. Uvnitř uzávěru se $ bude rovnat jQuery.

Kontext

Nyní máme obal, můžeme začít psát skutečný kód pluginu. Ale než to uděláme, rád bych řekl pár slov o kontextu. Uvnitř pluginu je vyhrazené slovo toto odkaz na objekt jQuery. Ale když jsou v kódu pluginu použity funkce zpětného volání, pak se jedná o odkaz na nativní prvek DOM. K chybám dochází, když vývojáři udělají $(this) ještě jednou, nebo to naopak zapomenou udělat

(function($)( $.fn.myPlugin = function() ( // není potřeba to dělat $(this), protože // "toto" už je objekt jquery// $(toto) bude znamenat totéž jako $($("#element")); this.fadeIn("normal", function())( // ale zde je odkaz na nativní objekt DOM a pro práci s ním // musíte udělat toto $(this) )); ); ))(jQuery); $("#element").myPlugin();

Ahoj světe!!!

Nyní, když rozumíme kontextu pluginů jQuery, pojďme napsat plugin, který skutečně něco dělá.

(function($)( $.fn.maxHeight = function() ( var max = 0; this.each(function() ( max = Math.max(max, $(this).height()); )); return max ))(jQuery); var nejvyssi = $("div").maxHeight(); // vrátí výšku nejvyššího div

Jedná se o jednoduchý plugin, který pomocí metody .height() vrací výšku nejvyššího prvku DIV na stránce.

Podpora řetězce volání

V předchozím příkladu plugin vrací celočíselnou hodnotu, výšku nejvyššího DIV na stránce, ale často je cílem pluginu jednoduše nějak změnit sadu prvků a předat je další metodě v řetězci volání. Krása a stručnost řetězců volání jQuery je jedním z důvodů, proč je jQuery tak populární. Chcete-li tedy podporovat řetězce volání v pluginu, musíte zajistit, aby to váš plugin vrátil ve své hlavní funkci.

(funkce($)( $.fn.lockDimensions = function(type) ( return this.each(function() ( var $this = $(this); if (!type || type == "width")) ( $ this.width($this.width()); if (!type || type == "výška") ( $this.height($this.height()); ) )); $("div").lockDimensions("šířka").css("barva", "červená");

Protože plugin to vrací v bezprostředním těle své funkce, udržuje řetězení volání a s kolekcí jQuery lze nadále manipulovat metodami jQuery, jako je .css . Pokud tedy váš plugin nevrací hodnotnou hodnotu, měli byste ji vždy vrátit v bezprostředním těle funkce pluginu. Parametry, které předáte při volání pluginu, jsou navíc předány jako argumenty funkci pluginu. Ve výše uvedeném příkladu je tento argument type a když je volán, je mu dodána hodnota "width". Mimochodem, výše uvedený plugin opravuje výšku nebo šířku každého bloku na stránce v souladu s jeho aktuálními rozměry.

Výchozí nastavení a možnosti

Pro složitější a vlastní pluginy, které podporují mnoho možností, nejlepší možnost bude mít výchozí nastavení, které lze přepsat nebo rozšířit (pomocí $.extend) při přímém volání pluginu. Takže místo volání pluginu s mnoha argumenty jej můžete zavolat jedním argumentem, což je objekt s poli a hodnotami, které byste chtěli ve výchozím nastavení přepsat. Zde je návod, jak se to dělá.

(function($)( $.fn.tooltip = function(options) ( var settings = ( "location" : "top", "background-color" : "blue" ); return this.each(function() ( / / pokud možnosti existují, zkombinujte je // s výchozími hodnotami if (options) ( $.extend(settings, options); // pořadí kombinací je důležité) // kód pluginu zde )); $("div.tools").tooltip(( "umístění" : "vlevo" ));

V tomto příkladu se po zavolání pluginu tooltip s příslušnými volbami pole umístění ve výchozím nastavení přepíše na hodnotu „left“. Ve výsledku bude nastavení vypadat takto:

( "umístění" : "vlevo", "barva pozadí" : "modrá" )

Je to skvělý způsob, jak nabídnout plně přizpůsobitelný plugin, aniž by vývojář musel vyplnit všechna nastavení. Tito. Pokud je vývojář se vším spokojený, může plugin nazvat takto:

$("div.tools").tooltip(); // všechna nastavení zůstanou výchozí

Jmenný prostor

Správné jmenné prostory pro váš plugin jsou velmi důležitou součástí vývoje pluginu. Správně pojmenovaný plugin bude mít velmi nízkou šanci na přepsání jinými pluginy nebo kódem. Správné pojmenování metod vám také usnadní život, protože vám pomůže lépe sledovat vaše konkrétní metody, události a data. Cílem je jednoduše, promyšleně pojmenovat svůj plugin. Podívejte se na následující příklad

alert($("#myid1").html())// nejprve metoda vrátí správnou hodnotu Content1 jQuery.fn.html = function())( return "Hello World"; ) alert($("#myid1" ").html ()) // a poté "Ahoj světe";

Metody pluginu

Plugin by za žádných okolností neměl v objektu jQuery.fn zabírat více než jedno jméno.

(function($)( $.fn.tooltip = function(options) ( // THIS); $.fn.tooltipShow = function() ( // VELMI); $.fn.tooltipHide = function() ( // BAD ); $.fn.tooltipUpdate = function(content) ( // !!! ))(jQuery);

Tento kód zaplňuje objekt $.fn. To se doporučuje, protože to může rušit až $. Fn jména. Chcete-li to vyřešit, měli byste shromáždit všechny metody vašeho pluginu do jednoho objektu a volat metodu podle názvu řetězce

(function($)( var methods = ( init: function(options) ( // THIS ), show: function() ( // JIŽ ), hide: function() ( // LEPŠÍ))), update: function ( obsah) ( // !!! ) ); $.fn.tooltip = function(method) ( // logika pro volání metody if (metody) ( return methods[ metoda].apply(this, Array.prototype.slice.call(arguments, 1)); ) else if (typeof method === "object" || ! metoda) ( return methods.init.apply(this, arguments); ) else ( $.error("Metoda " + metoda + " v jQuery.tooltip neexistuje") )); ))(jQuery); $("div").tooltip(); // volání metody init $("div").tooltip(( // volání metody init s parametry foo: "bar" )); $("div").tooltip("skrýt"); // volání metody hide $("div").tooltip("update", "Toto je nový obsah!"); // volání metody update s parametry

Tento typ architektury pluginu vám umožňuje zapouzdřit všechny vaše metody do uzavření pluginu a volat metody zadáním názvu řetězce metody jako prvního parametru v pluginu a poté libovolného Extra možnosti, které budete pro tuto metodu potřebovat. Tento typ metod a architektury zapouzdření je standardní pro pluginy jQuery a používá se v bezpočtu pluginů, včetně pluginů a widgetů v jQueryUI.

Události

Méně známou funkcí metody bind je, že umožňuje nastavit události pro jeden jmenný prostor. Pokud váš plugin vyvolá nějakou událost, je dobrým zvykem svázat událost s vaším jmenným prostorem. Tímto způsobem, pokud jej později potřebujete deaktivovat, můžete tak učinit, aniž byste zasahovali do jiných událostí, které mohly být vázány na stejný typ události. Můžeš použít jedinečná jména Vaše události přidáním ".<название плагина>".

(function($)( var methods = ( init: function(options) ( return this.each(function())( $(window).bind("resize.tooltip", methods.reposition); )); ), zničit : function() ( return this.each(function())( $(window).unbind(".tooltip"); )) ), reposition: function() ( // ... ), show: function( ) ( // ... ), hide: function() ( // ... ), update: function(content) ( // ...) ); metody) ( return methods.apply(this, Array.prototype.slice.call(arguments, 1)); ) else if (typeof method === "object" || ! metoda) ( return methods.init.apply(toto , argumenty ) else ( $.error("Metoda " + metoda + " neexistuje v jQuery.tooltip"); ) ))(jQuery); $("#zábava").tooltip(); // o nějaký čas později... $("#fun").tooltip("destroy");

V tomto příkladu, když je plugin tooltip inicializován metodou init, naváže metodu reposition na událost resize okna ve jmenném prostoru "tooltip". Později, pokud vývojář potřebuje zničit tooltip, můžeme zakázat události spojené s pluginem předáním jeho názvu, v tomto případě "tooltip", metodě unbind. To vám umožní bezpečně deaktivovat události pluginu, aniž by došlo k náhodnému rozpojení událostí, které byly svázány s událostmi mimo plugin.

Data

Při vývoji zásuvných modulů můžete často potřebovat zkontrolovat stav zásuvného modulu nebo zkontrolovat, zda již není inicializován tento prvek. Použití metody jQuery.data je skvělým způsobem sledovat a ukládat proměnné pro každý prvek. Nicméně, spíše než obsluhovat hromadu samostatných volání dat s různými názvy, je lepší použít jeden objekt obsahující všechny proměnné a přístup k tomuto objektu bude přes jedno jméno.

(function($)( var methods = ( init: function(options)) ( return this.each(function())( var $this = $(this), data = $this.data("tooltip"), tooltip = $ ("