2010-03-26 2 views
18

J'ai un élément div qui est fait jquery redimensionnable. Il a aussi l'option setResize, donc les autres éléments sont redimensionnés simultanément. Ce que je veux faire, c'est de définir par programmation la taille de cet élément div Resizable de telle manière que toute la logique redimensionnable soit déclenchée (en particulier cette option aussiResize est prise en compte).Comment déclencher jquery Redimensionnement redimensionnable par programme?

Comment puis-je y parvenir?

Répondre

24

Mise à jour: Il semble que les composants internes de l'interface utilisateur jQuery ont radicalement changé depuis que j'ai répondu à cette question et que le déclenchement de l'événement ne fonctionne plus.

Il n'y a plus de moyen direct de déclencher l'événement car le plugin redimensionnable a été fondamentalement modifié. It resizes as the mouse is dragged rather than syncing items up at the end. Cela se produit en écoutant l'événement de propagation interne resize pour les plugins redimensionnables is now fired by the _mouseDrag handler. Mais cela dépend de variables définies en cours de route, de sorte que le déclenchement même en interne n'aidera pas.

Cela signifie que même en l'écrasant, il est au mieux en désordre. Je recommande de redimensionner manuellement les éléments alsoResize directement, indépendamment du widget UI si cela est possible.

Mais pour le plaisir, disons que non. Le problème est que les internes du plugin définissent diverses propriétés relatives à la position de la souris précédente et actuelle afin de savoir combien redimensionner par. Nous pouvons abus utiliser pour ajouter une méthode pour le widget, comme ceci:

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

Ceci est juste crée les événements de souris que le widget resizable est à la recherche et de tir ceux-ci. Si vous voulez faire quelque chose comme resizeBy ce serait une encore plus simple fin car tout ce que nous soucions est le delta:

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

Vous appelleriez la méthode $.widget() après jQuery UI et avant de créer vos instances .resizable() et ils Tous auront une méthode resizeTo. Cette partie ne change pas, il est juste:

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

Puis redimensionnez, vous appelez cette nouvelle méthode resizeTo comme ceci:

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

Cela agirait comme si vous instantanément que traînés Taille. Il y a bien sûr quelques gotchas ici:

  • L'axe "se" suppose que vous voulez redimensionner par le bas à droite - j'ai choisi parce qu'il est de loin le scénario le plus courant, mais vous pouvez tout simplement faire un paramètre.
  • Nous nous intéressons un peu aux événements internes, mais j'utilise intentionnellement le moins de détails d'implémentation interne possible, de sorte que cela risque moins de se produire à l'avenir.
  • Il pourrait absolument casser dans les futures versions de jQuery UI, j'ai seulement essayé de minimiser les chances de cela.

et the resizeBy version here.


réponse originale:

Vous pouvez faire ceci:

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

alsoResize plates-formes en interne un gestionnaire à l'événement resize, vous avez juste besoin d'invoquer cette :)

+0

La solution la plus évidente, je devais être aveugle d'esprit :) – JohnM2

+8

Je ne vois aucun paramètre de taille ou de distance spécifié là, puis-je demander comment vous avez fait cela? –

+0

wow une bonne méthode à savoir. vous pouvez également utiliser d'autres types d'événements, tels que "dialogresizestop". – alfred

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

Et le même avec la largeur.

1

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

J'ai un élément avec le bord droit redimensionnable

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

et moi avions 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 l'implémentation du widget change.

3

Vous pouvez déclencher les barres par programmation. 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 maximale, vous pouvez cibler .ui-resizable-handle.ui-resizable-se si vous avez des barres de redimensionnement est et sud.

+0

Merci, juste ce dont j'avais besoin! – Raslanove

0

Disclaimer Hack (testé sur jQuery 1.12.4):

Ce attend essentiellement pour la boîte de dialogue à ouvrir et incrémente par 1px (qui force l'événement resize()) puis par décréments 1px (pour retrouver taille 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.

Questions connexes