Cómo derivar un widget personalizado del diálogo jquery-ui

Question

Quiero construir un widget jquery-ui y no estoy seguro de cuál es la mejor manera de abordarlo.

El widget administrará el estado de algunos datos alojados dentro de un diálogo de jquery-ui.

En caso de que cree un widget personalizado, en la función de creación de widgets agregue algunos elementos al destino del widget y luego llame al widget de diálogo en el destino de widgets.

O

¿Hay una manera de heredar del diálogo jquery-ui y simplemente reemplazar la parte de contenido de la misma?

Answer 1

No es una forma de extender otros widgets:

$.widget("ui.customwidget", $.ui.dialog, { 
    options: { 
     // your options 
    }, 

    _create: function() { 
     $.ui.dialog.prototype._create.apply(this); 
     // constructor 
    }, 

    destroy: function() { 
     // destructor 
     $.ui.dialog.prototype.destroy.apply(this); 
    }, 

    _setOption: function(key, value) { 
     $.ui.dialog.prototype._setOption.apply(this, arguments); 
     // process the setting of options 
    } 
    // other methods 
}); 

Pero no animo a usarlo en un diálogo, control deslizante, etc., porque, por ejemplo, buttonset se basa en la existencia del widget de botón y no reconocerá (y no podrá) si el elemento es una instancia de un widget que extendió el botón. Por lo tanto, solo crea nuevos widgets de botones puros, lo que conduce a un diseño desordenado y DOM. Anular partes de un widget también es fundamental: el mecanismo de extensión para widgets se introdujo no hace mucho tiempo, cuando ya existían algunos widgets. Los desarrolladores de ellos no tenían esta característica en mente, por lo que aún puede haber problemas con esto. Agrego mis widgets (su primera opción): simplemente extienda el $.Widget y haga que el elemento también sea un diálogo. A continuación, agregue detectores de eventos para las propiedades que deben sincronizarse entre el cuadro de diálogo y su widget personalizado.

$.widget("ui.customwidget", $.Widget, { 
    // ... 
    _create: function() { 
     $.Widget.prototype._create.apply(this); 
     this.element.dialog(); 
    } 
    // ... 
}); 

De esta manera se extiende más robustos que otros widgets (salvo que construyó el padre y sabe lo que está haciendo), pero tiene sus desventajas también. P.ej. ¿Aceptas opciones de configuración del widget agregado también, o solo partes de él? ¿O no hace nada de esto y obliga al usuario a llamar al cuadro de diálogo para todo lo que no se maneja en su widget personalizado? Prefiero la segunda opción: es al menos honesto, porque tu widget no promete cosas que no puede contener, pero también es feo, porque una vez puedes llamar a uno, luego al otro widget.

Todavía no estoy contento con mi solución, pero la extensión de widgets me puso frente a una gran cantidad de problemas nuevos cuyas soluciones habrían sido parchar el jQuery UI source o escribir un hack feo.

(Me acabo de dar cuenta de que esta pregunta tiene más o menos un año, y es posible que el solicitante ya no tenga este problema. Pero ya había escrito todo lo anterior y creo que no es tan malo no publicarlo)