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

$( ".selector" ).widget({ disabled: true });
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:

  • Boolean- Si se establece en falso, no se utilizará ninguna animación. El elemento se desvanecerá con la duración predeterminada y la aceleración predeterminada si se establece en verdadero .

  • Number - El elemento desaparecerá con la duración especificada y la aceleración predeterminada.

  • String - El elemento se ocultará con el efecto especificado.

  • Object- Si el valor es un objeto, entonces se pueden proporcionar propiedades de efecto, retraso, duración y suavizado .

Example

$( ".selector" ).widget({ hide: { effect: "explode", duration: 1000 } });
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:

  • Boolean- Si se establece en falso, no se utilizará ninguna animación para mostrar el elemento. El elemento se desvanecerá con la duración predeterminada y la aceleración predeterminada si se establece en verdadero .

  • Number - El elemento se desvanecerá con la duración especificada y la aceleración predeterminada.

  • String - El elemento se mostrará utilizando el efecto especificado.

  • Object- Si el valor es un objeto, entonces se pueden proporcionar propiedades de efecto, retraso, duración y suavizado .

Example

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

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

_create: function() {
   this.element.css( "background-color", this.options.color );
}
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

this._delay( this._foo, 100 );
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

_destroy: function() {
   this.element.removeClass( "my-widget" );
}
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

_create: function() {
   this._focusable( this.element.find( ".my-items" ) );
}
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

_getCreateEventData: function() {
   return this.options;
}
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

_getCreateOptions: function() {
   return { id: this.element.attr( "id" ) };
}
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

this._hide( this.element, this.options.hide, function() {
   $( this ).remove();
});
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

this._hoverable( this.element.find( "div" ) );
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

_init: function() {
   if ( this.options.autoOpen ) {
      this.open();
   }
}
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

this._off( this.element, "click" );
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

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
   }
});
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

_setOption: function( key, value ) {
   if ( key === "width" ) {
      this.element.width( value );
   }
   if ( key === "height" ) {
      this.element.height( value );
   }
   this._super( key, value );
}
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

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

_this._show( this.element, this.options.show, function() {
   // Focus the element when it's fully visible.
   this.focus();
}
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

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._super( key, value );
}
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

_setOption: function( key, value ) {
   if ( key === "title" ) {
      this.element.find( "h3" ).text( value );
   }
   this._superApply( arguments );
}
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

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

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

Este método desactiva el widget.

Action - disable()

Este método desactiva el widget.

Example

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

Este método habilita el widget.

Action - enable()

Este método habilita el widget.

Example

this._on( this.element, {
   "click a": function( event ) {
      event.preventDefault();
      this.enable();
   }
});
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

this.option( "width" );
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

var options = this.option();
for ( var key in options ) {
   console.log( key, options[ key ] );
}
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

this.option( "width", 500 );
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

this.option({
   width: 500,
   height: 500
});
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

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

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

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

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.