jQuery - odc. 7

Dziś z rzeczy bardziej zaawansowanych - notatki nt. rozszerzania i modyfikacji jQuery oraz nt. pisania własnych pluginów.

 

Własne prędkości

$.fx.speeds.slower = 2000;

Własne selektory

(function($)  {

$.expr[‘:’].mySel = function(elem, idx, meta, items) {

        return idx % 2 == 0;

}

$.expr[‘:’].mySel2 = function(elem, idx, meta, items) {

return idx  %  parseFloat(meta[3]) == 0;

}

}) (jQuery);

$(“div:mySel”).css(‘background-color’, ‘red’);

$(“div:mySel2(2)”).css(‘background-color’, ‘green’);

Dodawanie funkcji narzędziowych

(function($) {

$.log = function(value) {

      if (console)

           console.log(value);

}

}) (jQuery);

$.log(“aaa”);

Nadpisywanie wbudowanych funkcji

(function($) {

$.old_marge = $.merge;

$.merge = function(first, second, third) {

       …

};

$.fn.old_attr = $.fn.attr;

$.fn.attr = function(name, value) {

      

}

}) (jQuery);

Funkcja $sub do bezpiecznej modyfikacji kopii

 

Tworzenie pluginów

jQuery.myPlugin-x.y.js

1 namespace

(function($) {

$.fn.myPlugin = function() { 

        var newArray = [this[0]];

        return this.pushStack(newArray); //także:  this,  this.each()

};

}) (jQuery);

console.log($(‘div’).myPlugin());

Parametry

(function($) {

$.fn.myPlugin = function(options) {

         var settings = {};

         $.extend(settings, this.myPlugin.defaults, options);        

         return this.css(‘background-color’, settings.option1);

};

$.fn.myPlugin.defaults = {

         option1: ‘black’       

};

}) (jQuery);

$(‘div’).myPlugin();

$(‘div’).myPlugin({ ‘option1’:  ‘blue’});

Możliwa zmiana domyślnych ustawień przed definicją funkcji ready:

$.fn.myPlugin.defaults.option1 = ‘red’;

Przestrzenie nazw

myPlugin.js

(function($) {

var methods = {

        method1:  function() { … },

        method2:  function() { … }

}

$.fn.myPlugin = function(method) {

        if(methods[method])  {

              return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));

        } else if (typeof method == ‘object’ || !method ) {

              return methods.method1.apply(this, arguments);

        } else {

              $.error(‘…’ + method + ‘…’);

        }

}

}) (jQuery);

$(‘div’).myPlugin(“method1”);

$(‘div’).myPlugin();

Zwracanie pojedynczych wartości

(function($) {

$.fn.average = function() {

        var sum = 0;

        this.each(function() {

               sum += parseFloat($(this).html());

        });

        return sum / $(this).length;

};

}) (jQuery);

<div>1</div>

$(‘div’).average();

Utrzymywanie stanu

pluginu:

(function($) {

     var currentLevel = 0;

$.fn.myPlugin = function() {

        currentLevel++;

        if (currentLevel == 1)

               return this.css(‘background-color’, ‘yellow’);

        else

               return this.css(‘background-color’, ‘orange’);

};

}) (jQuery);

elementu DOM:

(function($) {

$.fn.myPlugin = function() {

        if (!this.data(‘level’))

               this.data(‘level’, ‘0’);

         var currentLevel = parseInt(this.data(‘level’)) + 1;

        this.data(‘level’, currentLevel);

        if (currentLevel == 1)

               return this.css(‘background-color’, ‘yellow’);

        else

               return this.css(‘background-color’, ‘orange’);

};

}) (jQuery);