jQuery UI widget usando espansione widget di biblioteca

widget di jQuery UI Library (Widget Factory) rende più facile la creazione di widget, questi widget estende la funzionalità di widget esistenti. In questo modo è possibile creare, sulla base dei widget potenti esistenti, è anche possibile effettuare regolazioni precise sulla funzione di widget esistente.

Nota: Prima di studiare questo capitolo, è necessario capire che cosa un widget biblioteca (Widget Factory), e come funziona. Se non si ha familiarità con questa conoscenza, quindi si prega di rivedere come utilizzare parti biblioteca (Widget Factory) sezione.

Creare l'estensione widget di

Creare un widget per widget di biblioteca (Widget Factory) fino a $.widget() viene passato il nome del widget e un oggetto prototipo per completare. L'esempio che segue è quello di creare un widget "superDialog" nello spazio dei nomi "custom".

$.widget( "custom.superDialog", {} );

Per supportare l'espansione, $.widget() opzionale accettato come un membro per utilizzare il widget genitore costruttore. Quando si specifica un membro genitore quando è passato come secondo argomento, il nome del widget sul retro, di fronte all'oggetto widget di prototipo.

Come nell'esempio precedente, il seguente dovrebbe anche creare un widget "superDialog" nello spazio dei nomi "custom". Ma questo trasferimento è dialogo (dialogo) widget di jQuery UI costruttore ( $.ui.dialog ), rappresenta widget di superDialog dovrebbero utilizzare widget di dialogo (dialogo) di jQuery UI come membro genitore.

$.widget( "custom.superDialog", $.ui.dialog, {} );

Qui, superDialog due e widget di dialogo sono sostanzialmente equivalenti, solo un nome e namespace diversa solo. Affinché il nostro nuovo widget più caratteristiche possiamo aggiungere alcuni metodi per il suo oggetto prototipo.

all'oggetto prototipo Widget viene passato al $.widget() ultimo argomento. Finora, il nostro esempio si utilizza un oggetto null. Ora aggiungiamo un metodo per l'oggetto:

$.widget( "custom.superDialog", $.ui.dialog, {
    red: function() {
        this.element.css( "color", "red" );
    }
});
 
// Create a new <div>, convert it into a superDialog, and call the red() method.
$( "<div>I am red</div>" )
    .superDialog()
    .superDialog( "red" );

Ora superDialog hanno un red() metodo, che cambierà il suo colore rosso il colore del testo. Si prega di notare che le librerie membri (Widget Factory) è come impostare automaticamente this come un oggetto istanza di widget. Per un elenco di tutte le proprietà ei metodi disponibili sul caso, visitare le biblioteche aderenti (Widget Factory) documentazione API .

Estendere i metodi esistenti

A volte, è necessario regolare il comportamento di un componente esistente o aggiungere metodi. È possibile specificare il nome del nome del metodo del metodo sul prototipo oggetto deve ricaricare. L'esempio seguente sostituisce dialogo (dialogo) del open() metodo . Poiché la finestra di dialogo è attivato per impostazione predefinita, quando si esegue questo codice, "open" che verrà registrato.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
    }
});
 
// Create a new <div>, and convert it into a superDialog.
$( "<div>" ).superDialog();

Quando si esegue questo codice, vi è un problema. Dal momento che abbiamo sovraccaricati open() il comportamento di default, quindi la finestra di dialogo (dialogo) non viene più visualizzato sullo schermo.

Quando usiamo all'oggetto prototipo, siamo in realtà si sovrappone il metodo originale, usando un nuovo metodo nella catena di prototipi.

Affinché il genitore metodi di montaggio sono disponibili, biblioteca membro (Widget Factory) fornisce due metodi - _super() e _superApply() .

Utilizzare _super() e _superApply() per accedere al membro padre

_super() e _superApply() chiama nello stesso modo come il componente principale. Considerate i seguenti esempi. Come ultima istanza, che sono sovraccaricato open() metodo per registrare il "open" . Tuttavia, questa corsa _super() si chiama dialogo (dialogo) della open() , e la finestra di dialogo Apri.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
 
        // Invoke the parent widget's open().
        return this._super();
    }
});
 
$( "<div>" ).superDialog();

_super() e _superApply() è praticamente identica all'originale Function.prototype.call() e Function.prototype.apply() metodo. Pertanto, _super() accetta un elenco di parametri, _superApply() accetta un array come parametro. Il seguente esempio dimostra che differente tra i due.

$.widget( "custom.superDialog", $.ui.dialog, {
    _setOption: function( key, value ) {
 
        // Both invoke dialog's setOption() method. _super() requires the arguments
        // be passed as an argument list, _superApply() as a single array.
        this._super( key, value );
        this._superApply( arguments );
    }
});

ridefinire widget di

jQuery UI 1.9 aggiunto ridefinire la funzione del widget. Pertanto, non è possibile creare un nuovo widget, abbiamo solo bisogno di passare $.widget() in modo che il nome di un widget esistente e costruttore. Gli esempi che seguono in open() per aggiungere lo stesso record, ma non con la creazione di un nuovo widget per completare.

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
$( "<div>" ).dialog();

Attraverso questo metodo, possiamo estendere una piccola parte del metodo esistente, ma è comunque possibile utilizzare _super() per accedere al metodo originale - questi non sono la creazione di un nuovo widget per completare, ma che è ridefinire direttamente widget di può.

Widget (Widget) e il polimorfismo (polimorfismo)

In tensione tra i widget e plug-in di interagire con il loro tempo, è da notare che il membro spina non può essere utilizzato per chiamare l'elemento metodo genitore sottogruppo. L'esempio seguente dimostra questo.

$.widget( "custom.superDialog", $.ui.dialog, {} );
 
var dialog = $( "<div>" ).superDialog();
 
// This works.
dialog.superDialog( "close" );
 
// This doesn't.
dialog.dialog( "close" );

Esempi di quanto sopra, il membro principale del plug-in, dialog() , non è possibile chiamare gli elementi superDialog sul close() metodo. Per ulteriori informazioni chiamare il metodo widget, vedere il metodo di chiamata Widget (Widget) .

Esempi di personalizzato su misura

Finora, abbiamo visto esempi di metodi di estensione widget di prototipo. Sul prototipo di metodo di overload colpisce tutte le istanze del widget.

Per illustrare questo punto, prendere in considerazione i seguenti esempi. dialogo (dialogo) le due forze utilizzano la stessa open() metodo.

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
// Create two dialogs, both use the same open(), therefore "open" is logged twice.
$( "<div>" ).dialog();
$( "<div>" ).dialog();

A volte, è sufficiente modificare il comportamento di un'istanza del widget. Per fare questo, è necessario utilizzare un normale assegnazione attributo JavaScript, ottenere un riferimento a istanze e sovrascrivere questo metodo. Come esempi specifici indicati di seguito.

var dialogInstance = $( "<div>" )
    .dialog()
    // Retrieve the dialog's instance and store it.
    .data( "ui-dialog" );
 
// Override the close() method for this dialog
dialogInstance.close = function() {
    console.log( "close" );
};
 
// Create a second dialog
$( "<div>" ).dialog();
 
// Select both dialogs and call close() on each of them.
// "close" will only be logged once.
$( ":data(ui-dialog)" ).dialog( "close" );

Overload personalizzazione tecnico è l'esempio perfetto di una personalizzazione di una volta.