JqueryUI - Widget Factory

In precedenza, l'unico modo per scrivere controlli personalizzati in jQuery era estendere lo spazio dei nomi $ .fn . Funziona bene per widget semplici. Supponiamo che tu costruisca widget più stateful, diventa rapidamente ingombrante. Per aiutare nel processo di creazione dei widget, Widget Factory è stato introdotto nell'interfaccia utente di jQuery, che rimuove la maggior parte del boilerplate tipicamente associato alla gestione di un widget.

JQueryUI Widget Factory è semplicemente una funzione ($ .widget) che prende un nome di stringa e un oggetto come argomenti e crea un plugin jQuery e una "Classe" per incapsulare la sua funzionalità.

Sintassi

Quanto segue è la sintassi del metodo jQueryUI Widget Factory -

jQuery.widget( name [, base ], prototype )

name- È una stringa contenente uno spazio dei nomi e il nome del widget (separato da un punto) del widget da creare.

base- Il widget di base da cui ereditare. Questo deve essere un costruttore che può essere istanziato con la parola chiave `new`. Il valore predefinito è jQuery.Widget .

prototype- L'oggetto da utilizzare come prototipo per il widget da cui ereditare. Ad esempio, jQuery UI ha un plug-in "mouse" su cui si basano gli altri plug-in di interazione. Per ottenere ciò, trascinabile , trascinabile, ecc. Ereditano tutti dal plugin del mouse in questo modo: jQuery.widget ("ui.draggable", $ .ui.mouse, {...}); Se non si fornisce questo argomento, il widget erediterà direttamente dal "widget di base" jQuery.Widget (notare la differenza tra jQuery.widget "w" minuscolo e jQuery.Widget "W" maiuscolo).

Widget di base

Il widget di base è il widget utilizzato dalla fabbrica di widget.

Opzioni

La tabella seguente elenca le diverse opzioni che possono essere utilizzate con il widget di base:

Sr.No. Opzione e descrizione
1 disabilitato nascondi

Questa opzione disabilita il widget se impostato su true . Per impostazione predefinita, il suo valore èfalse.

Option - disabledhide

Questa opzione disabilita il widget se impostato su true . Per impostazione predefinita, il suo valore èfalse.

Example

$( ".selector" ).widget({ disabled: true });
2 nascondere

Questa opzione determina come animare l'occultamento dell'elemento. Per impostazione predefinita, il suo valore ènull.

Option - hide

Questa opzione determina come animare l'occultamento dell'elemento. Per impostazione predefinita, il suo valore ènull.

Questo può essere di tipo -

  • Boolean- Se impostato su false non verrà utilizzata alcuna animazione. L'elemento si dissolverà con la durata predefinita e l'andamento predefinito se impostato su true .

  • Number - L'elemento si dissolverà con la durata specificata e l'andamento predefinito.

  • String - L'elemento verrà nascosto utilizzando l'effetto specificato.

  • Object- Se il valore è un oggetto, possono essere fornite le proprietà effetto, ritardo, durata e andamento .

Example

$( ".selector" ).widget({ hide: { effect: "explode", duration: 1000 } });
3 spettacolo

Questa opzione determina come animare la visualizzazione dell'elemento. Per impostazione predefinita, il suo valore ènull.

Option - show

Questa opzione determina come animare la visualizzazione dell'elemento. Per impostazione predefinita, il suo valore ènull.

Questo può essere di tipo -

  • Boolean- Se impostato su false, nessuna animazione verrà utilizzata per mostrare l'elemento. L'elemento si aprirà con la durata predefinita e l'andamento predefinito se impostato su true .

  • Number - L'elemento si aprirà con la durata specificata e l'andamento predefinito.

  • String - L'elemento verrà mostrato utilizzando l'effetto specificato.

  • Object- Se il valore è un oggetto, possono essere fornite le proprietà effetto, ritardo, durata e andamento .

Example

$( ".selector" ).widget({ show: { effect: "explode", duration: 1000 } });

Metodi

La tabella seguente elenca i diversi metodi che possono essere utilizzati con il widget di base:

