Kuriame savo jQuery pluginą

Šiame straipsnyje bus aprašoma apie tai kaip sukurti savo asmeninį jQuery pluginą su parametrais, metodais.

Nors yra pilna prikurta jau jQuery pluginų ir atrodo jie skirti visiems gyvenimo atvejams, bet kartais esami pluginai netenkina ir norisi turėti jQuery pluginą pagal savo poreikius. Šiame straipsnyje tą ir bandysime šiandien išsiaiškinti, kaip kuriami jQuery pluginai, jie interpretuojami ir naudojami.

Pradžia

Pirmiausia pabandykime sukurti paprastą neveiksnų pluginą, kuris nieko neatliks. Šiame straipsnyje kursime paprastą pluginą su pavyzdžiais, kuris pagal nurodytus parametrus rodys tik tam tikrą dalį teksto.
Taigi pradedame:

$.fn.pluginas = function(options) {
   return this.each(function() {
   });
};

Šis kodas tiesiog praplečia jQuery objektą papildoma funkcija, arba kitaip tariant sukuriamas naujas jQuery pluginas su nurodyta funkcija.

Žemiau pateiktas kodas nesiskiria nuo prieš tai buvusio. Jis naudojamas tam kad jūsų pluginas nesikirstų su kitomis bibliotekomis dėl simbolio $ kurį naudoja turbūt visos JavaScript bibliotekos:

(function($){
 $.fn.pluginas = function() {
    return this.each(function() {
    });
 };
})(jQuery);

Parametrai

Savo jQuery pluginui gali nustatyti norimus pagrindinius parametrus, o vartotojas juos galės bet kada pakeisti. Žemiau pateiktas pavyzdys su pagrindiniais parametrais:

(function($){
 $.fn.pluginas = function(options) {
  var defaults = {
   width: 300,
   param: "Parametras",
   param2: "Parametras2",
  };
  var options = $.extend(defaults, options);
  return this.each(function() {
  });
 };
})(jQuery);

Taigi aukščiau parodytame pavyzdyje matote kaip nustatomi plugino parametrai.

Plugino veikimas

Nustačius norimus parametrus, galite pradėti kurti jau vidinį pluginą kaip jis veiks ir ką atliks.
Žemiau pateiktas pavyzdys, tiesiog paima nurodytą HTML elementą ir jei jis egzistuoją išveda informaciją apie jį į JavaScript konsolę:

(function($){
 $.fn.pluginas = function(options) {   
  var defaults = {
   width: 300,
   param: "Parametras",
   param2: "Parametras2",
  };
  var options = $.extend(defaults, options);
  return this.each(function() {
   console.log($(this));
  });
 };
})(jQuery);

Paprastas naujai sukurto plugino panaudojimas:

$("#elementoID").pluginas();

Štai ir turime veikiantį jQuery pluginą. Toliau tik jūsų fantazijos reikalas ką norėsite sukurti.

Mindaugas

IT specialistas, PHP programuotojas. Sritys: PHP, MySQL, JavaScript, Ajax, jQuery, Arduino, (x)HTML, CSS, XML

More Posts - Website

Žymos: ,

2 komentarai

  1. Atgalinis pranešimas: jQuery nuosavas lango įskiepis | Blog.MySQL.Lt

Parašykite komentarą

El. pašto adresas nebus skelbiamas.