Déclencher un événement jQuery UI slider

Question

Déclencher un événement jQuery UI slider

Demandé el 17 de Août, 2009: Quand la question a-t-elle été
35764 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Comment puis-je déclencher un événement de changement sur un slider jQuery UI ?

Je pensais que ce serait

$('#slider').trigger('slidechange');

mais cela ne fait rien.

Voici un exemple complet de script :

<link href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" type="text/css"> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> 
<script src="http://jqueryui.com/latest/ui/ui.core.js" type="text/javascript"></script> 
<script src="http://jqueryui.com/latest/ui/ui.slider.js" type="text/javascript"></script> 

<body>

<div id="slider"></div>

<script type="text/javascript">

$().ready(function()
{
    $('#slider').slider({change: function() { alert(0); }});

    // These don't work
    $('#slider').trigger('change');
    $('#slider').trigger('slidechange');
});
</script>

Je m'attendrais à ce que l'alerte soit "0" lorsque la page se charge.

Demandé el 17 de Août, 2009 par Greg

19 votes

Comment se fait-il que 95% du temps, ce que la documentation de JQuery UI dit ne fonctionne pas :) ?

Commenté el 17 de Août, 2009 par karim79

Answer 1

5 Réponses

Answer 2

50voto

redsquare Points 47518

Essayez

$slider = $('#slider');
$slider.slider('option', 'change').call($slider);

Ce n'est pas l'idéal mais cela vous fait travailler !

alt text

Répondu el 17 de Août, 2009 par redsquare (47518 Points )

3 votes

Eww laid :p +1 cependant parce que ça marche. Je vais encore attendre un peu, au cas où John Resig passerait par là...

Commenté el 17 de Août, 2009 par Greg

0 votes

Hmm, pas sûr qu'il le sache. Peut-être mieux comme un post de groupe google jquery-ui / problème trac. Je ne suis pas sûr qu'ils aient considéré ce cas d'usage ?

Commenté el 17 de Août, 2009 par redsquare

0 votes

J'ai modifié votre réponse car si elle fonctionnait pour mon script de test, elle ne fonctionnait pas pour le vrai script - "this" sortait mal.

Commenté el 18 de Août, 2009 par Greg

Afficher 10 autres commentaires

Answer 3

40voto

Joey Yore Points 296

Je sais que la date de publication de ce message est largement dépassée, mais je voulais le publier pour fournir cette solution à toute personne qui tomberait sur ce message.

Vous pouvez réaliser le déclenchement d'événements en faisant quelque chose du genre :

//TO DEFINE SLIDER AND EVENTS
$('#slider').slider().bind('slidechange',function(event,ui){...});

//TO TRIGGER EVENT
$('#slider').trigger('slidechange');

Malheureusement, vous ne pouvez pas définir les fonctions en tant qu'options dans l'objet init. Cependant, je pense que cette solution est plus propre, plus directe et plus correcte que l'autre réponse utilisant la méthode d'appel (c'est-à-dire qu'elle utilise le système d'événements).

Et oui, les callbacks que vous définissez ici seront appelés lors d'une opération normale (changement de position du curseur dans ce cas) comme il se doit. Assurez-vous simplement d'utiliser les noms de type d'événement corrects de la documentation de l'interface utilisateur.

Si vous souhaitez ajouter plusieurs événements à la fois, n'oubliez pas que vous pouvez fournir un objet à lier en utilisant les noms des événements comme clés :

//TO DEFINE SLIDER AND EVENTS
$('#slider').slider().bind({
    slidestart  : function(event,ui) {...},
    slidechange : function(event,ui) {...},
    slidestop   : function(event,ui) {...},
});

//TO TRIGGER EVENTS
$('#slider').trigger('slidestart');
$('#slider').trigger('slidechange');
$('#slider').trigger('slidestop');

Ceci est noté dans la documentation, bien que ce ne soit pas très clair. Il m'a fallu développer quelques plugins par moi-même pour vraiment comprendre le système d'événements de l'interface utilisateur.

Profitez de

Répondu el 5 de Juillet, 2011 par Joey Yore (296 Points )

5 votes

Cela me donne "TypeError : ui is undefined" (erreur de type : l'interface n'est pas définie)

Commenté el 3 de Février, 2014 par andy

0 votes

Dans les versions plus récentes, cela fonctionne : $('#slider').trigger('slide') ;

Commenté el 17 de Avril, 2018 par Justas

0 votes

N'utilisez pas bind, il est déprécié dans la version 3.0. Voir la documentation de jquery ui ( api.jquery.com/bind ).

Commenté el 19 de Avril, 2019 par Harm

Answer 4

16voto

hrabinowitz Points 81

Une bonne approche consiste simplement à modifier la valeur du curseur. La méthode de modification propre au curseur devrait alors répondre au changement de valeur. Par exemple :

var newValue=5;
$('#slider').slider("value", newValue);

Répondu el 17 de Avril, 2013 par hrabinowitz (81 Points )

0 votes

Je dirais que cela devrait être la bonne réponse. Je ne vois pas de cas d'utilisation où il est impératif de déclencher un événement sans modifier la valeur du curseur. Laissez le curseur envoyer les événements tels qu'ils ont été définis lors de sa construction.

Commenté el 19 de Février, 2016 par Alex. P.

0 votes

J'ai un tel cas. Je change dynamiquement la couleur des lignes de la grille facultative sur une image avec un curseur. Les lignes de la grille et le curseur disparaissent si je décoche la case de l'option des lignes de la grille. Je veux que l'événement de changement sur le curseur se déclenche pour redessiner les lignes si je coche la case pour réafficher les lignes de la grille, mais je veux la dernière couleur choisie. Heureusement, l'événement de changement se déclenche même si vous définissez la valeur sur elle-même, bien que le code soit vraiment moche : $('#slider').slider('value', $('#slider').slider('value')); )