Sr.No. Azione e descrizione
1 _creare()

Questo metodo è il costruttore del widget. Non ci sono parametri, ma this.element e this.options sono già impostati.

Action - _create()

Questa azione distrugge completamente la funzionalità della fisarmonica di un elemento. Gli elementi tornano al loro stato pre-inizializzazione. Questo metodo è il costruttore del widget. Non ci sono parametri, ma this.element e this.options sono già impostati.

Example

_create: function() {
   this.element.css( "background-color", this.options.color );
}
2 _delay (fn [, delay])

Questo metodo richiama la funzione fornita dopo un ritardo specificato. Restituisce l'ID timeout da utilizzare con clearTimeout () .

Action - _delay( fn [, delay ] )

Questo metodo richiama la funzione fornita dopo un ritardo specificato. Restituisce l'ID timeout da utilizzare con clearTimeout () .

Example

this._delay( this._foo, 100 );
3 _distruggere()

Il metodo public destroy () ripulisce tutti i dati, gli eventi, ecc. Comuni e quindi delega a questo metodo _destroy () per la pulizia personalizzata, specifica per i widget.

Action - _destroy()

Il metodo public destroy () ripulisce tutti i dati, gli eventi, ecc. Comuni e quindi delega a questo metodo _destroy () per la pulizia personalizzata, specifica per i widget.

Example

_destroy: function() {
   this.element.removeClass( "my-widget" );
}
4 _focusable (elemento)

Questo metodo imposta l'elemento per applicare la classe ui-state-focus sul focus. I gestori di eventi vengono automaticamente ripuliti durante la distruzione.

Action - _focusable( element )

Questo metodo imposta l'elemento per applicare la classe ui-state-focus sul focus. I gestori di eventi vengono automaticamente ripuliti durante la distruzione.

Example

_create: function() {
   this._focusable( this.element.find( ".my-items" ) );
}
5 _getCreateEventData ()

Tutti i widget attivano l' evento di creazione . Per impostazione predefinita, non vengono forniti dati nell'evento, ma questo metodo può restituire un oggetto che verrà passato come dati dell'evento di creazione.

Action - _getCreateEventData()

Tutti i widget attivano l' evento di creazione . Per impostazione predefinita, non vengono forniti dati nell'evento, ma questo metodo può restituire un oggetto che verrà passato come dati dell'evento di creazione.

Example

_getCreateEventData: function() {
   return this.options;
}
6 _getCreateOptions ()

Questo metodo consente al widget di definire un metodo personalizzato per la definizione delle opzioni durante l'istanza. Le opzioni fornite dall'utente sovrascrivono le opzioni restituite da questo metodo, che sovrascrivono le opzioni predefinite.

Action - _getCreateOptions()

Questo metodo consente al widget di definire un metodo personalizzato per la definizione delle opzioni durante l'istanza. Le opzioni fornite dall'utente sovrascrivono le opzioni restituite da questo metodo, che sovrascrivono le opzioni predefinite.

Example

_getCreateOptions: function() {
   return { id: this.element.attr( "id" ) };
}
7 _hide (elemento, opzione [, callback])

Questo metodo nasconde immediatamente un elemento, utilizzando metodi di animazione incorporati o utilizzando effetti personalizzati. Vedere l'opzione Nascondi per i possibili valori delle opzioni.

Action - _hide( element, option [, callback ] )

Questo metodo nasconde immediatamente un elemento, utilizzando metodi di animazione incorporati o utilizzando effetti personalizzati. Vedere l'opzione Nascondi per i possibili valori delle opzioni.

Example

this._hide( this.element, this.options.hide, function() {
   $( this ).remove();
});
8 _hoverable (elemento)

Questo metodo imposta l'elemento per applicare la classe ui-state-hover al passaggio del mouse. I gestori di eventi vengono automaticamente ripuliti durante la distruzione.

Action - _hoverable( element )

Questo metodo imposta l'elemento per applicare la classe ui-state-hover al passaggio del mouse. I gestori di eventi vengono automaticamente ripuliti durante la distruzione.

