11540 sujets

JavaScript, DOM et API Web HTML5

Jquery : Slide control à 2 valeurs en utilisant les class

Bonsoir,


Je suis à la recherche d'un code jquery complet,
qui gère les slide control range (avec une valeur inférieure et une valeur supérieure),
qui soit fourni avec sa procédure d'installation et sa doc,
qui explique ses arguments paramétrables.

Pouvez-vous m'aider ?

En outre, je souhaiterai que le design oit totalement modifiable :
- curseur gauche
- curseur droite
- barre de défilement
- la barre sélective

Outre cela, je souhaiterai que ce code :
- gère les step

Style de design souhaité :
http://developer.yahoo.com/yui/examples/slider/slider_dual_with_highlight_clean.html
Gestion du step :
http://www.bluenile.com/be/diamond-search?pt=setform (3e 5e et 6e slide)

Merci pour votre aide.
Modifié par jytest (13 Dec 2012 - 20:00)
Salut,

La réponse que tu as eu dans ce dernier lien est à mon avis bien claire, tu remarqueras que le plugin du slider ne reconnait qu'une seule définition d'affichage pour tes deux sélecteurs: "ui-slider-handle" et les autres classes sont pour aller un plus loin dans les détails d'affichage.

Alors le code proposé par le mec sert a récupéré les deux sélecteurs et leurs mettre une classe pour chacun de tel façon que le premier reçoit la classe "first-handle" et le deuxième reçoit: "second-handle" que tu pourras bien personnalisé si tu veux, et après à toi de leurs mettre la définition que tu souhaites au niveau des css tout en faisant attention que tes classes de personnalisations doivent être plus fortes en terme d'arborescence css pour annuler celle déjà prédéfinies par le css de ton slider, et pour te simplifier la tache tu pourras supprimer les propriétés css qui te sont importantes du fichier css du slider.

Toute fois ce que je voudrais ajouter, c'est que le mec a mis ce traitement dans le load qui est normalement correcte mais pas vraiment approprié, car il y a déjà un callBack fourni par JQ UI qui est appelé après la création du slider, alors ça deviendra, par exemple :
$( "#slider" ).slider({
			range: true,
			values: [ 17, 67 ],
			create:function(event, ui){
				var handle = $('#slider a.ui-slider-handle');        
				handle.eq(0).addClass('first-handle');        
				handle.eq(1).addClass('second-handle');
			}
		});


Bonne courage
Merci unami.

Comment faire pour bien avoir 2 images de handles différents,
si on ne passe pas
par cette methode du "first-handle" et du "second-handle" ?

As-tu une piste ?
Modifié par jytest (11 Dec 2012 - 18:23)
Salut

il n y a pas d'autre façon pour le faire, car ceux qui ont conçu ce slider l'ont conçu pour que les deux sélecteurs aient le même rendu, alors pour mettre deux boutons différents il va falloir passer par ce cursus, et je crois que c'est pour cela que ça sert ces options qu'on t'offre avec le slider, pour personnaliser la config par défaut et ensuite le modeler comme on le souhaite.

Qu'il est la difficulté que tu rencontres ou bien qu'il est ton objection de ne pas travailler avec cette façon ?
Si tu souhaite les cibler en css toutefois, tu pourrais faire ainsi:


.ui-slider-handle {
  /* premier */
}

.ui-slider-handle ~ .ui-slider-handle {
  /* deuxième */
}


(évidemment, CSS fonctionnera comme toujours avec la priorité des sélecteurs, à toi de balancer ce que j'ai mis en haut.)
Peux-tu être plus précis ?
Cela s'écrit tel quel ?
C'est quoi ce "~" ?

.ui-slider-handle ~ .ui-slider-handle
Ils s'appelle les combinaisons css, c'est un plus au niveau du css il y le > , +, ~ à l'addition de l'espace dont tu faits souvent usage.

Sur tu pourras faire usage de ~ ou de + pour ce cas, mais si le ie6 t'intéresse ou intéresse ton client, c'est à dire si c'est une site à grand publique, là tu auras des petits problèmes car ces combinaisons n y sont pas supportées.
Merci à tous 2 pour vos précisions !

J'utilise ton idée pour les poignées différentes, Vaxilart, dans js/ui/jquery-ui-my.css.
En effet je souhaite IE7+. Merci.

.ui-slider-handle {
  /* premier */
	background-image:url(images/round01.gif);
}
.ui-slider-handle ~ .ui-slider-handle {
  /* deuxième */
	background-image:url(images/round02.gif);
}

Mais l'effet espéré n'est pas le bon !
Modifié par jytest (14 Dec 2012 - 16:19)
Salut,

Vaxilart a écrit :
En effet, ça ne marchera pas sur ie6. Mais bon, dans mon agence on ne supporte plus IE7, alors IE6...


Effectivement, nous avons des créas qui ne sont même pas supporté par IE8, mais à la fin je ne crois pas que c'est une question d'agence, mais plutôt une question de client, et ie6 et ie7 ont toujours malheureusement une part du marché.

Pour toi Jytest:

Trois slider différent voudrait dire trois définition différentes pour ta déclaration de slider niveau js, et pour chacune tu mets la spécification souhaitée.

Quand à ton problème d'affichage, fait usage à firebug pour détecter les styles affectés à tes deux buttons, et annules ceux qui ne sont pas désirés en les supprimant et tu pourras mettre ta spec css dans pout ton button comme tu le souhaites dans cette dernière définition que vaxilart t a communiqué.

Note: tu as besoin de te former un peu plus, si non tu vas rencontrer beaucoup de problèmes, et tu passeras quelques mois pour aboutir a des fin atteignables en quelques jours.

Bonne courage
Sujet clos
Aller à