Commenté el 12 de Février, 2017 par Lisa DeBruine

Answer 5

4voto

machineghost Points 9864

Une autre méthode, pratique pour les widgets d'interface utilisateur comme la saisie automatique, consiste à accéder directement à l'événement via la méthode data. JQuery stocke toutes ses informations de connexion aux événements en utilisant .data("events"), donc si vous utilisez cette propriété, vous pouvez accéder directement aux événements. Sur certains composants d'interface utilisateur (par exemple, la saisie automatique), les événements ne sont même pas liés à l'élément principal, mais à l'objet d'interface utilisateur lui-même. Heureusement, cet objet UI est également disponible dans les données.

Sans plus attendre, voici comment invoquer l'événement select de la saisie semi-automatique :

$("#autoComplete").data("autocomplete").menu.select()

Ou, (pour en revenir aux curseurs) pour déclencher la modification d'un curseur :

$("#slider").data("slider")._change()

Trigger reste bien sûr le meilleur moyen, puisqu'il utilise réellement le système d'événements, mais sur les widgets plus complexes où "$(elem).trigger" ne suffira pas, cette approche est pratique.

* EDIT *

Je viens de découvrir qu'il est possible de "déclencher" l'événement correctement avec cette méthode, en utilisant la propriété "secrète" _trigger du widget. Par exemple :

$("#autoComplete").data("autocomplete")._trigger("select", fakeEvent, fakeItem)

J'espère que cela aidera quelqu'un.

Répondu el 20 de Janvier, 2012 par machineghost (9864 Points )

1 votes

Merci de m'avoir indiqué la fonction _trigger(), qui a très bien fonctionné pour moi.

Commenté el 24 de Février, 2012 par Brian McAllister

2 votes

J'aime cette solution car elle déclenche l'événement de glissement réel. Il convient de noter que maintenant, il n'est plus possible d'utiliser la fonction data("slider") c'est data("uiSlider")

Commenté el 29 de Août, 2013 par lopsided

0 votes

@lopsided Merci ! Savez-vous où cette modification est documentée ?

Commenté el 21 de Juillet, 2014 par robabby

Afficher 1 autres commentaires

Answer 6

4voto

Wayne Weibel Points 263

Je ressuscite peut-être un vieux sujet, mais je viens de vivre une expérience similaire. La solution que j'ai trouvée (parce que la pensée d'appeler slider(...) plusieurs fois n'était pas attrayante) :

$slider.slider('option', 'slide').call($slider, event, ui);

Avec $slider étant lié à la $(selector).slider(...) l'initialisation.

Répondu el 4 de Novembre, 2013 par Wayne Weibel (263 Points )

1 votes

L'approche que vous avez mentionnée fonctionne pour moi, tout comme celle de Felipe Castro. Mais je ne comprends pas pourquoi je ne peux pas simplement dire $slider.trigger("slide", ui);

Commenté el 8 de Novembre, 2013 par hrabinowitz

0 votes

J'ai continué à jouer avec tout cela et la seule explication que j'ai pu trouver était que l'événement " slide " ne concernait pas l'objet $slider, mais plutôt un élément de $slider (si cela a un sens). Vous deviez d'abord récupérer la fonction désirée de l'objet 'slider' (et non $slider) puis l'appeler avec les paramètres appropriés. Le "slider" est en fait constitué de plusieurs éléments DOM, il n'y a donc pas de véritable point de déclenchement de la fonction.

Commenté el 12 de Novembre, 2013 par Wayne Weibel

Déclencher un événement jQuery UI slider

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Déclencher un événement jQuery UI slider

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: