Jak vytvářet pluginy s frameworkem jQuery

jQuery nám dává velkou flexibilitu při psaní kódu a je tak jednoduchý, že jej lze použít i s malými znalostmi a můžeme provádět velké projekty, které šetří spoustu času.
Jednou z možností Jquery je, že nám umožňuje její rozšíření za účelem vytváření nových funkcí v tomto rámci. Je dobré zvolit si vývoj pluginů, které jsou velmi užitečné pro naše webové aplikace, a poté je moci znovu použít nebo sdílet s komunitou.
Vývoj pluginu Jquery
Základní struktura pluginu je následující

 jQuery.fn.extend ({[b] miplugin [/ b]: funkce ([b] parametr [/ b]) {// kód pluginu}}); 

Parametry jsou volitelné. Vytvoříme několik příkladů, abychom pochopili, jak je plugin naprogramován
Plugin, který vrací zprávu po kliknutí na tlačítko, textové pole, odkaz atd.
Následující kód napíšeme do souboru plugin.js

 jQuery.fn.extend ({send: function (message) {// I define the send function and the message parameter $ (this) .click (function () {// if the function was activated by a click alert (message); // zobrazit zprávu});}});

Vytvoříme strukturu nebo html stránku, která obsahuje tlačítko například pro odeslání

 // vyvoláme knihovnu jquery // vyvoláme pluginPoslat

Uložíme html a když jej spustíme z prohlížeče, klikneme na tlačítko a uvidíme, že funkce jquery zobrazí zprávu.

Vytvoříme další plugin může být ve stejném souboru js nebo v jiném, pokud chceme samostatné pluginy.
V tomto případě půjde o úpravu aspektu css tlačítka při jeho stisknutí, změníme barvu textu a pozadí.

 jQuery.fn.extend ({změna pozadí: funkce (pozadí, text) {// funkce a parametry $ (toto). kliknutí (funkce () {// při přístupu z kliknutí jQuery (toto). css ("pozadí- barva ", pozadí); // změna barvy pozadí jQuery (this) .css (" barva ", text); // změna barvy textu});}}); 

Pak musíme v tomto případě napsat html kód prvku, jehož ID bude pozadí

Změnit barvu

Funkci musíme také iniciovat, zbyly by nám dvě funkce

Kliknutím na tlačítko změnit barvu vidíme, že se použijí změny css.

V tomto smyslu můžeme provádět změny a přiřazovat funkce jakémukoli prvku html, například v html vytvoříme prázdný div s id zprávy:

Poté v pluginu pro odeslání změníme

upozornění (zpráva)

následujícím kódem, který při stisknutí tlačítka zveřejní zprávu uvnitř div

 $ ("# zpráva"). html ("Data odeslána"); 

Kliknutím na tlačítko Odeslat místo v dialogovém okně je nyní zpráva zapsána do div.

Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod