Latest web development tutorials

jQuery UI Esempi - part (Widget di fabbrica)

Utilizzare i widget jQuery UI con lo stesso astrazione per creare stateful plugin per jQuery.

Per maggiori dettagli sulla libreria di widget di (Widget Factory), controllare la documentazione delle API libreria di componenti (Widget Factory) .

La funzione di default

La demo mostra una semplice da usare librerie di componenti (jquery.ui.widget.js) per creare widget personalizzati.

Tre isolati in un modo diverso per inizializzare. Fare clic per cambiare il loro colore di sfondo. Visualizza il codice sorgente e commenti per capire come funziona. 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> jQuery UI Library Widget (Widget Factory) - La funzione di default </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .custom-colorare {
    font-size: 20px;
    position: relative;
    width: 75px;
    Altezza: 75px;
  }
  .custom-Colorize-changer {
    font-size: 10px;
    position: absolute;
    a destra: 0;
    in basso: 0;
  }
  </ Style>
  <Script>
  $ (Function () {
    // Definizioni Stati, in cui namespace "su misura", "colorare" è il nome del membro $ .widget ( "custom.colorize", {
      // Le opzioni predefinite: {
        rosso: 255,
        verde: 0,
        blu: 0,
 
        // Cambiamento richiamata: null,
        casuale: null
      },
 
      // Costruttore _create: function () {
        this.element
          // Aggiungere un argomento di classe
          .addClass ( "custom-Colorize")
          // Prevenire fare doppio clic per selezionare .disableSelection testo ();
 
        this.changer = $ ( "<tasto>", {
          testo: "il cambiamento"
          "Class": "custom-Colorize-changer"
        })
        .appendTo (this.element)
        apri un ();
 
        // Associare il pulsante di scatto evento cambia il metodo this._on casuale (this.changer, {
          // Quando il widget è disattivato, _ON non chiamato casuale
          clicca: "random"
        });
        this._refresh ();
      },
 
      () {Funzione: // chiamare _refresh quando si crea e quindi modificare le opzioni
        this.element.css ( "background-color", "RGB (" +
          this.options.red + "," +
          this.options.green + "," +
          this.options.blue + ")"
        );
 
        // Attivare un this._trigger callback / evento ( "cambiamento");
      },
 
      // Cambiare il colore di un valore casuale // metodi pubblici possono essere chiamati direttamente tramite .colorize casuale ( "random"): la funzione (evento) {
        colori var = {
          rosso: Math.floor (Math.random () * 256),
          verde: Math.floor (Math.random () * 256),
          blu: Math.floor (Math.random () * 256)
        };
 
        // Attiva un evento, controllare se cancellata se (this._trigger ( "casuali", evento, colori)! == False) {
          this.option (colori);
        }
      },
 
      // Evento rimozione automatica vincolato _ON qui // azzerare altre modifiche _destroy: function () {
        // Rimuovere elementi generati this.changer.remove ();
 
        this.element
          .removeClass ( "custom-Colorize")
          .enableSelection ()
          .css ( "background-color", "trasparente");
      },
 
      // _setOptions Con un hash cambiato tutto con la possibilità di richiamare // quando le opzioni che cambiano sono sempre aggiornare _setOptions: function () {
        // _super E _superApply
        this._superApply (argomenti);
        this._refresh ();
      },
 
      // _setOption _setOption Per ogni individuo di modificare le opzioni di chiamata: la funzione (chiave, valore) {
        valori // colore per prevenire valida se (/red|green|blue/.test(key) && (valore <0 || valore> 255)) {
          tornare;
        }
        this._super (key, value);
      }
    });
 
    // Inizializza le opzioni predefinite $ ( "# my-WIDGET1") .colorize ();
 
    // Con due opzioni personalizzate per inizializzare $ ( "# my-widget2") .colorize ({
      rosso: 60,
      blu: 60
    });
 
    // Verde per valore di auto-definito e consente solo un sufficiente colore verde richiamata casuale per inizializzare $ ( "# my-widget3") .colorize ({
      verde: 128,
      casuale: la funzione (evento, ui) {
        tornare ui.green> 128;
      }
    });
 
    // Fare clic su Passa abilitata / disabilitata
    $ ( "#disable") .Click (Function () {
      // selettori personalizzati per ciascun widget per trovare tutte le istanze // Tutte le istanze di commutazione insieme, in modo che possiamo iniziare dal primo stato per verificare se ($ ( ": su misura Colora") .colorize ( "opzione", "disabile")) {
        $ ( ": Custom-Colorize") .colorize ( "abilitare");
      } Else {
        $ ( ": Custom-Colorize") .colorize ( "disabilita");
      }
    });
 
    // Dopo l'inizializzazione, selezionare l'opzione Impostazioni $ ( "#black") .Click (function () {
      $ ( ": Custom-Colorize") .colorize ( "opzione", {
        rossa: 0,
        verde: 0,
        blu: 0
      });
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div>
  <Div id = "my-WIDGET1"> cambiamento di colore </ div>
  <Div id = "my-widget2"> cambiamento di colore </ div>
  <Div id = "my-widget3"> cambiamento di colore </ div>
  <Button id = "disabilita"> passare l'opzione disattivata </ ​​button>
  <Button id = "black"> to Black </ button>
</ Div>
 
 
</ Corpo>
</ Html>