Come utilizzare jQuery UI biblioteca widget di

Creeremo una barra di avanzamento. Come mostrato negli esempi seguenti, che chiamando jQuery.widget() per completare, prende due parametri: un plug-in nome deve essere creato, un testo che contiene l'oggetto è una funzione di supporto plug-in. Quando la spina si chiama, si crea una nuova istanza di plug-in, tutte le funzioni saranno eseguite nel contesto di questo esempio. Questo due modi importanti plugin per jQuery standard diverso. Innanzitutto, il contesto è un oggetto, non un elemento DOM. In secondo luogo, il contesto è sempre un oggetto singolo, non un insieme.

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

Deve contenere il nome dello spazio dei nomi plug-in, in questo esempio, usiamo un custom namespace. È possibile creare un solo strato profondo dello spazio dei nomi, quindi, custom.progressbar è un efficace plug-in di nome, very.custom.progressbar non è una valida plug-in nome.

Abbiamo visto le parti biblioteca (Widget Factory) ci fornisce due proprietà. this.element è un oggetto jQuery contiene un elemento. Se chiamiamo l'oggetto plug-in jQuery che contiene più elementi, si creerà un'istanza di plug-in separato per ogni elemento e ogni istanza avrà un proprio this.element . La seconda proprietà, this.options , è un plug-in opzioni includono tutte le coppie nome / valore chiave hash (hash). Queste opzioni possono essere passate a plug-in, come segue:

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

Quando chiamiamo jQuery.widget() , che dando jQuery.fn (utilizzato per creare un sistema di plug-in standard) aggiungere la funzione di estendere jQuery. Nome funzione viene aggiunto in base al passaggio jQuery.widget() nome senza lo spazio dei nomi - "ProgressBar". opzione pass-Plug è quello di ottenere il valore impostato nel caso plugin. Come mostrato nel seguente esempio, siamo in grado di specificare un valore predefinito per ogni opzione. Nel progettare il vostro API, si dovrebbe essere a conoscenza dell'uso più comune di plug-in, in modo da poter impostare il valore predefinito appropriato e assicurarsi che tutte le opzioni veramente opzionale.

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

Chiamare i metodi di plug-in

Ora siamo in grado di inizializzare la nostra barra di avanzamento, si eseguire un'azione chiamando il metodo per l'istanza del plug-in. Per definire un metodo di plug-in, abbiamo solo passiamo jQuery.widget() riferimento a un oggetto funzione. Possiamo anche definire il metodo "privata" per il nome della funzione con un prefisso di sottolineatura.

$.widget( "custom.progressbar", {
 
    options: {
        value: 0
    },
 
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    },
 
    // Create a public method.
    value: function( value ) {
 
        // No value passed, act as a getter.
        if ( value === undefined ) {
            return this.options.value;
        }
 
        // Value passed, act as a setter.
        this.options.value = this._constrain( value );
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
 
    // Create a private method.
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

Per richiamare un metodo su un'istanza di plug-in, è possibile passare il nome del metodo al plugin jQuery. Se si chiama un metodo di accettare i parametri, è sufficiente passare il nome del metodo dietro questi parametri.

Nota: La funzione jQuery viene passato lo stesso nome del metodo utilizzato per inizializzare il plug-in per eseguire il metodo. Questo viene fatto per evitare l'inquinamento namespace jQuery mantenendo le chiamate di metodo a catena. Nei capitoli successivi, vedremo altri usi aspetto più naturale.

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({ value: 20 });
 
// Get the current value.
alert( bar.progressbar( "value" ) );
 
// Update the value.
bar.progressbar( "value", 50 );
 
// Get the current value again.
alert( bar.progressbar( "value" ) );

Utilizzare le opzioni

option() metodo viene fornito automaticamente il plug-in. option() metodo consente di ottenere e impostare le opzioni dopo l'inizializzazione. Il metodo come jQuery .css() e .attr() metodo: È possibile passare solo un nome come argomento è quello di utilizzare, si può anche passare un nome e un valore come apparecchio con o passando un nome di chiave coppie / valore hash per impostare più valori. Quando viene utilizzato come valore, un plug-in restituisce il nome dell'opzione ingresso corrispondente valore corrente. Quando viene utilizzato come un setter, widget di _setOption metodo sarà chiamato per ogni opzione è impostata. Siamo in grado di specificare un plug-in nel nostro _setOption metodo per riflettere il cambiamento opzioni. Modificare le opzioni per l'azione da eseguire in modo indipendente, siamo in grado di ignorare _setOptions .

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

Aggiungere callback

L'estensione più semplice è quello di aggiungere un callback in modo che gli utenti possano reagire quando si verificano cambiamenti nello stato di plug-in. Siamo in grado di guardare il seguente esempio di come aggiungere un callback per la barra di avanzamento quando la barra di avanzamento raggiunge il 100 per cento. _trigger() metodo accetta tre argomenti: il nome della richiamata, un callback evento jQuery iniziato oggetti, e un hash dei dati associati all'evento. Nome richiamata è l'unico parametro richiesto, ma si vuole implementare personalizzato dotato di utenti su plug-in, gli altri parametri sono molto utili. Ad esempio, se creiamo un plugin trascinabili, possiamo passare evento di trascinamento MouseMove quando attivato il callback, che permetterà agli utenti di rispondere all'evento in base all'oggetto fornito dalle coordinate x / y del trascinamento. Si prega di notare passato a _trigger() della manifestazione originale deve essere un evento jQuery invece di un eventi browser nativo.

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

funzione di callback essenzialmente solo un'opzione aggiuntiva, in modo da poter ottenere lo stesso come le altre opzioni e impostarle. Ogni volta richiamata, ci sarà un evento corrispondente viene attivato. Tipo di evento è di gran nome e il nome della funzione di callback per determinare la spina di collegamento. Richiamata ed evento accettano le medesime due argomenti: un oggetto evento e un hash dei dati associati con l'evento, particolarmente come illustrato nei seguenti esempi. Potrebbe essere necessario includere un plug-in funzioni per impedire agli utenti, al fine di fare questo, il modo migliore è quello di creare amore che potrà revocare callback. Gli utenti possono revocare callback o un evento relativo ad un nativo revocare qualsiasi evento con loro, sono chiamando event.preventDefault() o tornare false da raggiungere. Se si revoca richiamata, _trigger() metodo restituirà false , in modo da poter realizzare la funzione appropriata nel plug-in.

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({
        complete: function( event, data ) {
            alert( "Callbacks are great!" );
        }
    })
    .bind( "progressbarcomplete", function( event, data ) {
        alert( "Events bubble and support many handlers for extreme flexibility." );
        alert( "The progress bar value is " + data.value );
    });
 
bar.progressbar( "option", "value", 100 );

natura

Ora abbiamo visto come utilizzare il widget di biblioteca (Widget Factory) per creare un plug-in, diamo un'occhiata a come funziona realmente. Quando si chiama jQuery.widget() , crea una funzione di costruzione per il plug-in e impostare l'istanza plugin è passato come un oggetto prototipo. Tutte le funzioni vengono aggiunti automaticamente al widget viene da un widget di base di un prototipo, definito come jQuery.Widget.prototype . Quando si crea un plug-in caso saranno utilizzati jQuery.data memorizza sul elemento DOM originale, plug-in di nome come il nome della chiave.

Dal momento che l'istanza di plug-in direttamente legata all'elemento DOM, è possibile accedere direttamente il plug-in esempio, senza la necessità di attraversare i metodi di plug-in. Questo metodo consente di chiamare direttamente l'istanza del plug-in, senza la necessità di passare un nome di metodo di stringa, e si può anche accedere alle proprietà spina direttamente.

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar()
    .data( "progressbar" );
 
// Call a method directly on the plugin instance.
bar.option( "value", 50 );
 
// Access properties on the plugin instance.
alert( bar.options.value );

È inoltre possibile creare un'istanza del plug-in, senza metodi di attraversamento, e la possibilità di chiamare gli elementi costruttore direttamente:

var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") );
 
// Same result as before.
alert( bar.options.value );

Estensione del prototipo

costruttori Widget e prototipi più grande vantaggio è estensioni facili. Aggiungendo o modificando il prototipo metodo di spina, siamo in grado di modificare il comportamento di widget di tutte le istanze. Per esempio, se vogliamo aggiungere un metodo per la barra di avanzamento per ripristinare 0% progresso, possiamo aggiungere questo metodo per il prototipo, che sarà chiamato su tutti esempio plug-in.

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

Per i widget estese per maggiori dettagli e come creare un nuovo widget su un esistente widget di ulteriori dettagli, consultare il widget di esteso (Widget) dalle biblioteche membri (del Widget Factory) .

chiarire

In alcuni casi, l'applicazione consente all'utente di plug-in, e quindi annullare l'applicazione. È possibile _destroy() per fare questo metodo. In _destroy() all'interno di un metodo, si dovrebbe revocare tutte le azioni durante l'inizializzazione e post-utilizzo di plug-in fanno. _destroy() per .destroy() viene chiamato il metodo, .destroy() metodo è un plug-in casi in cui la rimozione di un elemento dalle associazioni di DOM chiamati automaticamente, in modo che possa essere utilizzato per la raccolta dei rifiuti. Base .destroy() il metodo è anche comunemente utilizzato per trattare con alcune operazioni di pulizia, come la rimozione dell'elemento DOM dall'istanza widget di citato, widget di unbind namespace tutti gli eventi dagli elementi, utilizzano unbind tutto _bind() aggiungere eventi.

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    },
    _destroy: function() {
        this.element
            .removeClass( "progressbar" )
            .text( "" );
    }
});

Chiudere le note

Component Library (Widget Factory) è un modo per creare uno stato per la spina. Ci sono altri modelli possono essere usati diversi, e ognuno ha i suoi vantaggi e svantaggi. Component Library (Widget Factory) risolve molti problemi comuni, e notevolmente migliora l'efficienza, ma anche di migliorare notevolmente la riusabilità del codice, che lo rende adatto per jQuery UI e altro stato dei plug-in.

Si noti che in questa sezione si usa il custom namespace. ui namespace è riservato plugin ufficiale jQuery UI. Quando si crea il proprio plug-in, è necessario creare il proprio spazio dei nomi. Al fine di meglio da dove spina, che appartiene alla gamma.