Vytvorte si svoj prvý jQuery plugin

Jednoduchý sprievodca vytvorením prvého jQuery pluginu.

Pre tých, ktorí už majú zlvádnuté základy jQuery tu máme jednoduchý návod ako si vytvoriť svoj prvý plugin (tiež nazývané ako rozšírenie). A práve vytváranie jQuery pluginu vedie do spontánne vykríknutého: "Môže to byť jednoduchšie?".

Niektorí z vás sa možno boja čo i len pomyslieť na vytvorenie vlastného pluginu. Verte alebo nie, je to jednoduchšie ako by sa zdalo. jQuery je prívetivé k vývojárom pluginov. Takže ak ste zvládli základy jQuery tak ste pripravený vytvoriť si vlastný plugin.

Neváhajme a poďme si predstaviť, že na stránke máte tip dňa. Tento plugin vám ho skráti na určitú dĺžku s tlačidlom, ktorý vám po stlačení zobrazí zvyšok.

Prvým našim krokom bude vytvoriť si js súbor do ktorého budeme písať náš JavaScript. Nazvime si ho napríklad jquery.orezat.js. A uložíme si doň tento kód:

Nemali by sme používať $ kôli možnej kolízií, preto využijeme jQuery funkciu, ktorá nám umožňuje použiť alias aký chceme. Budeme sa ale držať $.

Aby sme náš kód mohli testovať poďme si vytvoriť HTML, kde vložíme následujúci kód. Náš JavaScript súbor je uložený v hlavičke. Zatiaľ však nerobí to čo by sme chceli.

<html>
   <head>
      <title>Orez Plugin Test</title>
      <script src="js/jquery.js" type="text/javascript"></script>
      <script src="js/jquery.orezat.js" type="text/javascript"></script>

Vráťme sa ale k nášmu JavaScript kódu. Musíme mu pridať nejaké parametre, s ktorými budeme pracovať. Aktualizujme teda svoj plugin.

Parametre máme, poďme teda na zvyšok nášho kódu, ktorý sa na prvý pohľad môže zdať zložitý, avšak v prípade, že niektorým úsekom kódu nerozumiete, nahliadnite do dokumentácie.

(function($)
{
   $.fn.orezat = function(nastavenia)
   {
    
      var predvolene =
      {
         dlzka: 300,
         viacText: "viac",
         menejText: "menej",
         rozsirenieText: "..."
      };

return false;
         }
      });
   }
})(jQuery);

$(document).ready(function()
{
   $('.tip').orezat(
   {
      dlzka: 80,
      viacText: 'zobraziť viac',
      menejText: 'zobraziť menej'
   });
});

Napriek tomu, že kód nieje zložitý poďme si vysvetliť niektoré časti. Začiatok sme si spomínali skôr, je to jQuery funkcia, ktorá nám umožňuje využiť alias. Potom máme funkciu, ktorá poberá ako parametre nastavenia, ktoré majú svoje predvolené hodnoty. Tieto hodnoty sa ale dajú pri inicializácií meniť. A nakoniec máme samotný proces funkcie. Funkcia skráti element podľa nastavenia a pridáva tlačidlo, ktoré nám zobrazuje / skrýva rozšírenú časť textu.

shaddow

15.09.2009 | 12:54

celkom 0

Komentáre

Zatiaľ žiadne komentáre