data - jquery selector

¿Cómo desencadenar el tamaño de jquery Resimensionar mediante programación?

Question

Tengo un elemento div que se hace jquery Resizable. También tiene la opción de redimensionar, por lo que otros elementos cambian de tamaño simultáneamente.

Lo que quiero hacer es establecer el tamaño de este elemento de tamaño variable programable de manera tal que se active toda la lógica de tamaño variable (especialmente esta opción también la opción Cambiar tamaño se tiene en cuenta).

¿Cómo puedo lograr eso?

Answer 1

Necesitaba lo mismo para las pruebas. questions Similar solo tienen una respuesta prometedora https://stackoverflow.com/a/17099382/1235394 , pero requiere una configuración adicional, así que terminé con mi propia solución.

Tengo un elemento con borde derecho redimensionable.

$nameHeader.resizable({handles: ''e'', ... });

y tuve que activar todas las devoluciones de llamada durante la prueba para poder redimensionar correctamente todos los elementos. La parte clave del código de prueba:

var $nameHeader = $list.find(''.list-header .name''),
    $nameCell = $list.find(''.list-body .name'');
ok($nameHeader.hasClass(''ui-resizable''), ''Name header should be resizable'');
equal($nameCell.outerWidth(), 300, ''Initial width of Name column'');

// retrieve instance of resizable widget
var instance = $nameHeader.data(''ui-resizable''),
    position = $nameHeader.position(),
    width = $nameHeader.outerWidth();
ok(instance, ''Instance of resizable widget should exist'');

// mouseover initializes instance.axis to ''e''
instance._handles.trigger(''mouseover'');
// start dragging, fires `start` callback
instance._mouseStart({pageX: position.left + width, pageY: position.top});
// drag 50px to the right, fires `resize` callback
instance._mouseDrag({pageX: position.left + width + 50, pageY: position.top});
// stop dragging, fires `stop` callback
instance._mouseStop({pageX: position.left + width + 50, pageY: position.top});

// ensure width of linked element is changed after resizing
equal($nameCell.outerWidth(), 350, ''Name column width should change'');

Por supuesto, este código es frágil y puede romperse cuando cambia la implementación del widget.

Answer 2

Puedes activar las barras programáticamente. Por ejemplo, para activar el evento de cambio de tamaño de este a oeste:

var elem =... // Your ui-resizable element
var eastbar = elem.find(".ui-resizable-handle.ui-resizable-e").first();
var pageX = eastbar.offset().left;
var pageY = eastbar.offset().top;

(eastbar.trigger("mouseover")
        .trigger({ type: "mousedown", which: 1, pageX: pageX, pageY: pageY })
        .trigger({ type: "mousemove", which: 1, pageX: pageX - 1, pageY: pageY })
        .trigger({ type: "mousemove", which: 1, pageX: pageX, pageY: pageY })
        .trigger({ type: "mouseup", which: 1, pageX: pageX, pageY: pageY }));

Estoy haciendo un 1px a la izquierda seguido de 1px movimiento a la derecha en el mango de la barra este. Para realizar un tamaño completo, puede apuntar a .ui-resizable-handle.ui-resizable-se si tiene barras de tamaño de este y sur.

Answer 3

Actualización: parece que las partes internas de jQuery UI han cambiado dramáticamente desde que respondí esto y ya no funciona el evento.

Ya no hay una manera directa de desencadenar el evento porque el complemento de tamaño variable se ha cambiado fundamentalmente. Se redimensiona a medida que se arrastra el mouse en lugar de sincronizar los elementos al final . Esto sucede al escuchar el evento de propagación de cambio de resize interno para los complementos de tamaño variable que ahora es _mouseDrag por el controlador _mouseDrag . Pero depende de las variables establecidas a lo largo del camino, por lo que simplemente disparar que incluso internamente no ayudará.

Esto significa que incluso anularlo es complicado en el mejor de los casos. Recomiendo simplemente redimensionar manualmente los elementos alsoResize directamente, independientemente del widget de la interfaz de usuario si es posible.

Pero por diversión digamos que no lo es. El problema es que las partes internas del complemento establecen varias propiedades relacionadas con la posición anterior y actual del mouse para saber cuánto cambiar de tamaño. Podemos abusar de usar eso para agregar un método al widget, como este:

$.widget("ui.resizable", $.ui.resizable, {
    resizeTo: function(newSize) {
        var start = new $.Event("mousedown", { pageX: 0, pageY: 0 });
        this._mouseStart(start);
        this.axis = ''se'';
        var end = new $.Event("mouseup", {
            pageX: newSize.width - this.originalSize.width,
            pageY: newSize.height - this.originalSize.height
        });
        this._mouseDrag(end);
        this._mouseStop(end);
    }
});

Esto es solo crear los eventos del mouse que busca el widget de resizable variable y dispararlos. Si quisieras hacer algo como resizeBy , sería un final aún más simple, ya que lo único que nos importa es el delta:

var end = $.Event("mouseup", { pageX: newSize.width, pageY: newSize.height });

$.widget() método $.widget() después de jQuery UI y antes de crear sus instancias .resizable() y todas tendrán un método resizeTo . Esa parte no cambia, es solo:

$(".selector").resizable({ alsoResize: ".other-selector" });

Luego, para cambiar el tamaño, llamaría a este nuevo método resizeTo como este:

$(".selector").resizable("resizeTo", { height: 100, width: 200 });

Esto actuaría como si instantáneamente lo arrastraras a ese tamaño. Por supuesto, hay algunos errores aquí:

• El eje "se" supone que desea cambiar el tamaño por la parte inferior derecha. Escogí esto porque es, con mucho, el escenario más común, pero podría convertirlo en un parámetro.
• Estamos enganchándonos un poco a los eventos internos, pero intencionalmente estoy usando la menor cantidad posible de detalles de implementación interna, por lo que es menos probable que esto ocurra en el futuro.
• Podría romperse absolutamente en futuras versiones de jQuery UI, solo he tratado de minimizar las posibilidades de eso.

Puedes jugar con él en acción con un violín aquí y la versión resizeBy aquí .

Respuesta original:

Puedes hacerlo:

$(".selector").trigger("resize");

alsoResize internamente instala un controlador para el evento de cambio de resize , por lo que solo necesita invocarlo :)

Answer 4

Hack Disclaimer (probado en jQuery 1.12.4):

Básicamente, esto espera que se abra el diálogo y luego se incrementa en 1px (lo que fuerza el evento resize() ) y luego disminuye en 1px (para recuperar el tamaño original )

solo di esto en el diálogo open controlador de eventos:

 $(this)
.dialog("option","width",$(this).dialog("option","width")+1)
.dialog("option","width",$(this).dialog("option","width")-1);

Nota:

Es posible que esto no funcione con los efectos de show (como fadeIn,slideDown etc.) ya que el código de "redimensionamiento" se ejecuta antes de que el cuadro de diálogo se haya procesado completamente.

Answer 5

$(".yourWindow").each(function(e) {
    $(this).height($(this).find(".yourContent").height());
});

Y lo mismo con el ancho.