Modo de empleo librería de widgets jQuery UI
Vamos a crear una barra de progreso. Como se muestra en los siguientes ejemplos, que llamando jQuery.widget() para completar, que toma dos parámetros: se va a crear un plug-in nombre, un texto que contiene el objeto es una función de plug-in de apoyo. Cuando el enchufe se llama, se crea un nuevo plug-in de ejemplo, todas las funciones son ejecutadas en el contexto de este ejemplo. Este dos maneras importantes norma diferente plugin de jQuery. En primer lugar, el contexto es un objeto, no un elemento DOM. En segundo lugar, el contexto es siempre un objeto único, no una colección.
$.widget( "custom.progressbar", {
_create: function() {
var progress = this.options.value + "%";
this.element
.addClass( "progressbar" )
.text( progress );
}
});
Debe contener el nombre del espacio de nombres plugin, en este ejemplo, se utiliza un custom espacio de nombres. Sólo puede crear una capa profunda de espacio de nombres, por lo tanto, custom.progressbar es un plug-in efectiva nombre, very.custom.progressbar no es un plug-in de nombre válido.
Vimos biblioteca de piezas (Widget Factory) nos proporciona dos propiedades. this.element es un objeto jQuery que contiene un elemento. Si llamamos al objeto plug-in de jQuery que contiene varios elementos, se creará un plug-in separado instancia para cada elemento y cada instancia tendrá su propio this.element . La segunda propiedad, this.options , es un plug-in opciones incluyen todos los pares de nombre / valor clave hash (hash). Estas opciones se pueden pasar a plug-in, de la siguiente manera:
$( "<div></div>" )
.appendTo( "body" )
.progressbar({ value: 20 });
Cuando llamamos jQuery.widget() , que al dar jQuery.fn (utilizado para crear un sistema de conexión estándar) añadir la función de extender jQuery. Se añade una función basada en su pase jQuery.widget() nombre sin el espacio de nombres - "progressbar". opción de paso enchufe es obtener el valor establecido en la instancia del complemento. Como se muestra en el siguiente ejemplo, se puede especificar un valor predeterminado para cualquier opción. Al diseñar su API, se debe tener en cuenta el uso más común de su plug-in, por lo que puede establecer el valor predeterminado adecuado, y garantizar que todas las opciones verdaderamente opcional.
$.widget( "custom.progressbar", {
// Default options.
options: {
value: 0
},
_create: function() {
var progress = this.options.value + "%";
this.element
.addClass( "progressbar" )
.text( progress );
}
});
Llamar a los métodos de plug-in
Ahora podemos inicializar nuestra barra de progreso, vamos a realizar una acción llamando al método en la instancia del plug-in. Para definir un método de plug-in, que sólo pasamos jQuery.widget() referencia a un objeto de función. También podemos definir el método "privado" al nombre de la función con un prefijo de subrayado.
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
var progress = this.options.value + "%";
this.element
.addClass( "progressbar" )
.text( progress );
},
// Create a public method.
value: function( value ) {
// No value passed, act as a getter.
if ( value === undefined ) {
return this.options.value;
}
// Value passed, act as a setter.
this.options.value = this._constrain( value );
var progress = this.options.value + "%";
this.element.text( progress );
},
// Create a private method.
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
}
});
Para invocar un método en una instancia de plug-in, puede pasar el nombre del método para el plugin de jQuery. Si se llama a un método para aceptar parámetros, simplemente, pasar el nombre del método detrás de estos parámetros.
Nota: La función de jQuery se pasa al mismo nombre de método utilizado para inicializar el plug-in para realizar el método. Esto se hace para evitar la contaminación del espacio de nombres jQuery manteniendo al mismo tiempo las llamadas a métodos de cadena. En los capítulos siguientes, veremos otros usos parezcan más naturales.
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar({ value: 20 });
// Get the current value.
alert( bar.progressbar( "value" ) );
// Update the value.
bar.progressbar( "value", 50 );
// Get the current value again.
alert( bar.progressbar( "value" ) );
Utilice las opciones
option() método se entrega automáticamente al plug-in. option() método le permite obtener y establecer opciones después de la inicialización. El método como jQuery .css() y .attr() método: Sólo puede pasar un nombre como argumento consiste en utilizar, también puede pasar un nombre y valor como conjunto utilizando o pasando un nombre de clave / valor pares hash en establecer varios valores. Cuando se usa como un valor, un plug-in devuelve el nombre de la opción de entrada de valor de corriente correspondiente. Cuando se utiliza como un setter, widget de _setOption método será llamado para cada opción se establece. Podemos especificar un plug-in en nuestro _setOption método para reflejar el cambio de opciones. Cambiar las opciones de acción que debe realizarse de forma independiente, podemos anular _setOptions .
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
}
});
Añadir devolución de llamada
La extensión más simple consiste en añadir una devolución de llamada para que los usuarios puedan reaccionar cuando se produzcan cambios en el estado de plug-in. Podemos ver en el siguiente ejemplo de cómo agregar una devolución de llamada a la barra de progreso cuando la barra de progreso llegue al 100 por ciento. _trigger() método tiene tres argumentos: el nombre de la devolución de llamada, un evento de devolución de llamada jQuery comenzó objetos, y un hash de los datos asociados con el evento. Nombre de devolución de llamada es el único parámetro requerido, pero que quieren poner en práctica la aduana ofrece a los usuarios el plug-in, los otros parámetros son muy útiles. Por ejemplo, si creamos un plugin que pueden arrastrarse, podemos pasar evento de arrastre mousemove cuando se activa la devolución de llamada, lo que permitirá a los usuarios responder al evento basado en el objeto proporcionado por las coordenadas X / Y del arrastre. Por favor note que pasó a _trigger() del evento original debe ser un evento jQuery en lugar de una serie de eventos navegador nativo.
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
if ( this.options.value == 100 ) {
this._trigger( "complete", null, { value: 100 } );
}
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
}
});
función de devolución esencialmente sólo una opción adicional, para que pueda obtener lo mismo que las otras opciones y nos ha salvado. Siempre devolución de llamada, habrá un evento correspondiente se activa. Tipo de evento es por su nombre y el nombre de la función de devolución de llamada para determinar la clavija de conexión. Devolución de llamada y el evento aceptan los mismos dos argumentos: un objeto de evento y un hash de los datos asociados con el evento, especialmente en lo que se muestra en los siguientes ejemplos. Puede que tenga que incluir una serie de características de plug-in para evitar que los usuarios, con el fin de hacer esto, la mejor manera es crear amor puede revocar las devoluciones de llamada. Los usuarios pueden revocar devolución de llamada o un evento relacionado con un nativo revocar cualquier evento con ellos, son llamando event.preventDefault() o el retorno false de lograr. Si revoca devolución de llamada, _trigger() método devolverá false , por lo que puede lograr la función apropiada de los plug-ins.
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar({
complete: function( event, data ) {
alert( "Callbacks are great!" );
}
})
.bind( "progressbarcomplete", function( event, data ) {
alert( "Events bubble and support many handlers for extreme flexibility." );
alert( "The progress bar value is " + data.value );
});
bar.progressbar( "option", "value", 100 );
naturaleza
Ahora hemos visto cómo utilizar la biblioteca del widget (Widget Factory) para crear un plug-in, vamos a ver cómo funciona realmente. Cuando se llama a jQuery.widget() , se crea una función constructora para el plug-in y establecer su instancia del complemento se pasa como un objeto prototipo. Todas las funciones se añaden automáticamente al widget proviene de un widget de un prototipo básico, definido como jQuery.Widget.prototype . Cuando se crea una instancia será utilizado en los plug- jQuery.data lo almacena en el elemento DOM original, plug-in de nombre que el nombre de la clave.
Dado que la instancia del complemento directamente relacionado con el elemento DOM, se puede acceder directamente al plug-in de ejemplo, sin la necesidad de atravesar los métodos enchufables. Este método le permitirá llamar directamente en la instancia de plug-in, sin la necesidad de pasar un nombre de método de cadena, y también se puede acceder a las propiedades se conectan directamente.
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar()
.data( "progressbar" );
// Call a method directly on the plugin instance.
bar.option( "value", 50 );
// Access properties on the plugin instance.
alert( bar.options.value );
También puede crear una instancia del plug-in sin métodos de recorrido, y la opción de llamar a los elementos directamente del constructor:
var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") );
// Same result as before.
alert( bar.options.value );
Extensión del prototipo
los constructores y los prototipos de Widget mayor ventaja es extensiones fáciles. Al añadir o modificar el prototipo enchufe método, podemos modificar el comportamiento del widget de todas las instancias. Por ejemplo, si queremos añadir un método a la barra de progreso para restablecer a 0% de avance, podemos añadir este método para el prototipo, que será llamado en todas las instancias de plug-in.
$.custom.progressbar.prototype.reset = function() {
this._setOption( "value", 0 );
};
Para los widgets extendidas para más detalles y cómo crear un nuevo widget en una cuenta existente de widget de más detalles, ver el widget de extendido (Widget) por las bibliotecas miembros (de la fábrica de widgets) .
aclarar
En algunos casos, la aplicación permite al usuario plug-ins, y luego cancelar la solicitud. Puede _destroy() para hacer este método. En _destroy() dentro de un método, debe revocar todas las medidas durante la inicialización y después de la utilización de plug-ins hacen. _destroy() por .destroy() se llama al método .destroy() método es un plug-in de casos en los que la eliminación de un elemento a partir de los enlaces con el DOM llamadas de forma automática, por lo que puede ser utilizado para la recolección de basura. Básica .destroy() método se usa también comúnmente para hacer frente a algunas operaciones de limpieza, tales como la eliminación del elemento DOM desde la instancia Reproductor citada, espacio de nombres de desvinculación widget de todos los eventos de los elementos, el uso de desvinculación todo _bind() añadir eventos.
$.widget( "custom.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
if ( this.options.value == 100 ) {
this._trigger( "complete", null, { value: 100 } );
}
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
},
_destroy: function() {
this.element
.removeClass( "progressbar" )
.text( "" );
}
});
Cerrar notas
Biblioteca de componentes (Widget Factory) es una forma de crear un estado para el enchufe. Hay otros modelos diferentes pueden ser utilizados, y cada uno tiene sus propias ventajas y desventajas. Biblioteca de componentes (Widget Factory) resuelve muchos problemas comunes, y mejora notablemente la eficiencia, sino que también mejoran en gran medida la capacidad de reutilización del código, por lo que es adecuado para jQuery UI y otro estado de los plug-ins.
Tenga en cuenta que en esta sección se utiliza el custom espacio de nombres. ui espacio de nombres está reservado oficial plugin de jQuery UI. Al crear sus propios plug-ins, usted debe crear su propio espacio de nombres. Con el fin de mayor claridad de donde enchufe, que pertenece a la gama.