Jak korzystać z biblioteki jQuery UI widget

Stworzymy pasek postępu. Jak pokazano w poniższych przykładach, które wywołując jQuery.widget() , aby zakończyć, to ma dwa parametry: plug-in nazwa ma zostać utworzony, to tekst, który zawiera obiekt jest funkcją plug-in wsparcia. Gdy wtyczka jest nazywany, tworzy nową instancję plug-in, wszystkie funkcje będą realizowane w kontekście tego przykładu. To dwa ważne sposoby różnią się standardem jQuery plugin. Pierwszy kontekst jest obiekt, nie jest elementem Dom. Po drugie, kontekst jest zawsze pojedynczy obiekt, a nie zbiorem.

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

Musi zawierać nazwę przestrzeni nazw wtyczek, w tym przykładzie, używamy custom nazw. Można utworzyć tylko jedną warstwę głęboką przestrzeń nazw, dlatego custom.progressbar jest skutecznym plug-in nazwie very.custom.progressbar nie jest prawidłową nazwą typu plug-in.

Widzieliśmy biblioteki części (Widget fabryczne) dostarcza nam dwóch właściwości. this.element jest obiektem jQuery zawierający jeden element. Jeśli nazywamy obiekt jQuery plug-in, który zawiera wiele elementów, stworzy osobną instancję plug-in dla każdego elementu, a każde wystąpienie będzie mieć własną this.element . Druga nieruchomość, this.options , jest plug-in opcje obejmują wszystkie główne pary nazwa / wartość skrótu (hash). Opcje te mogą być przekazywane do plug-in, co następuje:

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

Kiedy zadzwonić jQuery.widget() , która dając jQuery.fn (wykorzystane do stworzenia standardowego systemu plug-in) dodać funkcję przedłużenia jQuery. Nazwa funkcji jest dodawana w oparciu o przejściu jQuery.widget() nazwy bez nazw - "ProgressBar". Opcja Plug-pass jest uzyskanie wartości ustawionej w instancji wtyczki. Jak pokazano na poniższym przykładzie, można określić wartość domyślną dla każdej opcji. Podczas projektowania interfejsu, należy zdawać sobie sprawę z najbardziej powszechnym użyciu swojej wtyczki, dzięki czemu można ustawić odpowiednią domyślną, a następnie upewnić się, że wszystkie opcje naprawdę nieobowiązkowy.

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

Wywołanie metody wtykowych

Teraz możemy zainicjować naszą pasek postępu, będziemy wykonać działanie poprzez wywołanie metody na przykład wtyczki. Aby zdefiniować metodę plug-in, my tylko przechodzimy jQuery.widget() odwołanie do obiektu funkcji. Możemy również zdefiniować "prywatny" metody do nazwy funkcji z prefiksem podkreślenia.

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

Aby wywołać metodę na przykład plug-in, można przekazać nazwę metody do wtyczki jQuery. Jeśli wywołać metodę przyjąć parametry, po prostu przekazać nazwę metody za tymi parametrami.

Uwaga: Funkcja jQuery jest przekazywana do tej samej nazwie metody użytej do inicjalizacji plug-in do wykonywania tego sposobu. Ma to na celu zapobieganie zanieczyszczaniu obszaru nazw jQuery przy zachowaniu wywołania metod łańcucha. W kolejnych rozdziałach widzimy inne zastosowania wyglądają bardziej naturalnie.

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

Użyj opcji

option() metoda jest automatycznie dostarczane do plug-in. option() metoda pozwala pobrać i ustawić opcje po inicjalizacji. Sposób jQuery .css() i .attr() metoda: Można jedynie podać nazwę jako argument jest w użyciu, można również podać nazwę i wartość jak ustawić za pomocą lub przechodząc przez nazwę klucza par / wartość hash ustawić wiele wartości. Przy zastosowaniu jako wartości wtyczka zwraca nazwę opcji przychodzącego odpowiadającej aktualnej wartości. Przy zastosowaniu jako seter, widget _setOption metoda zostanie wywołana dla każdej opcji jest ustawiona. Możemy określić plug-in w naszym _setOption sposobu odzwierciedlenia zmienić opcje. Zmiana opcji działania mają być wykonane samodzielnie, możemy zastąpić _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;
    }
});

Dodaj zwrotnego

Najprostsze rozszerzenie jest dodanie wywołania zwrotnego, dzięki czemu użytkownicy mogą reagować w razie wystąpienia zmian w stanie plug-in. Możemy spojrzeć na poniższy przykład, w jaki sposób dodać zwrotną na pasku postępu, gdy pasek postępu osiągnie 100 proc. _trigger() Metoda przyjmuje trzy argumenty: nazwa zwrotnego, wywołanie zwrotne zdarzenia jQuery rozpoczęła obiektów i hash danych związanych ze zdarzeniem. Callback nazwa jest tylko jeden parametr wymagany, ale chcą wprowadzić specjalne funkcje użytkownikom na plug-in, pozostałe parametry są bardzo przydatne. Na przykład, jeśli mamy stworzyć plugin Draggable, możemy przejść mousemove zdarzenie przeciągania po wyzwoleniu wywołania zwrotnego, który pozwoli użytkownikom odpowiedzi na wydarzenia w oparciu o obiekcie dostarczonych przez X / Y współrzędnych przeciągania. Należy pamiętać, przekazywane do _trigger() pierwotnego zdarzenia musi być wydarzeniem jQuery zamiast natywnej zdarzeń przeglądarki.

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

