Mon problème est que je ne sais pas comment joindre un rappel à la boîte de dialogue jquery ui.
Le spectacle est en fait une option:
$( ".selector" ).dialog({ show: 'slide' });
Je souhaite avoir un rappel une fois l'animation de diapositive terminée. J'ai regardé les effets eux-mêmes et ils ont un rappel:
effect( effect, [options], [speed], [callback] )
Mais dans la boîte de dialogue, l'effet est configuré très différemment. J'ai aussi essayé de mettre:
$( ".selector" ).dialog({ show: 'slide', callback: function() {} });
Mais ça n'a pas marché.
Suggestions?
Mise à jour 2015-07-27 Pour toute personne utilisant jQuery v1.10.0 ou supérieure, veuillez consulter cette autre réponse car ma solution ne fonctionne pas travailler avec des versions plus récentes de jQuery.
Réponse originale
Déjà répondu mais puisque j'avais une réponse, je vais quand même la poster…
$('#dialog').dialog({
show: {
effect: 'slide',
complete: function() {
console.log('animation complete');
}
},
open: function(event, ui) {
console.log('open');
}
});
Affiche open
suivi de animation complete
dans la Console
Deux ans plus tard, la solution suggérée (par @andyb) ne fonctionne plus dans les versions actuelles de jQuery UI (en particulier depuis la v1.10.0). Sa solution reposait sur la méthode de rappel complete
- une fonctionnalité non documentée.
J'ai trouvé une solution à jour, en utilisant jQuery Promise
object:
$("#dialog").dialog({
show: {
effect: "drop",
direction: "up",
duration: 1000
},
hide: {
effect: "drop",
direction: "down",
duration: 1000
},
open: function () {
$(this).parent().promise().done(function () {
console.log("[#Dialog] Opened");
});
},
close: function () {
$(this).parent().promise().done(function () {
console.log("[#Dialog] Closed");
});
}
});
Voici la démo JSFiddle habituelle: http://jsfiddle.net/losnir/jcmpm/
J'ai téléchargé le bundle de développement jquery ui et j'ai découvert que le rappel est défini avec "complete":
$( ".selector" ).dialog({ show: 'slide', complete: function() {} });
Merci pour tous ceux qui essaient d'aider à résoudre ce problème :)
Essayez d'utiliser open
événement de dialogue:
$( ".selector" ).dialog({
open: function(event, ui) { ... }
});
J'ai trouvé nécessaire d'utiliser l'événement "focus:". Je perdais le bouton correctement sélectionné à cause du spectacle :. De belles interactions.
focus: function( event, ui ) {
$(this).siblings('.ui-dialog-buttonpane').find("button:contains('Upload')").focus();
},