Comment déclencher Redimensionner jquery redimensionnable programme?

Question

J'ai un élément div qui est fait jquery redimensionnable. Il a l'option alsoResize ensemble, donc d'autres éléments redimensionne simultanément.

Ce que je veux faire, est de définir la taille de ce redimensionnable élément div programme dans de telle sorte que toute logique redimensionnable est déclenchée (en particulier cette option alsoResize est prise en compte).

Comment puis-je y parvenir?

Answer 1

Mise à jour: Il semble que les entrailles de jQuery UI ont changé de façon spectaculaire depuis j'ai répondu et déclenchant l'événement ne fonctionne plus

.

Il n'y a pas moyen direct de tirer plus l'événement parce que le plug-in redimensionnable a été fondamentalement changé. Il redimensionne que la souris est traîné plutôt que la synchronisation des éléments à la fin . Cela se produit par elle écoute l'événement de propagation de resize interne pour les plugins qui redimensionnables Vous pouvez jouer avec elle dans l'action avec un violon et la version resizeBy .

---

Réponse originale:

Vous pouvez faire ceci:

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

alsoResize truque en interne un gestionnaire à l'événement resize, donc vous avez juste besoin d'invoquer que:)

Answer 2

Vous pouvez déclencher les barres d'un programme. Par exemple, pour déclencher l'événement resize est-ouest:

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

Je suis en train de faire une gauche 1px suivi par 1px mouvement à droite sur la poignée de la barre de l'est. Pour effectuer une taille complète, vous pouvez cibler .ui-resizable-handle.ui-resizable-se si vous avez l'est et au sud de redimensionner les barres.

Answer 3

Je avais besoin de la même chose pour les tests. similaire des questions ont une seule réponse promettant https://stackoverflow.com / a / 17099382/1235394 , mais il nécessite une configuration supplémentaire, donc j'ai fini avec ma propre solution.

I ont un élément de bord droit redimensionnable

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

et je avais besoin pour déclencher tous les rappels pendant le test afin de redimensionner tous les éléments correctement. La partie clé du code de test:

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');

Bien sûr, ce code est fragile et peut se casser lorsque les changements de mise en œuvre du widget.

Answer 4

Hack Avertissement (testé sur jQuery 1.12.4):

Il attend essentiellement pour la boîte de dialogue à ouvrir et incrémente puis par 1px (qui force l'événement resize()) puis par décréments 1px (pour reprendre la taille de original)

dire ceci dans le gestionnaire d'événements open dialogue:

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

Note:

Cela peut ne pas fonctionner avec des effets de spectacle (comme fadeIn,slideDown etc) comme le code « Resizer » exécute avant la boîte de dialogue est complètement rendu.

Answer 5

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

Et la même chose avec la largeur.