Cómo desencadenar jquery Redimensionar el tamaño mediante programación?

Question

Tengo un elemento div que se hace jquery de tamaño variable. También ha configurado la opción de cambio de tamaño para que otros elementos cambien de tamaño simultáneamente.

Lo que quiero hacer es establecer el tamaño de este elemento Div redimensionable mediante programación de tal manera que se active toda la lógica de Redimensionamiento (especialmente esta opción tambiénResize se tiene en cuenta).

¿Cómo puedo lograr eso?

Answer 1

Actualización: Parece que las partes internas de jQuery UI han cambiado drásticamente desde que contesté esto y el lanzamiento del evento ya no funciona.

Ya no hay forma directa de iniciar el evento porque el complemento redimensionable se ha modificado fundamentalmente. It resizes as the mouse is dragged rather than syncing items up at the end. Esto sucede al escuchar el evento de propagación interno resize para los complementos redimensionables que is now fired by the _mouseDrag handler. Pero depende de las variables establecidas en el camino, por lo que solo dispararlo, incluso internamente, no ayudará.

Esto significa que incluso anulando es desordenado en el mejor de los casos. Recomiendo simplemente redimensionar manualmente los elementos alsoResize directamente, independientemente del widget UI si eso 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 del mouse anterior y actual para saber cuánto se debe cambiar el tamaño. Podemos abuso uso que para añadir un método para el widget, así:

$.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 sólo la creación de los eventos de ratón que el widget resizable está buscando y que encienden los. Si quería hacer algo como resizeBy que sería un fin aún más simple ya que todo lo que importa es el delta:

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

que se podría llamar el método $.widget() después de jQuery UI y antes de crear instancias y que .resizable() Todos tendrán un método resizeTo. Esa parte no cambia, es simplemente:

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

A continuación, cambiar el tamaño, que se dice que el nuevo método resizeTo así:

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

Esto actuaría como si al instante arrastrado a ese tamaño. Por supuesto, hay un par de trampas aquí:

• El eje "se" es suponiendo que desea cambiar el tamaño de la parte inferior derecha - Elegí este porque es, con mucho, el escenario más común, pero sólo podría hacerlo un parámetro.
• Estamos enganchando un poco a los eventos internos, pero estoy usando intencionalmente pocos detalles de implementación interna como sea posible, por lo que es menos probable que esto se rompa en el futuro.
• Podría romperse absolutamente en futuras versiones de jQuery UI, solo he intentado minimizar las posibilidades de eso.

You can play with it in action with a fiddle here y the resizeBy version here.

---

Respuesta original:

Usted puede hacer esto:

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

alsoResize aparejos internamente un manejador para el evento resize, por lo que sólo tiene que invocar esa :)

Answer 2

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

Y la lo mismo con el ancho.

Answer 3

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

que tienen un elemento con el borde derecho de tamaño variable

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

y necesitaba para disparar todas las devoluciones de llamada durante la prueba con el fin de cambiar el tamaño de todos los elementos correctamente. La parte clave de 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 los cambios de implementación de widgets.

Answer 4

Puede disparar las barras mediante programación. 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 })); 

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

Answer 5

Hack de exención de responsabilidad (probado en jQuery 1.12.4):

Esto básicamente espera a que el diálogo para abrir y incrementa entonces por 1px (que obliga al evento resize()) y luego disminuye por 1px (para recuperar original tamaño)

a decir esto en el diálogo de controlador de open evento:

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

nota:

Esto no puede trabajar con efectos de demostración (como fadeIn,slideDown etc) como el código de "cambiar el tamaño de" ejecuta antes de que el diálogo se haya procesado por completo.