jQuery UI API - Galerie partie (Widget Factory)

catégorie

Utility (Utilitaires) | widgets (Widgets)

jQuery.widget (nom [, base], prototype) Utilisation

Description: Utilisez tous les widgets jQuery UI avec le même abstraction pour créer stateful plugin jQuery.

Vous pouvez utiliser le $.Widget objet à la base de l' héritage, ou peut - être explicitement ou jQuery UI à partir d' un contrôle tiers existant, créé à partir de zéro un nouveau widget. La définition d'un widget avec le même nom d'hériter l'élément de base, et même vous permet de développer correctement le widget.

jQuery UI comprend un grand nombre détiennent de petites pièces, de sorte que le jQuery typique Plugin légèrement différents modèles d'utilisation. Tous les widgets jQuery UI en utilisant le même modèle, qui est composé de bibliothèques membres (Widget Factory) de définition. Donc, aussi longtemps que vous apprendrez à utiliser un, vous savez comment utiliser d'autres widgets (Widget).

Remarque: Cette section en utilisant l'élément de barre de progression (Progressbar Widget) La démonstration, mais la syntaxe est appliquée à chaque gadget.

Initialisation

Afin de suivre l'état du widget, nous devons introduire l'ensemble du cycle de vie du widget. Le cycle de vie commence lorsque le widget initialisation. Pour initialiser un widget, nous avons simplement besoin de brancher un appel ou une pluralité d'éléments.

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

Cela va initialiser l'objet jQuery pour chaque élément. Des exemples des éléments ci - dessus avec id "elem" .

options de

Depuis progressbar() sans paramètre lorsque vous appelez, le widget est initialisé en utilisant les options par défaut. Nous pouvons adopter un ensemble d'options pour remplacer la valeur par défaut dans les options d'initialisation:

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

Nous pouvons avoir besoin de passer en fonction du nombre d'options, nous ne passons les options sont à utiliser leurs valeurs par défaut.

Vous pouvez passer plusieurs options de paramètres qui seront fusionnés en un seul objet (comme $.extend( true, target, object1, objectN ) ). Ce nombre est appelé à couvrir tous les cas, le partage entre les instances option est utile:

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

Toutes les options sont fournies lors de la copie profonde initialisation, d'assurer le suivi n'a pas une incidence sur la petite partie de l'affaire pour modifier l'objet. Tableau est la seule exception, car ils sont par référence. L'exception à cette règle est dans le but de soutenir correctement la liaison de données, dans lequel la source de données doit être utilisé comme référence.

La valeur par défaut est stockée dans les propriétés du widget, afin que nous puissions couvrir la valeur des paramètres jQuery UI. Par exemple, après les paramètres suivants, toutes les instances futures de la barre de progression seront par défaut à la valeur 80:

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

Les options font partie d'un petit Etat membre, afin que nous puissions également définir des options après l'initialisation. Nous allons voir l'option dans les méthodes suivantes.

manière

Maintenant, le widget a été initialisé, nous pouvons interroger son état, ou effectuer des actions sur le widget. Toutes les actions sont basées sur après la méthode d'initialisation est appelé à effectuer. Pour invoquer une méthode sur le widget, nous passons le nom de la méthode pour le plugin jQuery. Par exemple, appeler sur l'élément de barre de progression (Progressbar le Widget) value() méthode, nous pouvons utiliser:

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

Si la méthode prend des paramètres, nous pouvons passer des paramètres après le nom de la méthode. Par exemple, pour passer un paramètre 40 à la value() méthode, nous pouvons utiliser:

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

Comme jQuery par d'autres moyens, la méthode la plupart des widgets retourne un objet jQuery:

$ ( "#elem")
  .progressbar ( "valeur", 90)
  .addClass ( «presque-fait»);

Chaque widget dispose de ses propres paramètres de méthode, qui sont basés sur la fonctionnalité fournie par le widget. Cependant, il existe des moyens est présent sur toutes les petites pièces, qui seront expliquées en détail ci-dessous.

événement

