jQuery UI API - Galería de elementos (Widget Factory)

categoría

Utilidad (Utilidades) | widgets (widgets)

jQuery.widget (nombre [, de base], prototipo) Uso

Descripción: Utilice todos los widgets de interfaz de usuario jQuery con la misma abstracción para crear con estado plugin de jQuery.

Usted puede utilizar el $.Widget objeto como a la base de la herencia, o puede ser explícita o jQuery UI desde un control de terceros existente, creado desde cero un nuevo widget. La definición de un widget con el mismo nombre de heredar el elemento de base, e incluso le permite ampliar adecuadamente el widget.

jQuery UI incluye muchos de ellos tienen piezas pequeñas, por lo que el plugin de jQuery típica ligeramente diferentes patrones de uso. Todos los widgets jQuery UI utilizando el mismo modelo, que se compone de las bibliotecas miembros (Widget Factory) definición. Por lo tanto, siempre y cuando se aprende cómo utilizar uno, usted sabe cómo utilizar otros widgets (widgets).

Nota: En esta sección se utiliza el miembro de barra de progreso (Progressbar Widget) La manifestación, pero la sintaxis se aplica a cada widget.

inicialización

Con el fin de realizar un seguimiento del estado de un botón, hay que introducir todo el ciclo de vida del widget. ciclo de vida comienza cuando la inicialización del widget. Para inicializar un widget, simplemente hay que conectar una llamada o una pluralidad de elementos.

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

Esto inicializar el objeto jQuery para cada elemento. Los ejemplos de los elementos anteriores con el ID "elem" .

opciones

Desde progressbar() sin parámetros Cuando llame, el widget se inicializa usando las opciones por defecto. Podemos pasar una serie de opciones para sustituir el valor predeterminado en las opciones de inicialización:

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

Es posible que tengamos que pasar de acuerdo con el número de opciones, que no pasó ninguna de las opciones son utilizar sus valores por defecto.

Puede pasar múltiples opciones de parámetros que se fusionarán en un solo objeto (como $.extend( true, target, object1, objectN ) ). Este número se establece para cubrir todos los casos, el intercambio entre las instancias opción es útil:

var options = {modal: true, espectáculo: "lento"};
$ ( "# Dialog1") .dialog (opciones);
$ ( "# Dialog2") .dialog (opciones, {Autoopen: false});

Todas las opciones se ofrecen durante la copia en profundidad de inicialización, asegurar el seguimiento no afecta a la pequeña parte del caso para modificar el objeto. Matriz es la única excepción, ya que son por referencia. La excepción a esto es con el fin de apoyar adecuadamente el enlace de datos, en el que la fuente de datos debe ser utilizado como referencia.

El valor por defecto se almacena en las propiedades del widget, por lo que puede cubrir el valor de la configuración de la interfaz de usuario jQuery. Por ejemplo, después de los ajustes siguientes, todas las futuras instancias de la barra de progreso de forma predeterminada el valor de 80:

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

Las opciones son parte de un Estado miembro pequeño, por lo que también pueden configurar opciones después de la inicialización. Veremos la opción en los métodos siguientes.

camino

Ahora el widget se ha inicializado, podemos consultar su estado, o realizar acciones en el widget. Todas las acciones se basan en la inicialización después de método es llamado a realizar. Para invocar un método en el widget, pasamos el nombre del método para el plugin de jQuery. Por ejemplo, pidiendo al miembro de barra de progreso (Progressbar el widget) value() método, podemos utilizar:

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

Si el método de toma parámetros, podemos pasar parámetros después de que el nombre del método. Por ejemplo, para pasar un parámetro 40 al value() método, podemos utilizar:

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

Como jQuery de otras maneras, la mayoría de los widgets método devuelve un objeto jQuery:

$ ( "#elem")
  .progressbar ( "valor", 90)
  .addClass ( "casi-hecho");

Cada aplicación tiene sus propios ajustes de métodos, que se basan en la funcionalidad proporcionada por el widget. Sin embargo, hay algunas maneras está presente en todas las piezas pequeñas, que se explicarán en detalle a continuación.

evento

