Développement simulateur en Jquery

Version imprimable

15/01/2014, 11h25
casa_sniper

Développement simulateur en Jquery

Bonjour ,
je bosse sur un petit projet web ,
je dois developper un simulateur avec 2 scroller liés a un champs de text , et je trouve des diffucltés dans la mise en forme sur les objets DOM ,
pourriez vous m'indiquer des liens utiles (tutoriels ou des exemples avec scripts )

Merci d'avance
15/01/2014, 11h32
SpaceFrog

mise en forme ?
tu peux préciser ?
15/01/2014, 14h11
casa_sniper

la mise en style CSS et leurs manipulations en jquery
vu que je suis un peu débutant en jquery et le DOM ,
j'arrive pas a comprendre le fonctionnement des elements et comment les manipuler avec les fonctions jquery

je veux bien commencer a partir d'un exemple clair pour les customiser
le besoin c'est : un simulateur qui contient 2 scrollers representant 2 intervales et qui sont liés : quand on modifier l'un des 2 l'autre est modifieé , et un champs text qui affiche la valeur du 1 scroller
15/01/2014, 14h45
casa_sniper

1 pièce(s) jointe(s)

Voila en image le besoin que je cherche a realiser
15/01/2014, 16h15
SpaceFrog

pour le style ...

http://api.jquery.com/css/
02/02/2014, 23h21
casa_sniper

Bonjour SpaceFrog .. merci pour votre lien .. ca m'a bcp aidé .. j'ai utilisé un composant ui slider ...
sinon j'ai une autre question que je n'ai pas pu trouvé la solution sur les forums,

est ce que c'est possible de mettre 2 ranges autour d'un seul handle (un a gauche et l'autre a droite).. c'est oui ,comment le faire ?

merci d'avance ,
03/02/2014, 08h36
SpaceFrog

Citation:

est ce que c'est possible de mettre 2 ranges autour d'un seul handle (un a gauche et l'autre a droite)..

J'avoue ne pas avoir compris la question :oops:
03/02/2014, 10h46
casa_sniper

1 pièce(s) jointe(s)

Merci pour ton retour :)

aufait dans un slider on peut avoir un handle par defaut qu'on le met soit a gauche ou a droite en affectant soit "min" ou "max" a l'attribut range

mon besoin c'etait d'avoir un peu prés 2 handle comme montré dans la piéce en joint
je l'ai déja fait en imbriquant une div , qui bouge avec l'indicateur(le handle) en changeant ses dépensions dans l’événement du slider (la piéce en joint)

maintenant ce que je cherche a faire et j'ai pas trouvé comment faire .. c'est d'afficher des graduations sur le slider (au dessous par exemple)

cdt

j'ai un autre petit souci si vous me permettez ,

est ce que c'est possible de faire un echel en le coddant (sans utiliser une image mis au dessous du slider )??
et est ce que c'est possible de faire une limite (un minimum et un maximum ) a ne pas dépasser a un certaine valeur du slider , pas exemple (ne pas permettre a l’utilisateur de dépasser la valeur max -50)

merci par avance
je mets un bout de mon code du slider pour vous donner une idée plus claire :

Code:

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
$(function() {
        var select1 = $( "#MensId" ); 
		var select2 = $( "#DureId" );
			tooltip1 = $("#indic1");
			tooltip2 = $("#indic2");
 
			tooltip1.hide();  
			tooltip2.hide();  
 
        $( "#slider2" ).slider({
            range: 'min',
            value:2,
            min:1,
            max:4,
			step:0.01,
			start: function(event,ui) {
					tooltip1.fadeIn('fast');
					tooltip2.fadeIn('fast');
			},
 
            slide: function( event, ui ) {
 
                select1[ 0 ].selectedIndex = ui.value - 1;
				select2[ 0 ].selectedIndex = ui.value - 1;
 
 
 
 
                var pos  = $('.ui-slider-handle:last').position();
                tooltip1.css('left', pos.left-70 ).text($("#DureId > option:selected").text());
                tooltip2.css('left', pos.left+50 ).text($("#MensId > option:selected").text());
            },
			stop: function(event,ui) {  
				tooltip1.fadeOut('fast');  
				tooltip2.fadeOut('fast');  
			}, 	
        });
 
		select1.change(function() {	
			$( "#slider2").slider( "value", this.selectedIndex + 1 );	
		});
 
		select2.change(function() {
			$( "#slider2").slider( "value", this.selectedIndex + 1 );
		});