Latest web development tutorials

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>