JqueryUI - Fábrica de widgets
Anteriormente, la única forma de escribir controles personalizados en jQuery era extender el espacio de nombres $ .fn . Esto funciona bien para widgets simples. Suponga que crea widgets con más estado, rápidamente se vuelve engorroso. Para ayudar en el proceso de creación de widgets, se introdujo Widget Factory en la interfaz de usuario de jQuery, que elimina la mayor parte del texto estándar que normalmente se asocia con la administración de un widget.
JQueryUI Widget Factory es simplemente una función ($ .widget) que toma un nombre de cadena y un objeto como argumentos y crea un complemento jQuery y una "Clase" para encapsular su funcionalidad.
Sintaxis
La siguiente es la sintaxis del método jQueryUI Widget Factory:
jQuery.widget( name [, base ], prototype )
name- Es una cadena que contiene un espacio de nombres y el nombre del widget (separado por un punto) del widget a crear.
base- El widget base del que heredar. Este debe ser un constructor que pueda instanciarse con la palabra clave `new`. El valor predeterminado es jQuery.Widget .
prototype- El objeto que se utilizará como prototipo del widget del que heredará. Por ejemplo, jQuery UI tiene un complemento de "mouse" en el que se basan el resto de los complementos de interacción. Para lograr esto, se puede arrastrar, soltar, etc. , todos heredan del complemento del mouse así: jQuery.widget ("ui.draggable", $ .ui.mouse, {...}); Si no proporciona este argumento, el widget heredará directamente del "widget base", jQuery.Widget (observe la diferencia entre jQuery.widget "w" minúscula y jQuery.Widget "W" mayúscula).
Widget base
El widget base es el widget utilizado por la fábrica de widgets.
Opciones
La siguiente tabla enumera las diferentes opciones que se pueden usar con el widget base:
No Señor. | Opción y descripción |
---|---|
1 | discapacitado Esta opción desactiva el widget si se establece en true . Por defecto su valor esfalse. Option - disabledhide Esta opción desactiva el widget si se establece en true . Por defecto su valor esfalse. Example
|
2 | esconder Esta opción determina cómo animar la ocultación del elemento. Por defecto su valor esnull. Option - hide Esta opción determina cómo animar la ocultación del elemento. Por defecto su valor esnull. Esto puede ser de tipo:
Example
|
3 | show Esta opción determina cómo animar la visualización del elemento. Por defecto su valor esnull. Option - show Esta opción determina cómo animar la visualización del elemento. Por defecto su valor esnull. Esto puede ser de tipo:
Example
|
Métodos
La siguiente tabla enumera los diferentes métodos que se pueden usar con el widget base:
No Señor. | Acción Descripción |
---|---|
1 | _crear() Este método es el constructor del widget. No hay parámetros, pero this.element y this.options ya están configuradas. Action - _create() Esta acción destruye completamente la funcionalidad de acordeón de un elemento. Los elementos vuelven a su estado previo al inicio. Este método es el constructor del widget. No hay parámetros, pero this.element y this.options ya están configuradas. Example
|
2 | _delay (fn [, delay]) Este método invoca la función proporcionada después de un retraso especificado. Devuelve el ID de tiempo de espera para usar con clearTimeout () . Action - _delay( fn [, delay ] ) Este método invoca la función proporcionada después de un retraso especificado. Devuelve el ID de tiempo de espera para usar con clearTimeout () . Example
|
3 | _destruir() El método público destroy () limpia todos los datos comunes, eventos, etc. y luego delega en este método _destroy () para una limpieza personalizada, específica del widget. Action - _destroy() El método público destroy () limpia todos los datos comunes, eventos, etc. y luego delega en este método _destroy () para una limpieza personalizada, específica del widget. Example
|
4 | _focusable (elemento) Este método configura el elemento para aplicar la clase ui-state-focus en el enfoque. Los controladores de eventos se limpian automáticamente al destruir. Action - _focusable( element ) Este método configura el elemento para aplicar la clase ui-state-focus en el enfoque. Los controladores de eventos se limpian automáticamente al destruir. Example
|
5 | _getCreateEventData () Todos los widgets activan el evento de creación . De forma predeterminada, no se proporcionan datos en el evento, pero este método puede devolver un objeto que se pasará como los datos del evento de creación. Action - _getCreateEventData() Todos los widgets activan el evento de creación . De forma predeterminada, no se proporcionan datos en el evento, pero este método puede devolver un objeto que se pasará como los datos del evento de creación. Example
|
6 | _getCreateOptions () Este método permite que el widget defina un método personalizado para definir opciones durante la instanciación. Las opciones proporcionadas por el usuario anulan las opciones devueltas por este método, que anulan las opciones predeterminadas. Action - _getCreateOptions() Este método permite que el widget defina un método personalizado para definir opciones durante la instanciación. Las opciones proporcionadas por el usuario anulan las opciones devueltas por este método, que anulan las opciones predeterminadas. Example
|
7 | _hide (elemento, opción [, devolución de llamada]) Este método oculta un elemento inmediatamente, usando métodos de animación integrados o usando efectos personalizados. Consulte la opción ocultar para conocer los posibles valores de las opciones. Action - _hide( element, option [, callback ] ) Este método oculta un elemento inmediatamente, usando métodos de animación integrados o usando efectos personalizados. Consulte la opción ocultar para conocer los posibles valores de las opciones. Example
|
8 | _hoverable (elemento) Este método configura el elemento para aplicar la clase ui-state-hover al pasar el mouse. Los controladores de eventos se limpian automáticamente al destruir. Action - _hoverable( element ) Este método configura el elemento para aplicar la clase ui-state-hover al pasar el mouse. Los controladores de eventos se limpian automáticamente al destruir. Example
|
9 | _en eso() Cada vez que se llama al complemento sin argumentos o con solo una opción hash, el widget se inicializa; esto incluye cuando se crea el widget. Action - _init() Cada vez que se llama al complemento sin argumentos o con solo una opción hash, el widget se inicializa; esto incluye cuando se crea el widget. Example
|
10 | _off (elemento, eventName) Este método desvincula los controladores de eventos de los elementos especificados. Action - _off( element, eventName ) Este método desvincula los controladores de eventos de los elementos especificados. Example
|
11 | _on ([suppressDisabledCheck] [, elemento], controladores) Vincula los controladores de eventos a los elementos especificados. La delegación se admite mediante selectores dentro de los nombres de eventos, por ejemplo, "haga clic en .foo". Action - _on( [suppressDisabledCheck ] [, element ], handlers ) Vincula los controladores de eventos a los elementos especificados. La delegación se admite mediante selectores dentro de los nombres de eventos, por ejemplo, "haga clic en .foo". Example
|
12 | _setOption (clave, valor) Este método se llama desde el método _setOptions () para cada opción individual. El estado del widget debe actualizarse según los cambios. Action - _setOption( key, value ) Este método se llama desde el método _setOptions () para cada opción individual. El estado del widget debe actualizarse según los cambios. Example
|
13 | _setOptions (opciones) Este método se llama siempre que se llama al método option (), independientemente de la forma en que se llamó al método option (). Action - _setOptions( options ) Este método se llama siempre que se llama al método option (), independientemente de la forma en que se llamó al método option (). Example
|
14 | _show (elemento, opción [, devolución de llamada]) Muestra un elemento de forma inmediata, utilizando métodos de animación integrados o utilizando efectos personalizados. Consulte la opción mostrar para conocer los posibles valores de las opciones. Action - _show( element, option [, callback ] ) Muestra un elemento de forma inmediata, utilizando métodos de animación integrados o utilizando efectos personalizados. Consulte la opción mostrar para conocer los posibles valores de las opciones. Example
|
15 | _super ([arg] [, ...]) Este método invoca el método del mismo nombre desde el widget principal, con cualquier argumento especificado. Esencialmente .call (). Action - _super( [arg ] [, ... ] ) Este método invoca el método del mismo nombre desde el widget principal, con cualquier argumento especificado. Esencialmente .call (). Example
|
dieciséis | _superApply (argumentos) Invoca el método del mismo nombre desde el widget principal, con la matriz de argumentos. Action - _superApply( arguments ) Invoca el método del mismo nombre desde el widget principal, con la matriz de argumentos. Example
|
17 | _trigger (tipo [, evento] [, datos]) Este método desencadena un evento y su devolución de llamada asociada. La opción con el nombre igual al tipo se invoca como devolución de llamada. Action - _trigger( type [, event ] [, data ] ) Este método desencadena un evento y su devolución de llamada asociada. La opción con el nombre igual al tipo se invoca como devolución de llamada. Example
|
18 | destruir() Este método elimina la funcionalidad del widget por completo. Esto devolverá el elemento a su estado previo al inicio. Action - destroy() Este método elimina la funcionalidad del widget por completo. Esto devolverá el elemento a su estado previo al inicio. Example
|
19 | inhabilitar() Este método desactiva el widget. Action - disable() Este método desactiva el widget. Example
|
20 | habilitar() Este método habilita el widget. Action - enable() Este método habilita el widget. Example
|
21 | opción (optionName) Este método obtiene el valor asociado actualmente con el optionName especificado . Action - option( optionName ) Este método obtiene el valor asociado actualmente con el optionName especificado . Example
|
22 | opción() Este método obtiene un objeto que contiene pares clave / valor que representan el hash de opciones del widget actual. Action - option() Este método obtiene un objeto que contiene pares clave / valor que representan el hash de opciones del widget actual. Example
|
23 | opción (optionName, valor) Este método establece el valor de la opción del widget asociada con el optionName especificado. Action - option( optionName, value ) Este método establece el valor de la opción del widget asociada con el optionName especificado. Example
|
24 | opción (opciones) Este método establece una o más opciones para el widget. Action - option( options ) Este método establece una o más opciones para el widget. Example
|
25 | widget () Este método devuelve un objeto jQuery que contiene el elemento original u otro elemento generado relevante. Action - widget() Este método devuelve un objeto jQuery que contiene el elemento original u otro elemento generado relevante. Example
|
Eventos
No Señor. | Método y descripción del evento |
---|---|
1 | crear (evento, ui) Este evento se activa cuando se crea un widget. Event - create( event, ui ) Este evento se activa cuando se crea un widget. Donde evento es de tipo Evento y ui es de tipo Objeto . Syntax
|
Ciclo de vida de fábrica de widgets de jQueryUI
La fábrica de widgets jQueryUI proporciona una forma orientada a objetos de administrar el ciclo de vida de un widget. Estas actividades del ciclo de vida incluyen:
Crear y destruir un widget: por ejemplo,
$( "#elem" ).progressbar();
Cambiar las opciones del widget: por ejemplo
$( "#elem" ).progressbar({ value: 20 });
Realizar llamadas "super" en widgets de subclases: por ejemplo
$( "#elem" ).progressbar( "value" );
or
$( "#elem" ).progressbar( "value", 40 );
Notificaciones de eventos: por ejemplo
$( "#elem" ).bind( "progressbarchange", function() {
alert( "The value has changed!" );
});
Ejemplo
Ahora creemos un widget personalizado en el siguiente ejemplo. Crearemos un widget de botón. Veremos cómo crear opciones, métodos y eventos en un widget en los siguientes ejemplos:
Creación de un widget personalizado
Primero creemos un widget personalizado simple.
<!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>
Guardemos el código anterior en un archivo HTML widgetfactoryexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:
Agregar opciones al widget personalizado
En el ejemplo anterior, usamos la función _create para crear un control personalizado. Pero los usuarios generalmente quieren personalizar el control configurando y modificando opciones. Podemos definir un objeto de opciones que almacena los valores predeterminados para todas las opciones que defina. La función _setOption se utiliza para este propósito. Se llama para cada opción individual que establece el usuario. Aquí estamos configurando el ancho y el color de fondo del botón.
<!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>
Guardemos el código anterior en un archivo HTML widgetfactoryexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:
Agregar métodos al widget personalizado
En el siguiente ejemplo, agregaremos métodos que el usuario puede utilizar y que son muy fáciles de integrar en el marco. Escribiremos un método Move, que desplaza el botón una distancia horizontal especificada. Para que esto funcione, también necesitamos establecer la posición y las propiedades izquierdas en la función _create -
this._button.css("position", "absolute");
this._button.css("left", "100px");
Después de esto, el usuario ahora puede llamar a su método de la forma habitual de jQuery UI:
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>
Guardemos el código anterior en un archivo HTML widgetfactoryexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:
Agregar eventos al widget personalizado
En este ejemplo demostraremos cómo crear un evento. Para crear un evento, todo lo que tiene que hacer es usar el método _trigger. El primer parámetro es el nombre del evento, el segundo cualquier objeto de evento estándar que desee pasar y el tercero cualquier objeto de evento personalizado que desee pasar.
Aquí estamos disparando un evento cuando el botón se mueve más allá de x = 400. Todo lo que tiene que hacer es agregar a la función de movimiento:
if(x<400) { this._trigger("outbounds",{}, {position:x}); }
En este caso, el evento se llama outbounds y se pasa un objeto de evento vacío con un objeto de evento personalizado que simplemente proporciona la posición como su única propiedad.
Toda la función de movimiento es:
move: function(dx) {
var x = dx + parseInt(this._button.css("left"));
this._button.css("left", x);
if(x<400) { this._trigger("outbounds",{}, {position:x}); }
}
El usuario puede configurar la función de manejo de eventos simplemente definiendo una opción con el mismo nombre.
$("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>
Guardemos el código anterior en un archivo HTML widgetfactoryexample.htm y ábralo en un navegador estándar que admita javascript, se abre un cuadro de alerta.