Fondamentali di jQuery

(function($){
    $.fn.myNewPlugin = function() {
        return this.each(function(){
            // fare qualcosa
        });
    };
}(jQuery));

$.fn.myNewPlugin = function() { //...

(function($){
    //...
}(jQuery));

$.fn.myNewPlugin = function() {
    return this.each(function(){
        // fare qualcosa
    });
};

var somejQueryObject = $('#something');

$.fn.myNewPlugin = function() {
    alert(this === somejQueryObject);
};

somejQueryObject.myNewPlugin(); 
// mostra un avviso con  'true'

$.fn.myNewPlugin = function() {
    return this.each(function(){

    });
};

(function($){
    $.fn.showLinkLocation = function() {
        return this.filter('a').each(function(){
            $(this).append(
                ' (' + $(this).attr('href') + ')'
            );
        });
    };
}(jQuery));

// Esempio di utilizzo:
$('a').showLinkLocation();

<!-- Prima che l'estensione sia chiamata: -->
<a href="page.html">Foo</a>

<!-- Dopo che l'estensione sia chiamata: -->
<a href="page.html">Foo (page.html)</a>

(function($){
    $.fn.showLinkLocation = function() {
        return this.filter('a').append(function(){
              return ' (' + this.href + ')';
        });
    };
}(jQuery));

(function($){
    $.fn.fadeInAndAddClass = function(duration, className) {
        return this.fadeIn(duration, function(){
            $(this).addClass(className);
        });
    };
}(jQuery));

// Esempio di utilizzo:
$('a').fadeInAndAddClass(400, 'finishedFading');

// definizione dell'estensione
(function($){
    $.fn.hoverClass = function(c) {
        return this.hover(
            function() { $(this).toggleClass(c); }
        );
    };
})(jQuery);

// utilizzare l'estensione
$('li').hoverClass('hover');

//
// creare una chiusura
//
(function($) {
  //
  // definizione dell'estensione
  //
  $.fn.hilight = function(options) {
    debug(this);
    // generazione delle opzioni principali 
    // prima di interagire
    var opts = $.extend({}, $.fn.hilight.defaults, options);
    // ittera e riformatta ogni elemento
    return this.each(function() {
      $this = $(this);
      // generazione delle opzioni specifiche 
      // per ogni elemento
      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
      // aggiornamento degli stili per ogni elemento
      $this.css({
        backgroundColor: o.background,
        color: o.foreground
      });
      var markup = $this.html();
      // si chiama la funzione per la formattazione
      markup = $.fn.hilight.format(markup);
      $this.html(markup);
    });
  };
  //
  // funzione privata per la depurazione
  //
  function debug($obj) {
    if (window.console && window.console.log)
      window.console.log('hilight selection count: ' + $obj.size());
  };
  //
  // definire ed esporre la funzione di formattazione
  //
  $.fn.hilight.format = function(txt) {
    return '<strong>' + txt + '</strong>';
  };
  //
  // opzioni predefinite
  //
  $.fn.hilight.defaults = {
    foreground: 'red',
    background: 'yellow'
  };
//
// fine della chiusura
//
})(jQuery);

$.widget("nmk.progressbar", {
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass("progressbar")
            .text(progress);
    }
});

$("<div></div>")
    .appendTo( "body" )
    .progressbar({ value: 20 });

$.widget("nmk.progressbar", {
    // opzioni predefinite
    options: {
        value: 0
    },

    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    }
});

$.widget("nmk.progressbar", {
    options: {
        value: 0
    },

    _create: function() {
        this.element.addClass("progressbar");
        this._update();
    },

    _setOption: function(key, value) {
        this.options[key] = value;
        this._update();
    },

    _update: function() {
        var progress = this.options.value + "%";
        this.element.text(progress);
        if (this.options.value == 100) {
            this._trigger("complete", null, { value: 100 });
        }
    }
});

Se l’estensione avrà qualche funzionalità che potrebbero essere annullate dall’utente, il modo migliore è quello di creare funzioni di callback annullabile. L’utente può annullare una funzione di callback o il suo evento associato nello stesso modo che viene annullato qualunque evento nativo: chiamando a event.preventDefault() o usando return false.
8.10: Vincolare a eventi del widget

var bar = $("<div></div>")
    .appendTo("body")
    .progressbar({
        complete: function(event, data) {
            alert( "Funzione di callback" );
        }
    })
    .bind("progressbarcomplete", function(event, data) {
        alert("Eventi bolla e molti gestori di supporto per una flessibilità estrema.");
        alert("Il valore della barra di avanzamento è " + data.value);
    });

bar.progressbar("option", "value", 100);

Perché l’istanza dell’estensione è direttamente legata all’elemento DOM, è possibile accedere all’istanza dell’estensione direttamente. Questo permette di chiamare i metodi direttamente nell’istanza dell’estensione invece di passare il nome del metodo come una stringa, dando la possibilità di accedere alle proprietà dell’estensione.

var bar = $("<div></div>")
    .appendTo("body")
    .progressbar()
    .data("progressbar" );

// chiamare un metodo direttamente 
// nell'istanza dell'estensione
bar.option("value", 50);

// accedere alle proprietà 
// nell'istanza dell'estensione
alert(bar.options.value);

$.nmk.progressbar.prototype.reset = function() {
    this._setOption("value", 0);
};