Todos los widgets y tienen una variedad de eventos relacionados con el comportamiento con el fin de que le notifique cuando un cambio de estado. Para la mayoría de piezas pequeñas, cuando se activa el evento, el nombre en letras minúsculas en la forma de un nombre de control como prefijo. Por ejemplo, podemos obligar a la barra de progreso change evento, que se activa cuando el valor cambia.

$ ( "#elem") .bind ( "Progressbarchange", function () {
  alert ( "El valor ha cambiado!");
});

Cada evento tiene una retirada correspondiente, que como una opción. Si es necesario, podemos captar el progreso del change de devolución de llamada, en lugar de la unión progressbarchange evento.

$ ( "#elem") .progressbar ({
  cambiar: function () {
    alert ( "El valor ha cambiado!");
  }
});

Todos los widgets tienen un change de eventos, que se activa cuando se crea una instancia.

instanciación

Ejemplos de widgets es utilizar el nombre completo con una parte pequeña como una clave jQuery.data() tienda. Por lo tanto, puede utilizar el siguiente código desde el elemento para recuperar el objeto de instancia miembro de barra de progreso (Progressbar Widget).

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

Si el elemento está vinculado a un mismo widget, puede utilizar :data la selección de detectar.

$ ( "#elem") .IS ( ": Datos ( 'ui-progressbar')"); // verdadera
$ ( "#elem") .IS ( ": Datos ( 'ui-arrastrable')"); // falsa

También puede utilizar :data para obtener una lista de un widget dada como un ejemplo de todos los elementos.

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

propiedad

Todos los widgets tienen los siguientes atributos:

• defaultElement: Elementos al construir la instancia widget de elementos no están disponibles para su uso. Por ejemplo, debido a que la barra de progreso defaultElement es "<div> ", $.ui.progressbar({ value: 50 }) en una nueva <div> en la instancia de la instancia de widget de barra de progreso.
• documento: contiene piezas pequeñas dentro del elemento document . Útil si usted necesita para interactuar con en el marco del widget.
• elemento: un objeto jQuery que contiene los elementos que se utilizan para crear instancias de widgets. Si selecciona varios elementos y llamar .myWidget() , va a crear una instancia única Reproductor de cada elemento. Por lo tanto, la propiedad siempre contiene un elemento.
• espacio de nombres: widget de ubicación de la tienda prototipo de objeto global jQuery. Por ejemplo, "ui" un namespace representa un pequeño piezas prototipo se almacenan en $.ui .
• opciones: la opción de utilizar un objeto contiene actualmente widgets. Cuando una instancia, cualquiera de las opciones de que dispone el usuario será automáticamente y $.myNamespace.myWidget.prototype.options fusionar los valores definidos. opciones especificadas por el usuario anulan los valores por defecto.
• UUID: un identificador entero único indica control.
• Versión: versión de cadena del widget. Para los widgets jQuery UI, la propiedad se establece en la versión de widgets jQuery UI utilizado. los desarrolladores de módulos adicionales deben establecer explícitamente la propiedad de su prototipo.
• widgetEventPrefix: Permite añadir widgets al prefijo del nombre del evento. Por ejemplo, puede arrastrar y soltar widgets (Widget) se pueden arrastrar de widgetEventPrefix es "drag" , por lo que cuando se crea un arrastrable, nombre del evento es "dragcreate" . De manera predeterminada, el widget widgetEventPrefix es su nombre. Nota: Esta propiedad ha sido abandonada, en el comunicado de futuro mismo. El nombre del evento se cambia a widgetName: eventName (como "draggable:create" ).
• widgetFullName: Widget contiene el nombre completo del espacio de nombres. Por $.widget( "myNamespace.myWidget", {} ) , widgetFullName será "myNamespace-myWidget" .
• widgetName: el nombre del widget. Por $.widget( "myNamespace.myWidget", {} ) , widgetName será "myWidget" .
• ventana: que contiene piezas pequeñas en el interior del elemento de window . Útil si usted necesita para interactuar con en el marco del widget.

jQuery.Widget uso widget de base

Descripción: La biblioteca del widget de widget de base (Widget Factory) uso.

La navegación rápida

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