Latest web development tutorials

jQuery UI Beispiele - Teil Galerie (Widget Factory)

Verwenden Sie jQuery UI-Widgets mit allen die gleiche Abstraktion Stateful jQuery-Plugin zu erstellen.

Für weitere Details über die Widget - Bibliothek (Widget Factory), überprüfen Sie die API - Dokumentation Komponentenbibliothek (Widget Factory) .

Die Standardfunktion

Die Demo zeigt eine einfache Komponentenbibliotheken (jquery.ui.widget.js) zu verwenden, um eigene Widgets erstellen.

Drei Blöcke in einer anderen Weise zu initialisieren. Klicken Sie auf die Hintergrundfarbe zu ändern. Ansicht Quellcode und Kommentare zu verstehen, wie es funktioniert. 

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI-Widget-Bibliothek (Widget Factory) - Die Standardfunktion </ 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-kolorieren {
    font-size: 20px;
    position: relative;
    Breite: 75px;
    Höhe: 75px;
  }
  .custom-kolorieren-Wechsler {
    font-size: 10px;
    position: absolute;
    rechts: 0;
    bottom: 0;
  }
  </ Style>
  <Script>
  $ (Function () {
    // Member Definitionen, wobei "custom" Namespace "einfärben" ist der Name des Elements $ .widget ( "custom.colorize", {
      // Standardoptionen: {
        Rot: 255,
        grün: 0,
        Blau: 0,
 
        // Rückruf Wechsel: null,
        Zufalls: null
      },
 
      // Konstruktor _create: function () {
        this.element
          // Ein Thema der Klasse hinzufügen
          .addClass ( "custom-kolorieren")
          // Prevent Doppelklick auf Text .disableSelection zu wählen ();
 
        this.changer = $ ( "<button>", {
          Text: "change"
          "Klasse": "custom-kolorieren-Wechsler"
        })
        .appendTo (this.element)
        .Taste ();
 
        // Binden Sie das Click-Ereignis-Wechsler-Taste, um Zufallsmethode this._on (this.changer, {
          // Wenn das Widget deaktiviert ist, _on nicht zufällig genannt
          klicken Sie auf: "random"
        });
        this._refresh ();
      },
 
      () Funktion {: // Aufruf _refresh wenn Sie erstellen und dann Optionen ändern
        this.element.css ( "background-color", "rgb (" +
          this.options.red + "," +
          this.options.green + "," +
          this.options.blue + ")"
        );
 
        Lösen Sie einen Rückruf / Ereignis this._trigger // ( "change");
      },
 
      Funktion (event) {: // Ändern Sie die Farbe auf einen zufälligen Wert // öffentliche Methoden können direkt über zufällige .colorize ( "random") aufgerufen werden
        var Farben = {
          rot: Math.floor (Math.random () * 256),
          grün: Math.floor (Math.random () * 256),
          blau: Math.floor (Math.random () * 256)
        };
 
        // Löst ein Ereignis aus, ob abgebrochen prüfen, ob (this._trigger ( "random", Ereignis, Farben)! == False) {
          this.option (Farben);
        }
      },
 
      // Automatisches Entfernen Ereignis von _on hier gebunden // andere Modifikationen _destroy zurück: function () {
        // Entfernen generierten Elemente this.changer.remove ();
 
        this.element
          .removeClass ( "custom-kolorieren")
          .enableSelection ()
          CSS- ( "background-color", "transparent");
      },
 
      // _setOptions Durch einen Hash alle mit Optionen geändert aufrufen // beim Wechsel Optionen werden immer _setOptions aktualisieren: function () {
        // _super Und _superApply
        this._superApply (Argumente);
        this._refresh ();
      },
 
      // _setOption _setOption Für jede einzelne die Optionen zu ändern aufrufen: function (key, value) {
        // Farbwerte ungültig zu verhindern, wenn (/red|green|blue/.test(key) && (Wert <0 || Wert> 255)) {
          Rückkehr;
        }
        this._super (Schlüssel, Wert);
      }
    });
 
    // Die Standardoptionen $ initialisieren ( "# my-Bedienelement1") .colorize ();
 
    // Durch zwei benutzerdefinierte Optionen $ ( "# my-Bedienelement2") .colorize (initialisieren {
      Rot: 60,
      blau: 60
    });
 
    // Green von selbst definierten Wert und erlaubt nur eine ausreichende grüne Farbe zufällig Rückruf $ ( "# my-widget3") .colorize (initialisieren {
      grün: 128,
      Zufalls: function (event, ui) {
        Rückkehr ui.green> 128;
      }
    });
 
    // Klick-Schalter aktiviert / deaktiviert
    $ ( "#disable") .click (Function () {
      // Benutzerdefinierte Selektoren für jedes Widget alle Instanzen zu finden // Alle Instanzen zusammen Schalt, so können wir von dem ersten Zustand zu überprüfen, ob ($ (Start ": custom-kolorieren") .colorize ( "Option", "gesperrt")) {
        $ ( ": Benutzerdefinierte-kolorieren") .colorize ( "Freigabe");
      } Else {
        $ ( ": Benutzerdefinierte-kolorieren") .colorize ( "disable");
      }
    });
 
    // Nach der Initialisierung, klicken Sie auf die Option Einstellungen $ ( "#black") .click (function () {
      $ ( ": Benutzerdefinierte-kolorieren") .colorize ( "Option", {
        rot: 0,
        grün: 0,
        blau: 0
      });
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div>
  <Div id = "my-Bedienelement1"> Farbe ändern </ div>
  <Div id = "my-Bedienelement2"> Farbe ändern </ div>
  <Div id = "my-widget3"> Farbe ändern </ div>
  <Button id = "disable"> Schalter deaktiviert Option </ button>
  <Button id = "black"> Black </ button>
</ Div>
 
 
</ Body>
</ Html>