jQuery UI widgets a través expansión librería de widgets

librería de widgets jQuery UI (Widget Factory) hace que sea más fácil para crear widgets, widgets de esos amplía la funcionalidad de widgets existentes. De esta manera se puede crear sobre la base de los widgets potentes existentes, también se puede hacer ajustes finos en la función Reproductor existente.

Nota: Antes de estudiar este capítulo, es necesario entender lo que es una biblioteca del widget (Widget Factory), y cómo funciona. Si usted no está familiarizado con este conocimiento, así que por favor revise biblioteca de piezas (Widget Factory) cómo utilizar la sección.

Crear el widget de extensión

Crear un widget de biblioteca del widget (Widget Factory) hasta $.widget() se pasa el nombre del widget y un objeto prototipo para completar. El siguiente ejemplo es crear un widget "superDialog" en el espacio de nombres "a medida".

$.widget( "custom.superDialog", {} );

Para apoyar la expansión, $.widget() Opcional aceptado como un miembro que utilice el constructor widget padre. Al especificar un miembro de los padres cuando se pasa como segundo argumento, el nombre del widget en la parte posterior, frente al objeto prototipo de widgets.

Al igual que el ejemplo anterior, el siguiente también debe crear un widget "superDialog" en el espacio de nombres "a medida". Pero esta transferencia es de diálogo (diálogo) Reproductor de jQuery UI constructor ( $.ui.dialog ), representa widget de superDialog debe utilizar Reproductor de diálogo (diálogo) de jQuery UI como miembro de los padres.

$.widget( "custom.superDialog", $.ui.dialog, {} );

Aquí, superDialog dos y widgets de diálogo son esencialmente equivalentes, sólo un nombre diferente y única de espacio de nombres. Para que nuestros nuevos widgets más características podemos añadir algunos métodos a su objeto prototipo.

Widget objeto prototipo se pasa a la $.widget() último argumento. Hasta ahora, nuestro ejemplo se utiliza un objeto nulo. Ahora vamos a añadir un método para el objeto:

$.widget( "custom.superDialog", $.ui.dialog, {
    red: function() {
        this.element.css( "color", "red" );
    }
});
 
// Create a new <div>, convert it into a superDialog, and call the red() method.
$( "<div>I am red</div>" )
    .superDialog()
    .superDialog( "red" );

Ahora superDialog tiene un red() método, que cambiará su color rojo texto. Tenga en cuenta que las bibliotecas miembros (Widget Factory) es cómo establecer automáticamente this como un objeto de instancia del widget. Para obtener una lista de todas las propiedades y métodos disponibles en la instancia, visitar las bibliotecas miembro de documentación de la API (Widget Factory) .

Ampliar los métodos existentes

A veces, es necesario ajustar el comportamiento de un componente existente o añadir métodos. Se puede especificar el nombre del nombre de método del método en el prototipo objeto necesita para recargar. El siguiente ejemplo se anula de diálogo (diálogo) del open() método . Debido a que el cuadro de diálogo está activado por defecto, cuando se ejecuta este código, "open" que se grabará.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
    }
});
 
// Create a new <div>, and convert it into a superDialog.
$( "<div>" ).superDialog();

Cuando se ejecuta este código, hay un problema. Como nos sobrecargados open() el comportamiento por defecto, por lo que el cuadro de diálogo (diálogo) ya no se muestra en la pantalla.

Cuando usamos el objeto prototipo, estamos en realidad se solapa con el método original, utilizando un nuevo método en la cadena de prototipo.

Para que el padre métodos de montaje están disponibles, biblioteca miembro (Widget Factory) proporciona dos métodos - _super() y _superApply() .

Utilice _super() y _superApply() para acceder a la pieza matriz

_super() y _superApply() llamadas de la misma manera que el componente de matriz. Considere los siguientes ejemplos. Como última instancia, que se sobrecargado open() método para registrar el "open" . Sin embargo, esta carrera _super() se llama de diálogo (diálogo) de la open() del cuadro de diálogo Abrir y.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
 
        // Invoke the parent widget's open().
        return this._super();
    }
});
 
$( "<div>" ).superDialog();

_super() y _superApply() es prácticamente idéntica a la original Function.prototype.call() y Function.prototype.apply() método. Por lo tanto, _super() acepta una lista de parámetros, _superApply() acepta una matriz como parámetro. El siguiente ejemplo demuestra que diferentes entre los dos.

$.widget( "custom.superDialog", $.ui.dialog, {
    _setOption: function( key, value ) {
 
        // Both invoke dialog's setOption() method. _super() requires the arguments
        // be passed as an argument list, _superApply() as a single array.
        this._super( key, value );
        this._superApply( arguments );
    }
});

redefinir Reproductor

jQuery UI 1.9 añadió redefinir la función del widget. Por lo tanto, no se puede crear un nuevo widget, sólo tenemos que pasar $.widget() de manera que un nombre de control existente y constructor. Los siguientes ejemplos en el open() para agregar el mismo registro, pero no mediante la creación de un nuevo widget para completar.

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
$( "<div>" ).dialog();

A través de este método, podemos extender una pequeña parte del método existente, pero todavía se puede utilizar _super() para acceder al método original - no se trata de la creación de un nuevo widget para completar, pero que es redefinir directamente Reproductor puede.

Widgets (widgets) y el polimorfismo (polimorfismo)

Cuando se extiende entre widgets y plugins para interactuar con su tiempo, hay que destacar que el miembro de tapón no se puede utilizar para llamar al método de elemento de matriz subconjunto. El siguiente ejemplo demuestra esto.

$.widget( "custom.superDialog", $.ui.dialog, {} );
 
var dialog = $( "<div>" ).superDialog();
 
// This works.
dialog.superDialog( "close" );
 
// This doesn't.
dialog.dialog( "close" );

Ejemplos de lo anterior, el miembro principal del plug-in, dialog() , no se puede llamar a los elementos superDialog en el close() método. Para más información llamar al método widget, consulte el método llamado de widgets (widgets) .

Ejemplos de encargo personalizada

Hasta ahora, hemos visto ejemplos de los métodos de extensión del prototipo de widgets. En el prototipo método sobrecargado afecta a todas las instancias del widget.

Para ilustrar este punto, considere los siguientes ejemplos. de diálogo (diálogo) las dos fuerzas están utilizando el mismo open() método.

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
// Create two dialogs, both use the same open(), therefore "open" is logged twice.
$( "<div>" ).dialog();
$( "<div>" ).dialog();

A veces, sólo tiene que cambiar el comportamiento de una instancia del widget. Para ello, es necesario utilizar una asignación de atributo normal de JavaScript, obtener una referencia a casos y reemplazar este método. Como ejemplos específicos se muestra a continuación.

var dialogInstance = $( "<div>" )
    .dialog()
    // Retrieve the dialog's instance and store it.
    .data( "ui-dialog" );
 
// Override the close() method for this dialog
dialogInstance.close = function() {
    console.log( "close" );
};
 
// Create a second dialog
$( "<div>" ).dialog();
 
// Select both dialogs and call close() on each of them.
// "close" will only be logged once.
$( ":data(ui-dialog)" ).dialog( "close" );

Sobrecargado personalizar técnico es el ejemplo perfecto de una personalización de una sola vez.