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...

26/12/2010, 17h41	#2
Arnaud F. Rédacteur Arnaud Feltz Développeur .NET Inscription : août 2005 Messages : 5 204 Détails du profil Informations personnelles : Nom : Arnaud Feltz Âge : 25 Localisation : France Informations professionnelles : Activité : Développeur .NET Secteur : Transports Informations forums : Inscription : août 2005 Messages : 5 204 Points : 6 113 Points : 6 113	Bonjour, regardez du côté de la fonction .trigger() Code : Sélectionner tout - Visualiser dans une fenêtre à part $('#slider').trigger("slide"); __________________ C'est par l'adresse que vaut le bûcheron, bien plus que par la force. Homère Installation de Code::Blocks sous Debian à partir de Nightly Builds
	00

26/12/2010, 19h17	#4
Tchupacabra Membre habitué Inscription : octobre 2005 Messages : 640 Détails du profil Informations forums : Inscription : octobre 2005 Messages : 640 Points : 140 Points : 140	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 )
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email