Tous les widgets et ils ont une variété d'événements liés au comportement afin de vous informer quand un changement d'état. Pour la plupart des petites pièces, lorsque l'événement est déclenché, le nom en lettres minuscules sous la forme d'un nom de widget comme un préfixe. Par exemple, nous pouvons lier la barre de progression change événement, qui est déclenché lorsque la valeur change.

$ ( "#elem") .bind ( "Progressbarchange", function () {
  alert ( "La valeur a changé!");
});

Chaque événement a un recul correspondant, qui, comme une option. Si nécessaire, nous pouvons saisir les progrès du change rappel, plutôt que de se lier progressbarchange événement.

$ ( "#elem") .progressbar ({
  changer: function () {
    alert ( "La valeur a changé!");
  }
});

Tous les widgets ont un change événement, qui est déclenché lorsque instancié.

instanciation

Des exemples de widgets est d'utiliser le nom complet avec une petite partie comme une clé jQuery.data() magasin. Par conséquent, vous pouvez utiliser le code suivant de l'élément pour récupérer l'élément de barre de progression (Progressbar Widget) objet d'instance.

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

Que ce soit l'élément est lié pour un widget donné, vous pouvez utiliser :data les :data de sélection pour détecter.

$ ( "#elem") .is ( ": Données ( 'ui-progressbar')"); // true
$ ( "#elem") .is ( ": Données ( 'ui-draggable')"); // false

Vous pouvez également utiliser :data les :data pour obtenir une liste d'un widget donné comme un exemple de tous les éléments.

$ ( ": Données ( 'ui-progressbar')");

propriété

Tous les widgets ont les attributs suivants:

• defaultElement: éléments lors de la construction de l'instance widget de éléments non disponibles à utiliser. Par exemple, parce que la barre de progression defaultElement est "<div> ", $.ui.progressbar({ value: 50 }) dans une nouvelle <div> sur l'instance de l'instance de widget barre de progression.
• document: contient des petites pièces dans l'élément document . Utile si vous avez besoin d'interagir avec dans le cadre du widget.
• élément: un objet jQuery qui contient les éléments utilisés pour instancier widgets. Si vous sélectionnez plusieurs éléments et appelez .myWidget() , vous allez créer une seule instance de widget de chaque élément. Par conséquent, la propriété contient toujours un élément.
• namespace: un widget Emplacement magasin prototype objet global jQuery. Par exemple, "ui" un namespace de $.ui namespace représente une petite pièces prototypes sont stockés dans $.ui .
• Options: l'option d'utiliser un objet contient actuellement des widgets. Lorsque instancié, l' une des options fournies par l'utilisateur seront automatiquement et $.myNamespace.myWidget.prototype.options fusionner les valeurs par défaut définies. Options de l'utilisateur spécifié remplacent les valeurs par défaut.
• uuid: un identifiant unique entier indique le contrôle.
• Version: version chaîne du widget. Pour les widgets jQuery UI, la propriété sera définie sur la version de widgets jQuery UI utilisé. les développeurs de plug-in doivent explicitement définir la propriété de leur prototype.
• widgetEventPrefix: Ajouter des widgets au nom du préfixe de l'événement. Par exemple, peut faire glisser et déposer widgets (Draggable Widget) de widgetEventPrefix est "drag" , de sorte que lorsque vous créez un draggable, le nom de l'événement est "dragcreate" . Par défaut, le widget widgetEventPrefix est son nom. Remarque: Cette propriété a été abandonnée, à la libération très future. Le nom de l' événement est modifié pour nomwidget: eventName (tels que "draggable:create" ).
• widgetFullName: Widget contient le nom complet de l'espace de noms. Pour $.widget( "myNamespace.myWidget", {} ) , widgetFullName sera "myNamespace-myWidget" .
• nomwidget: le nom du widget. Pour $.widget( "myNamespace.myWidget", {} ) , widgetName sera "myWidget" .
• fenêtre: il contient de petites pièces à l' intérieur de l'élément window . Utile si vous avez besoin d'interagir avec dans le cadre du widget.

jQuery.Widget utilisation du widget base

Description: La bibliothèque de widgets widget de base (Widget Factory) utilisation.

navigation rapide

$( ".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 ) {} );