UI Slider, déclenchez un évènement slide par le code

**Tchupacabra** · 26/12/2010, 16h25

Bonjour,

J'aimerais connaître le moyen de déclencher par le code un événement d'un élément jQuery UI. Par exemple, l'événement "slide" d'un slider :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
$('#slider').slider({
	range:'min',
	value:5, min:0, max:10, step:1,
	slide:function(event, ui) {
		// code à déclencher par le code
	}
});

par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#slider').slide();

Merci d'avance...

**Arnaud F.** · 26/12/2010, 17h41

Bonjour,

regardez du côté de la fonction .trigger()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#slider').trigger("slide");

**danielhagnoul** · 26/12/2010, 18h12

Bonsoir

Soit l'utilisateur clic dans la barre du widget, soit il fait glisser le curseur, soit par JS on change la valeur du widget et c'est lui qui fait glisser le curseur. Important, voir les commentaires dans le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#slider').slider("value", [2]); // ex 2 pour min 0, max 10 et step 1

Voir : http://jqueryui.com/demos/slider/#method-value

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.7.custom.css">	
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
 
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<button id="btnChange">Change</button>
<div id="slider"></div>
 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.7.custom.min.js"></script>
	<script>
		$(function(){
 
$('#slider').slider({
	range:'min',
	value: 5,
	min: 0,
	max: 10,
	step: 1,
	slide:function(event, ui) {
		/*
		 * L'événement slide est déclenché par l'utilisateur
		 * lorsqu'il fait glisser le curseur ou par le widget (animation)
		 * lorsque le valeur est changée
		 */ 
 
		// Firefox + Firebug
		console.log(event, ui.handle, ui.value)
	},
	change:function(event, ui) {
		/*
		 * L'événement change est déclenché chaque fois
		 * que le valeur est modifiée
		 */
 
		// Firefox + Firebug
		console.log(event, ui.handle, ui.value)
 
	}
});
 
$("#btnChange").click(function(){
	$('#slider').slider("value", [2]); // ex 2 pour min 0, max 10 et step 1
});
 
/*
 * Object { type="slidechange", timeStamp=1293381860382, more...} <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 80%;"> 8
 * Object { originalEvent={...}, type="slide", more...} <a class="ui-slider-handle ui-state-default ui-corner-all ui-state-active ui-state-focus" href="#" style="left: 80%;"> 7
 * Object { originalEvent={...}, type="slidechange", more...} <a class="ui-slider-handle ui-state-default ui-corner-all ui-state-focus" href="#" style="left: 70%;"> 7
 */
 
/*
 * On peut animer le curseur directement par
 * $('#slider').children("a.ui-slider-handle").animate({"left": "15%"}, 200);
 * mais alors seul le curseur bouge, la valeur du widget n'est pas
 * modifiée.
 */
 
		});
	</script>
</body>  
</html>

**Tchupacabra** · 26/12/2010, 19h17

Merci à vous 2 pour votre aide...
cependant, je n'obtiens pas ce que je souhaite.

Arnaud F. : cela ne semble pas faire grand chose...

avec ton code danielhagnoul, on ne déclenche pas "slide" mais "change"... ou alors j'ai pas pigé le truc.

Pour info, mon but final est d'animer le slide. Par exemple de 0 à 8 (déplacement lent du curseur avec un changement de couleur en rouge de la barre gauche )

**Tchupacabra** · 27/12/2010, 20h17

J'ai essayé cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var jqSlider = $('#slider');
jqSlider.slider('option', 'slide').call(jqSlider);

mais j'obtiens une erreur dans l'exécution de la fonction slide car ui is undefined.
La méthode call ne semble pas passer les paramètres event et ui

help...

UI Slider, déclenchez un évènement slide par le code

jQuery

Vue hybride

Discussions similaires

Partager

Partager