Example

this._hoverable( this.element.find( "div" ) );
9 _dentro()

Ogni volta che il plugin viene chiamato senza argomenti o solo con un hash di opzione, il widget viene inizializzato; questo include quando viene creato il widget.

Action - _init()

Ogni volta che il plugin viene chiamato senza argomenti o solo con un hash di opzione, il widget viene inizializzato; questo include quando viene creato il widget.

Example

_init: function() {
   if ( this.options.autoOpen ) {
      this.open();
   }
}
10 _off (elemento, eventName)

Questo metodo svincola i gestori di eventi dagli elementi specificati.

Action - _off( element, eventName )

Questo metodo svincola i gestori di eventi dagli elementi specificati.

Example

this._off( this.element, "click" );
11 _on ([suppressDisabledCheck] [, element], handlers)

Associa i gestori di eventi agli elementi specificati. La delega è supportata tramite selettori all'interno dei nomi degli eventi, ad esempio "click .foo".

Action - _on( [suppressDisabledCheck ] [, element ], handlers )

Associa i gestori di eventi agli elementi specificati. La delega è supportata tramite selettori all'interno dei nomi degli eventi, ad esempio "click .foo".

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
   }
});
12 _setOption (chiave, valore)

Questo metodo viene chiamato dal metodo _setOptions () per ogni singola opzione. Lo stato del widget dovrebbe essere aggiornato in base alle modifiche.

Action - _setOption( key, value )

Questo metodo viene chiamato dal metodo _setOptions () per ogni singola opzione. Lo stato del widget dovrebbe essere aggiornato in base alle modifiche.

Example

_setOption: function( key, value ) {
   if ( key === "width" ) {
      this.element.width( value );
   }
   if ( key === "height" ) {
      this.element.height( value );
   }
   this._super( key, value );
}
13 _setOptions (opzioni)

Questo metodo viene chiamato ogni volta che viene chiamato il metodo option (), indipendentemente dalla forma in cui è stato chiamato il metodo option ().

Action - _setOptions( options )

Questo metodo viene chiamato ogni volta che viene chiamato il metodo option (), indipendentemente dalla forma in cui è stato chiamato il metodo option ().

Example

_setOptions: function( options ) {
   var that = this,
   resize = false;
   $.each( options, function( key, value ) {
      that._setOption( key, value );
      if ( key === "height" || key === "width" ) {
         resize = true;
      }
   });
   if ( resize ) {
      this.resize();
   }
}
14 _show (elemento, opzione [, richiamata])

Mostra immediatamente un elemento, utilizzando metodi di animazione incorporati o utilizzando effetti personalizzati. Vedere l'opzione mostra per i possibili valori delle opzioni.

Action - _show( element, option [, callback ] )

Mostra immediatamente un elemento, utilizzando metodi di animazione incorporati o utilizzando effetti personalizzati. Vedere l'opzione mostra per i possibili valori delle opzioni.

Example

_this._show( this.element, this.options.show, function() {
   // Focus the element when it's fully visible.
   this.focus();
}
15 _super ([arg] [, ...])

Questo metodo richiama il metodo con lo stesso nome dal widget genitore, con qualsiasi argomento specificato. Essenzialmente .call ().

Action - _super( [arg ] [, ... ] )

Questo metodo richiama il metodo con lo stesso nome dal widget genitore, con qualsiasi argomento specificato. Essenzialmente .call ().

Example

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._super( key, value );
}
16 _superApply (argomenti)

Richiama il metodo con lo stesso nome dal widget genitore, con l'array di argomenti.

Action - _superApply( arguments )

Richiama il metodo con lo stesso nome dal widget genitore, con l'array di argomenti.

Example

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._superApply( arguments );
}
17 _trigger (tipo [, evento] [, dati])

Questo metodo attiva un evento e il callback associato. L'opzione con il nome uguale a type viene richiamata come callback.

Action - _trigger( type [, event ] [, data ] )

Questo metodo attiva un evento e il callback associato. L'opzione con il nome uguale a type viene richiamata come callback.

Example

this._on( this.element, {
   keydown: function( event ) {
      // Pass the original event so that the custom search event has
      // useful information, such as keyCode
      this._trigger( "search", event, {
         // Pass additional information unique to this event
         value: this.element.val()
      });
   }
});
18 distruggere()

Questo metodo rimuove completamente la funzionalità del widget. Questo riporterà l'elemento al suo stato pre-inizializzazione.

Action - destroy()

Questo metodo rimuove completamente la funzionalità del widget. Questo riporterà l'elemento al suo stato pre-inizializzazione.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.destroy();
   }
});
19 disattivare()

Questo metodo disabilita il widget.

Action - disable()

Questo metodo disabilita il widget.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.disable();
   }
});
20 abilitare()

Questo metodo abilita il widget.

Action - enable()

Questo metodo abilita il widget.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.enable();
   }
});
21 opzione (optionName)

Questo metodo ottiene il valore attualmente associato all'opzione optionName specificato .

Action - option( optionName )

Questo metodo ottiene il valore attualmente associato all'opzione optionName specificato .

Example

this.option( "width" );
22 opzione()

Questo metodo ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni del widget corrente.

Action - option()

Questo metodo ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni del widget corrente.

Example

var options = this.option();
for ( var key in options ) {
   console.log( key, options[ key ] );
}
23 opzione (optionName, value)

Questo metodo imposta il valore dell'opzione widget associata all'opzione optionName specificato.

Action - option( optionName, value )

Questo metodo imposta il valore dell'opzione widget associata all'opzione optionName specificato.

Example

this.option( "width", 500 );
24 opzione (opzioni)

Questo metodo imposta una o più opzioni per il widget.

Action - option( options )

Questo metodo imposta una o più opzioni per il widget.

Example

this.option({
   width: 500,
   height: 500
});
25 aggeggio()

Questo metodo restituisce un oggetto jQuery contenente l'elemento originale o un altro elemento generato rilevante.

Action - widget()

Questo metodo restituisce un oggetto jQuery contenente l'elemento originale o un altro elemento generato rilevante.

Example

_create: function() {
   this.widget().css( "border", "2px solid red" );
}

Eventi

Sr.No. Metodo e descrizione dell'evento
1 create (evento, ui)

Questo evento viene attivato quando viene creato un widget.

Event - create( event, ui )

Questo evento viene attivato quando viene creato un widget. Dove event è di tipo Event e ui è di tipo Object .

Syntax

$( ".selector" ).widget({
   create: function( event, ui ) {}
});

jQueryUI widget factory Lifecycle

La fabbrica di widget jQueryUI fornisce un modo orientato agli oggetti per gestire il ciclo di vita di un widget. Queste attività del ciclo di vita includono:

Creazione e distruzione di un widget: ad esempio,

$( "#elem" ).progressbar();

Modifica delle opzioni del widget: ad esempio

$( "#elem" ).progressbar({ value: 20 });

Effettuare chiamate "super" in widget sottoclasse: ad esempio

$( "#elem" ).progressbar( "value" );
or 
$( "#elem" ).progressbar( "value", 40 );

Notifiche di eventi: ad esempio

$( "#elem" ).bind( "progressbarchange", function() {
   alert( "The value has changed!" );
});

Esempio

Ora creiamo un widget personalizzato nel seguente esempio. Creeremo un widget pulsante. Vedremo come creare opzioni, metodi ed eventi in un widget nei seguenti esempi:

Creazione di widget personalizzati

Creiamo prima un semplice widget personalizzato.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
            });
            $("#button1").myButton();
         });
      </script>
   </head>
   
   <body>
      <div id = "button1"></div>
   </body>
</html>

Salviamo il codice sopra in un file HTML widgetfactoryexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Aggiunta di opzioni al widget personalizzato

