Latest web development tutorials

widgety UI jQuery poprzez rozbudowę biblioteki widget

jQuery UI widżet biblioteka (Widget fabryczne) ułatwia tworzenie widgetów te widgety rozszerza funkcjonalność istniejących widżetów. W ten sposób można tworzyć na podstawie istniejących potężnych widżety, można również dokonywać drobnych korekt w istniejących funkcji widget.

Uwaga: Przed przestudiowaniu tego rozdziału, trzeba zrozumieć, jakie widżet biblioteka (Widget fabryczne) i jak to działa. Jeśli nie są zaznajomieni z tej wiedzy, dlatego należy zapoznać się , jak korzystać z biblioteki części (fabryczne) Widget sekcję.

Tworzenie rozszerzenia widget

Tworzenie widgetu przez widget biblioteki (Widget fabryczne) aż do $.widget() jest przekazywana nazwę widgetu i obiektu prototypu, aby zakończyć. Poniższy przykład jest stworzenie "superDialog" widżet w przestrzeni nazw "niestandardowego". 

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

Aby wesprzeć ekspansję, $.widget() Opcjonalnie przyjęty jako członek do używania konstruktora widget rodzicem. Określając element nadrzędny, gdy jest przekazywana jako drugi argument, nazwę widget z tyłu, z przodu obiektu prototypu widget.

Podobnie jak w przykładzie powyżej, następujące dokumenty powinny również stworzyć "superDialog" widżet w przestrzeni nazw "niestandardowego". Ale ten transfer jest okno dialogowe (okno) widget jQuery UI jest konstruktor ( $.ui.dialog ), reprezentuje widget superDialog powinien używać dialogowe (okno) widżet jQuery UI jako członka macierzystego. 

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

Tutaj superDialog dwa i widżety dialogowe są zasadniczo równoważne, po prostu inna nazwa i nazw tylko. Aby nasz nowy widżet więcej funkcji możemy dodać kilka metod do jego prototyp obiektu.

Widżet prototypowy obiekt zostanie przekazany do $.widget() ostatni argument. Do tej pory nasz przykład używa obiektu null. Teraz dodajmy metodę obiektu: 

$.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" );

Teraz superDialog mają red() metodę, która zmieni jego czerwony kolor tekstu. Należy pamiętać, że biblioteki użytkownik (Widget fabryczne) jest automatycznie ustawiany jak this jako widget instancji obiektu. Aby uzyskać listę wszystkich właściwości i metod dostępnych na przykład odwiedzają biblioteki użytkownik (Widget fabryczne) dokumentację API .

Rozszerzenie istniejących metod

Zdarza się, że trzeba dostosować zachowanie istniejącego komponentu lub dodać metod. Można podać nazwę pod jaką metodę sposobu na prototypie obiekt musi przeładować. Poniższy przykład zasłania okno (okna) z open() metody . Ponieważ okno jest domyślnie włączona, po uruchomieniu tego kodu, "open" będzie nagrywany. 

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

Po uruchomieniu tego kodu, nie ma problemu. Ponieważ przeciążone open() domyślne zachowanie, więc okno (okno) nie jest wyświetlany na ekranie.

Gdy używamy obiekt prototypowy, jesteśmy właściwie pokrywa się z oryginalną metodę, za pomocą nowej metody w łańcuchu prototypu.

Aby rodzica są dostępne metody montażu, biblioteki użytkownik (Widget fabryczne) oferuje dwie metody - _super() i _superApply() .

Użyj _super() i _superApply() , aby uzyskać dostęp do elementu nadrzędnego

_super() i _superApply() wywołuje w ten sam sposób jak składnik macierzystego. Rozważmy następujące przykłady. Podobnie jak w ubiegłym przykład, które są przeciążone open() metodę nagrywania na "open" . Jednak ten prowadzony _super() jest wywoływana dialogowe (okno) z open() oraz w oknie dialogowym Otwieranie. 

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

_super() i _superApply() jest w zasadzie identyczny z oryginalnym Function.prototype.call() i Function.prototype.apply() sposobu. Dlatego _super() przyjmuje listę parametrów, _superApply() przyjmuje tablicę jako parametr. Poniższy przykład pokazuje, że różnią się między nimi. 

$.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 );
    }
});

redefine widget

jQuery UI 1.9 dodaje przedefiniować funkcję widgetów. W związku z tym, nie można utworzyć nowy widżet, musimy tylko zdać $.widget() tak, że istniejąca nazwa widget i konstruktor. Poniższe przykłady w open() , aby dodać ten sam rekord, ale nie tworząc nowy widżet, aby zakończyć. 

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

Dzięki tej metodzie możemy rozszerzyć niewielką część istniejącej metody, ale nadal można używać _super() , aby uzyskać dostęp do oryginalnej metody - nie są to tworząc nowy widżet do zrealizowania, ale który jest bezpośrednio przedefiniować widget może.

Widżety (Widgets) oraz polimorfizm (polimorfizm)

Gdy rozszerzony między widgetami i wtyczek do interakcji ze swoim czasem, warto zauważyć, że korek nie może być użyty do wywołania metody elementu rodzica podzespołu. Poniższy przykład demonstruje to. 

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

Przykłady powyższe, członek rodzicem plug-in, dialog() , nie można nazwać elementy superDialog na close() metody. Aby uzyskać więcej informacji, należy wywołać metodę widget, zobacz widget (widget) wywołanie metody .

Przykłady zwyczaju spersonalizowane

Do tej pory widzieliśmy wystąpień metod rozszerzenie prototypowych widget. Na prototypie przeciążona metoda dotyczy wszystkich wystąpień widget.

Aby zilustrować ten punkt, należy rozważyć następujące przykłady. dialogowe (okno) obie siły są przy użyciu tej samej open() metody. 

$.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();

Czasami po prostu trzeba zmienić zachowanie instancji widgetu. Aby to zrobić, trzeba użyć zwykłego przypisania atrybutu JavaScript, uzyskać odwołanie do instancji i zastąpić tę metodę. Jako konkretne przykłady przedstawione poniżej. 

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" );

Przeciążony personalizacja techniczna jest doskonałym przykładem dostosowywania jednorazowej.