jQuery UI API - Parte Gallery (Widget Factory)

categoria

Utility (Utilità) | widgets (Widget)

jQuery.widget (nome [, base], prototipo) Utilizzo

Descrizione: Utilizzare tutti i widget jQuery UI con la stessa astrazione per creare stateful plugin per jQuery.

È possibile utilizzare il $.Widget oggetto come alla base di eredità, o può essere esplicitamente o jQuery UI da un controllo di terze parti esistente, creato da zero un nuovo widget. La definizione di un widget con lo stesso nome di ereditare l'elemento di base, e permette anche di espandere correttamente widget.

jQuery UI include molti sono in possesso di piccole parti, in modo che il tipico plugin jQuery leggermente diversi modelli di utilizzo. Tutti i widget jQuery UI utilizzando lo stesso modello, che si compone di librerie membri (Widget Factory) definizione. Quindi, fino a quando si impara a utilizzare uno, si sa come utilizzare altri widget (Widget).

Nota: questa sezione utilizzando il membro barra di avanzamento (Progressbar Widget) La manifestazione, ma la sintassi è applicata a ciascun widget.

inizializzazione

Al fine di monitorare lo stato del widget, dobbiamo introdurre l'intero ciclo di vita del widget. Ciclo di vita inizia quando il widget di inizializzazione. Per inizializzare un widget, abbiamo semplicemente bisogno di collegare una chiamata o una pluralità di elementi.

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

Ciò inizializzare l'oggetto jQuery per ogni elemento. Esempi di elementi di cui sopra con id "elem" .

Opzioni

Dal momento che progressbar() senza parametri quando si chiama, il widget viene inizializzato utilizzando le opzioni di default. Siamo in grado di superare una serie di opzioni per ignorare l'impostazione predefinita nelle opzioni di inizializzazione:

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

Potremmo aver bisogno di passare in base al numero di opzioni, non abbiamo passato una delle opzioni sono di utilizzare i loro valori di default.

È possibile passare opzioni multiple di parametri che verranno uniti in un unico oggetto (come $.extend( true, target, object1, objectN ) ). Questo numero è impostato per coprire tutti i casi, la condivisione tra le istanze opzione è utile:

var options = {modal: true, spettacolo: "lento"};
$ ( "# Dialog1") .dialog (opzioni);
$ ( "# Dialog2") .dialog (opzioni, {AutoOpen: false});

Tutte le opzioni sono consegnati durante la copia profonda inizializzazione, assicurando il follow-up non pregiudica la piccola parte del caso per modificare l'oggetto. Array è l'unica eccezione, come sono per riferimento. L'eccezione è per supportare correttamente l'associazione dati, in cui la sorgente di dati deve essere utilizzato come riferimento.

Il valore predefinito è memorizzato nelle proprietà del widget, in modo da poter coprire il valore delle impostazioni jQuery UI. Ad esempio, dopo le seguenti impostazioni, tutte le future istanze di barra di avanzamento per default il valore di 80:

$ .ui.progressbar.prototype.options.value = 80;

Le opzioni sono parte di un piccolo Stato membro, in modo che possiamo anche impostare le opzioni dopo l'inizializzazione. Vedremo l'opzione nei metodi successive.

modo

Ora il widget è stato inizializzato, siamo in grado di interrogare il suo status, o eseguire azioni su widget. Tutte le azioni sono basate sul metodo di inizializzazione dopo è chiamato a svolgere. Per richiamare un metodo sul widget, passiamo il nome del metodo al plugin jQuery. Ad esempio, chiedendo agli Stati barra di avanzamento (Progressbar il Widget) value() metodo, possiamo utilizzare:

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

Se il metodo accetta parametri, siamo in grado di passare i parametri dopo il nome del metodo. Ad esempio, per passare un parametro 40 al value() metodo, possiamo utilizzare:

$ ( "#elem") .progressbar ( "Valore", 40);

Come jQuery in altri modi, metodo più widget restituisce un oggetto jQuery:

$ ( "#elem")
  .progressbar ( "valore", 90)
  .addClass ( "quasi-fatto");

Ogni widget ha le proprie impostazioni del metodo, che si basano sulla funzionalità fornita dal widget. Tuttavia, ci sono alcuni modi è presente su tutte le piccole parti, che saranno spiegate in dettaglio qui di seguito.

evento

Tutti i widget e hanno una varietà di eventi comportamentali legate al fine di notificare quando un cambiamento di stato. Per la maggior parte piccole parti, quando l'evento viene attivato, il nome in lettere minuscole, sotto forma di un nome di widget come prefisso. Ad esempio, siamo in grado di legare la barra di avanzamento change evento, che viene attivato quando il valore cambia.

$ ( "#elem") .bind ( "Progressbarchange", function () {
  alert ( "Il valore è cambiato!");
});

Ogni evento ha un corrispondente ritiro, che come opzione. Se necessario, si può afferrare il progresso del change callback, piuttosto che vincolanti progressbarchange evento.

$ ( "#elem") .progressbar ({
  cambiare: function () {
    alert ( "Il valore è cambiato!");
  }
});

