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 :)
La solution la plus évidente, je devais être aveugle d'esprit :) – JohnM2
Je ne vois aucun paramètre de taille ou de distance spécifié là, puis-je demander comment vous avez fait cela? –
wow une bonne méthode à savoir. vous pouvez également utiliser d'autres types d'événements, tels que "dialogresizestop". – alfred