Przykłady jQuery UI - Część zdjęć (Widget fabryczne)
Użyj widgetów jQuery UI z całą samej abstrakcji stworzyć pełnostanowego jQuery plugin.
Więcej informacji na temat biblioteki widżetów (widget fabryczne), należy sprawdzić dokumentację API biblioteki komponentów (Widget fabryczne) .
Domyślną funkcją
Demo pokazuje prosty w użyciu bibliotek komponentów (jquery.ui.widget.js), aby tworzyć własne widgety.
Trzy bloki w inny sposób zainicjować. Kliknij, aby zmienić ich kolor tła. Zobacz kod źródłowy i uwagi, aby zrozumieć jak to działa.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> Biblioteka jQuery UI Widget (Widżet fabryczne) - Domyślna funkcja </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Style> .custom-kolorowania { font-size: 20px; position: relative; szerokość: 75 pikseli; wysokość: 75 pikseli; } .custom-kolorowania-zmieniacz { font-size: 10px; position: absolute; Prawo: 0; bottom: 0; } </ Style> <Script> $ (Function () { // Definicje państwa, w którym przestrzeń nazw "na zamówienie", "pokolorować" to nazwa państwa $ .widget ( "custom.colorize", { // Opcje domyślne: { czerwona: 255, zielona: 0, niebieski: 0, // Zmiana oddzwaniania: null random: null } // Konstruktor _create: function () { this.element // Dodanie tematu zajęć .addClass ( "custom-kolorowania") // Prevent kliknij dwukrotnie, aby wybrać .disableSelection tekstową (); this.changer = $ ( "<button>" { tekst: "zmiana" "Klasa": "custom-kolorowania-zmieniarka" }) .appendTo (this.element) .button (); // Bind przycisk zmieniacza zdarzenie click do metody losowej this._on (this.changer { // Kiedy widżet jest wyłączona, nie _on nazywa losowo kliknij: "random" }); this._refresh (); } () {Funkcyjne: // Wywołanie _refresh podczas tworzenia, a następnie zmienić opcje this.element.css ( "background-color", "rgb (" + this.options.red + "" + this.options.green + "" + this.options.blue + ")" ); // Triggerować this._trigger oddzwaniania / zdarzeń ( "change"); } // Zmiana koloru na wartość losową // metody publiczne mogą być wywoływane bezpośrednio poprzez losowe .colorize ( "random"): function (event) { var = {kolory czerwona: Math.floor (Math.random () * 256), zielona: Math.floor (Math.random () * 256), niebieski: Math.floor (Math.random () * 256) }; // Wywoła zdarzenie, należy sprawdzić, czy odwołane, jeżeli (this._trigger ( "Random", impreza, kolory)! == False) { this.option (kolorów); } } // Automatyczne usuwanie impreza związana _on tutaj // zresetować Inne modyfikacje _destroy: function () { // Usuń wygenerowane elementy this.changer.remove (); this.element .removeClass ( "custom-kolorowania") .enableSelection () .css ( "background-color", "przezroczysty"); } // _setOptions Wg hash wszystko zmieniło się z opcjami, aby wywołać // przy zmianie opcji są zawsze odświeżyć _setOptions: function () { // _super I _superApply this._superApply (argumenty); this._refresh (); } // _setOption _setOption Dla każdej osoby, aby zmienić opcje zadzwoń: function (key, value) { Wartości // Kolor zapobiegające nieważne, jeżeli (/red|green|blue/.test(key) && (wartość <0 || wartość> 255)) { return; } this._super (klucz, wartość); } }); // Przywróć domyślne opcje $ ( "# my-WIDGET1") .colorize (); // W dwóch opcji niestandardowych zainicjować $ ( "# mój-WIDGET2") .colorize ({ czerwone: 60, niebieski: 60 }); // Green od wartości zdefiniowanej przez siebie i tylko pozwala wystarczająca zielony kolor losowo oddzwaniania zainicjować $ ( "# mój-widget3") .colorize ({ zielona: 128, random: function (event, ui) { powrót ui.green> 128; } }); // Kliknij przełącznik włączony / wyłączony $ ( "#disable") .Kliknij (Function () { // selektorów niestandardowe dla każdego widgetu, aby znaleźć wszystkie wystąpienia // Wszystkie instancje przełączania razem, więc możemy zacząć od pierwszego stanu, aby sprawdzić, czy ($ ( "custom-kolorowania") .colorize ( "opcja", "disabled")) { $ ( ": Na zamówienie kolorowania") .colorize ( "enable"); } Else { $ ( ": Na zamówienie kolorowania") .colorize ( "Wyłącz"); } }); // Po inicjalizacji, kliknij opcję Ustawienia $ ( "#black") .Kliknij (function () { $ ( ": Na zamówienie kolorowania") .colorize ( "opcja", { czerwona: 0, zielona: 0, niebieski: 0 }); }); }); </ Script> </ Head> <Body> <Div> <Div id = "moja-WIDGET1"> Zmiana koloru </ div> <Div id = "moja-WIDGET2"> Zmiana koloru </ div> <Div id = "moja-widget3"> Zmiana koloru </ div> <Button id = "Wyłącz"> przełączyć opcja wyłączona </ button> <Button id = "black"> to Black </ button> </ Div> </ Body> </ Html>