Tutti i widget hanno un change evento, che viene attivato quando un'istanza.

instantiation

Esempi di widget è quello di utilizzare il nome completo con una piccola parte come chiave jQuery.data() negozio. Pertanto, è possibile utilizzare il seguente codice dall'elemento per recuperare l'oggetto istanza membro barra di avanzamento (Progressbar Widget).

$ ( "#elem") .data ( "Ui-progressbar");

Se l'elemento è legato per un dato widget, è possibile utilizzare :data di selezione per individuare.

$ ( "#elem") .IS ( ": Dati ( 'ui-progressbar')"); // true
$ ( "#elem") .IS ( ": Dati ( 'ui-trascinabile')"); // false

È inoltre possibile utilizzare :data per ottenere un elenco di un determinato oggetto quando una lista di tutti gli elementi.

$ ( ": Dati ( 'ui-progressbar')");

proprietà

Tutti i widget hanno i seguenti attributi:

• defaultElement: elementi durante la costruzione della non disponibili elementi widget di istanza da utilizzare. Ad esempio, poiché la barra di avanzamento defaultElement è "<div> ", $.ui.progressbar({ value: 50 }) in un nuovo <div> nell'istanza del widget barra di avanzamento esempio.
• documento: contiene piccole parti all'interno dell'elemento document . Utile se avete bisogno di interagire con, nel quadro del widget.
• elemento: un oggetto jQuery che contiene gli elementi utilizzati per creare un'istanza di widget. Se si selezionano più elementi e chiamare .myWidget() , si creerà una singola istanza Widget di ogni elemento. Pertanto, la proprietà contiene sempre un elemento.
• namespace: Posizione widget di prototipo negozio oggetto globale jQuery. Ad esempio, "ui" un namespace rappresenta una piccola prototipi vengono memorizzati in $.ui .
• opzioni: la possibilità di utilizzare un oggetto contiene attualmente i widget. Quando un'istanza, una delle opzioni fornite dall'utente saranno automaticamente e $.myNamespace.myWidget.prototype.options unire default definiti. opzioni specificate dall'utente sovrascrivono i valori di default.
• uuid: un identificatore unico intero indica il controllo.
• Versione: la versione stringa del widget. Per i widget jQuery UI, la proprietà verrà impostata alla versione di widget jQuery UI utilizzata. Gli sviluppatori plug-in deve impostare in modo esplicito la proprietà del loro prototipo.
• widgetEventPrefix: Aggiungere i widget per il prefisso del nome della manifestazione. Ad esempio, possibile trascinare e rilasciare i widget (Draggable Widget) di widgetEventPrefix è "drag" , in modo che quando si crea un trascinabili, il nome della manifestazione è "dragcreate" . Per impostazione predefinita, il widget widgetEventPrefix è il suo nome. Nota: Questa proprietà è stata abbandonata, per lo futura release. Il nome dell'evento è cambiato in widgetName: eventName (come ad esempio "draggable:create" ).
• widgetFullName: widget di contiene il nome completo dello spazio dei nomi. Per $.widget( "myNamespace.myWidget", {} ) , widgetFullName sarà "myNamespace-myWidget" .
• widgetName: il nome del widget. Per $.widget( "myNamespace.myWidget", {} ) , widgetName sarà "myWidget" .
• Finestra: contiene piccole parti all'interno dell'elemento window . Utile se avete bisogno di interagire con, nel quadro del widget.

widget di base jQuery.Widget utilizzo

Descrizione: La libreria di base widget di Widget (Widget Factory) uso.

navigazione rapida

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

// getter
var disabled = $( ".selector" ).widget( "option", "disabled" );
 
// setter
$( ".selector" ).widget( "option", "disabled", true );
	

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

// getter
var hide = $( ".selector" ).widget( "option", "hide" );
 
// setter
$( ".selector" ).widget( "option", "hide", { effect: "explode", duration: 1000 } );
	

$( ".selector" ).widget({ show: { effect: "blind", duration: 800 } });
	

// getter
var show = $( ".selector" ).widget( "option", "show" );
 
// setter
$( ".selector" ).widget( "option", "show", { effect: "blind", duration: 800 } );
	

_create: function() {
  this.element.css( "background-color", this.options.color );
}
	

this._delay( this._foo, 100 );
	

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

this._focusable( this.element.find( ".my-items" ) );
	

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

_getCreateOptions: function() {
  return { id: this.element.attr( "id" ) };
}
	

this._hide( this.element, this.options.hide, function() {
 
  // Remove the element from the DOM when it's fully hidden.
  $( this ).remove();
});
	

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

_init: function() {
  if ( this.options.autoOpen ) {
    this.open();
  }
}
	

this._off( this.element, "click" );
	

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

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

_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();
  }
}
	

this._show( this.element, this.options.show, function() {
 
  // Focus the element when it's fully visible.
  this.focus();
}
	

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

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

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()
    });
  }
});
	

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

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

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

this.option( "width" );
	

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

this.option( "width", 500 );
	

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

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

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

$( ".selector" ).on( "widgetcreate", function( event, ui ) {} );