Funkcja oddzwaniania w zasadzie tylko dodatkowa opcja, dzięki czemu można uzyskać takie same jak innych opcji i ustawić je. Ilekroć oddzwaniania, nie będzie odpowiedniego zdarzenia. Typ zdarzenia jest nazwą i nazwą funkcji wywołania zwrotnego w celu określenia wtyczkę połączenia. Callback i zdarzenia zaakceptować te same dwa argumenty: obiekt zdarzenia i hash danych związanych ze zdarzeniem, zwłaszcza jak pokazano na poniższych przykładach. Może powinien zawierać elementy wtykowe, aby uniemożliwić użytkownikom, w tym celu, najlepszym sposobem jest stworzenie miłość można odwołać zwrotnych. Użytkownicy mogą cofnąć oddzwaniania lub zdarzenie związane z rodem cofnąć każde zdarzenie z nimi, są one poprzez wywołanie event.preventDefault() lub powrót false osiągnąć. Jeśli odwołasz zwrotnego, _trigger() metoda zwróci false , dzięki czemu można osiągnąć odpowiednią funkcję w wtyczek.

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

Teraz widzieliśmy, jak korzystać z biblioteki widget (Widget fabryczne), aby utworzyć plug-in, przyjrzyjmy się, jak to naprawdę działa. Podczas rozmowy telefonicznej jQuery.widget() , to tworzy funkcję konstruktora dla plug-in i ustawić plugin wystąpienie jest przekazywana jako obiekt prototypu. Wszystkie funkcje są automatycznie dodawane do widżetu pochodzi z podstawowej widget prototyp, zdefiniowanej jako jQuery.Widget.prototype . Podczas tworzenia plug-in instancji zostanie użyty jQuery.data zapisuje go na oryginalnym elemencie DOM, plug-in nazwy jako nazwę klucza.

Od wtyczki instancji bezpośrednio związane z elementu DOM, można bezpośrednio przejść do wtyczki przykład, bez konieczności przemierzać metod wtykowych. Ta metoda pozwoli Ci zadzwonić bezpośrednio na przykład plug-in, bez konieczności przekazać napis nazwę metody, a można również uzyskać dostęp do właściwości bezpośrednio podłączyć.

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

Można również utworzyć instancję plug-in bez traversal metod, a opcja zadzwonić elementy konstruktora bezpośrednio:

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

Rozbudowa prototypu

Widżet konstruktorów i prototypów największą zaletą jest łatwe rozszerzenia. Dodając lub modyfikując prototyp wtyczki sposób możemy zmodyfikować zachowanie widget wszystkich przypadkach. Na przykład, jeśli chcemy dodać metodę na pasku postępu, aby przywrócić 0% postępu, możemy dodać tę metodę do prototypu, który będzie wzywał wszystkich instancji wtyczki.

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

Przez dłuższy widgetów więcej szczegółów i jak utworzyć nowy widget na istniejącej widget Więcej informacji można znaleźć w rozszerzonej widget (widget) przez biblioteki użytkownik (Widget Factory) .

rozjaśnić

W niektórych przypadkach, aplikacja pozwala użytkownikowi na plug-iny, a następnie odstąpienia od aplikacji. Można _destroy() zrobić z tej metody. W _destroy() w ramach metody, należy cofnąć wszystkie działania w trakcie inicjalizacji i po używanie wtyczki robić. _destroy() przez .destroy() wywoływana jest metoda, .destroy() Metoda jest plug-in przypadkach, gdy usunięcie elementu z wiązaniami DOM wywoływana automatycznie, dzięki czemu może być stosowany do zbierania śmieci. Podstawowe .destroy() metoda jest również powszechnie stosowany do czynienia z niektórych operacji czyszczenia, takich jak usunięcie elementu DOM z widget przykład cytowany Unbind nazw widget wszystkie zdarzenia z elementów, użyj unbind wszystkie _bind() dodawanie wydarzeń.

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

Zamknij notatki

Komponent Library (Widget fabryczne) jest sposobem utworzenia państwa dla wtyczki. Istnieją różne inne modele mogą być stosowane, a każda z nich ma swoje zalety i wady. Komponent Library (Widget fabryczne) rozwiązuje wiele typowych problemów, a także znacznie poprawia wydajność, ale także znacznie zwiększyć możliwości ponownego wykorzystania kodu, dzięki czemu nadaje się do jQuery UI i innego stanu wtyczek.

Należy zauważyć, że w tej sekcji używamy custom nazw. ui nazw jest zarezerwowana oficjalny plugin jQuery UI. Podczas tworzenia własnych wtyczek, należy utworzyć własną przestrzeń nazw. Tak więc, aby lepiej skąd wtyku, który należy do zakresu.