web-dev-qa-db-fra.com

Déclencher un événement de curseur jQuery UI

Comment déclencher un événement change sur un curseur jQuery UI ?

Je pensais que ce serait 

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

mais cela ne fait rien.

Exemple de script complet ci-dessous:

<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 cela alerte "0" lorsque la page se charge

jqueryeventsjquery-ui-slider
52
Greg

Essayer

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

Pas idéal mais ça vous met au travail!

alt text

50
redsquare

Je sais que c'est bien au-delà de la date de publication, mais je voulais publier pour fournir cette solution à quiconque trébuche sur cette publication.

Vous pouvez accomplir le déclenchement d’événement en faisant quelque chose comme:

//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 au sein de l’objet init. Cependant, je pense qu’il a l’air plus propre et est plus direct et correct que l’autre réponse utilisant la méthode call (c’est-à-dire qu’il utilise le système d’événements).

Et oui, les rappels que vous définissez ici seront appelés en fonctionnement normal (en changeant la position du curseur dans ce cas) comme il le ferait normalement. Assurez-vous simplement que vous utilisez 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 d'événements en tant que 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 moi-même quelques plugins pour bien comprendre le système d'événements UI.

Prendre plaisir

38
Joey Yore

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

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

Cela ressuscite peut-être un vieux fil de discussion, mais venait tout juste de vivre une expérience similaire. La solution que j'ai trouvée (parce que l'idée d'appeler slider(...) plusieurs fois n'était pas attrayante):

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

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

4
Wayne Weibel

Un autre moyen, pratique pour les widgets d'interface utilisateur tels que la saisie semi-automatique, consiste à accéder à l'événement directement via la méthode data. JQuery stocke toutes ses informations de connexion aux événements à l'aide de .data ("événements"). Ainsi, si vous utilisez cette propriété, vous pouvez accéder directement aux événements. Sur certains composants de l'interface utilisateur (par exemple, l'auto-complétion), les événements ne sont même pas liés à l'élément principal, ils sont liés à l'objet d'interface utilisateur lui-même. Heureusement, cet objet d'interface utilisateur est également disponible dans les données.

Alors, sans plus tarder, voici comment appeler l'évènement select de l'auto-complétion:

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

Ou, (retour aux curseurs) pour déclencher un changement de curseur:

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

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

* MODIFIER *

Vient de comprendre que vous pouvez réellement "déclencher" l'événement correctement avec cette méthode, en utilisant la propriété "secret" _trigger du widget. Par exemple:

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

J'espère que ça aide quelqu'un.

4
machineghost

Je voulais ajouter un commentaire à la réponse de Joey Yore -

Je pense que c'est mieux l'inverse

$('#slider').bind({
    slidestart  : function(event,ui) {...},
    slidechange : function(event,ui) {...},
    slidestop   : function(event,ui) {...},
    slidecreate : function(event,ui) {...}
}).slider();

Sinon, certains événements (à savoir 'slidecreate') seront ignorés

2
gotofritz

J'ai trouvé plus facile d'utiliser la méthode 'create' pour appeler la fonction slide ou stop. Par exemple, pour un curseur avec une plage min/max:

$('#height').slider({
        ...
        create: function(event, slider){ $( "#height" ).slider( "option", "values", [1100, 1500] ); handleHeightSlide('slide', $( "#height" ));},
        ...
    });
2
Phil De Caux

Comme documentation ;

change (événement, ui) Déclenché après que l'utilisateur ait fait glisser un descripteur, si la valeur a changé; ou si la valeur est modifiée par programme via la méthode de la valeur.

Il suffit de configurer l'événement bind change

$(".selector").slider({change: function(event, ui) {console.log('It Works!'}});

et définir la valeur

$(".selector").slider('value',0);
1
rbostan

J'ai récemment rencontré ce problème et utilisé la solution de commentaire de Felipe Castro , avec un changement nécessaire pour corriger le contexte:

$slider.slider('option', 'slide').apply($slider, [null, {value: $slider.slider('value')}])
0
niquis7

Si vous vous liez à l'événement change du curseur de cette façon:

$('#slider').change(function() {
    alert('action');
});

Ensuite, vous pouvez le déclencher comme:

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

La solution mentionnée ci-dessous par Joey Yore fonctionne également, mais l'inconvénient est que l'événement slidechange n'est pas déclenché (d'après mon expérience) lorsque l'utilisateur modifie le curseur de l'interface utilisateur. 

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

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

I Utilisé à la fois les déclencheurs glissés et glissés, Glissés lorsque vous faites glisser le point, les déclencheurs glissés Après avoir relâché le bouton de la souris (comme un événement clic)

var slider1 = $("#slider1").slider({ min: 1, max: 6 });
//option 1
slider1.on("slide", function (e, ui) {

});
//Option 2
slider1.on("slidechanged", function (e, ui) {

});
0
Premila

Le jQueryUI Slider documentation donne l'exemple suivant pour déclencher un événement:

$( ".selector" ).slider({
    change: function( event, ui ) {}
});

et pour l'événement déclencheur:

$( ".selector" ).on( "slidechange", function( event, ui ) {} );

cela n'a pas fonctionné pour moi!

Tout ce que je devais faire pour que cela fonctionne était de changer "slidechange" en "change".

$( ".selector" ).on( "change", function( event, ui ) {} );

J'espère que cela aidera les générations futures qui trébuchent sur ce problème.

0
Joe Black