Nell'esempio precedente, abbiamo utilizzato la funzione _create per creare un controllo personalizzato. Ma gli utenti generalmente desiderano personalizzare il controllo impostando e modificando le opzioni. Possiamo definire un oggetto opzioni che memorizza i valori predefiniti per tutte le opzioni definite. La funzione _setOption viene utilizzata per questo scopo. Viene chiamato per ogni singola opzione impostata dall'utente. Qui stiamo impostando la larghezza e il colore di sfondo del pulsante.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
               _setOption: function(key, value) { 
                  switch (key) { 
                     case "width": 
                     this._button.width(value); 
                     break; 
                     case "color":
                     this._button.css("background-color",value);
                     break; 
                  } 
               },
            });
            $("#button2").myButton();
            $("#button2").myButton("option", {width:100,color:"#cedc98"});
         });
      </script>
   </head>
   
   <body>
      <div id = "button2"></div>
   </body>
</html>

Salviamo il codice sopra in un file HTML widgetfactoryexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Aggiunta di metodi al widget personalizzato

Nell'esempio seguente aggiungeremo metodi che l'utente può utilizzare e questi sono molto facili da integrare nel framework. Scriveremo un metodo Move, che sposta il pulsante di una distanza orizzontale specificata. Per farlo funzionare, dobbiamo anche impostare la posizione e le proprietà di sinistra nella funzione _create -

this._button.css("position", "absolute");   
this._button.css("left", "100px");

Successivamente, l'utente può ora chiamare il tuo metodo nel solito modo dell'interfaccia utente jQuery -

this._button.css("position", "absolute");   
this._button.css("left", "100px");
$("button3").myButton("move", 200);
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
         
               move: function(dx) { 
                  var x = dx + parseInt(this._button.css("left")); 
                  this._button.css("left", x); 
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button3").myButton();
            $("#button3").myButton("move", 200);
         });
      </script>
   </head>
   
   <body>
      <div id = "button3"></div>
   </body>
</html>

Salviamo il codice sopra in un file HTML widgetfactoryexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Aggiunta di eventi al widget personalizzato

In questo esempio mostreremo come creare un evento. Per creare un evento tutto ciò che devi fare è utilizzare il metodo _trigger. Il primo parametro è il nome dell'evento, il secondo qualsiasi oggetto evento standard che si desidera passare e il terzo qualsiasi oggetto evento personalizzato che si desidera passare.

Qui stiamo attivando un evento quando se il pulsante si sposta oltre x = 400. Tutto quello che devi fare è aggiungere alla funzione di spostamento:

if(x<400) { this._trigger("outbounds",{}, {position:x}); }

In questo caso l'evento viene chiamato outbound e un oggetto evento vuoto viene passato con un oggetto evento personalizzato che fornisce semplicemente la posizione come unica proprietà.

L'intera funzione di spostamento è:

move: function(dx) {
   var x = dx + parseInt(this._button.css("left")); 
   this._button.css("left", x); 
   if(x<400) { this._trigger("outbounds",{}, {position:x}); }
}

L'utente può impostare la funzione di gestione degli eventi semplicemente definendo un'opzione con lo stesso nome.

$("button4").myButton("option", {
   width: 100, 
   color: "red",
   outbounds:function(e,ui) {
      alert(ui.position);}
});
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $.widget("iP.myButton", {
               _create: function() { 
                  this._button = $("<button>"); 
                  this._button.text("My first Widget Button");
                  this._button.width(this.options.width) 
                  this._button.css("background-color", this.options.color);    
                  this._button.css("position", "absolute");   
                  this._button.css("left", "100px");            
                  $(this.element).append(this._button);
               },
               move: function(dx) { 
                  var x = dx + parseInt(this._button.css("left")); 
                  this._button.css("left", x); 
                  if(x>400) { this._trigger("outbounds",{},  {position:x}); }
               }
            });
            $("#button4").myButton();
            $("#button4").on("mybuttonoutbounds", function(e, ui) {
               alert("out");
            });
            $("#button4").myButton("move", 500);
         });
      </script>
   </head>
   
   <body>
      <div id = "button4"></div>
   </body>
</html>

Salviamo il codice sopra in un file HTML widgetfactoryexample.htm e aprirlo in un browser standard che supporta javascript, si apre una finestra di avviso.