Je voudrais un curseur UI JQuery qui a cinq plages de couleurs différentes définies par trois poignées. (Donc, la première plage serait gérer 0 - poignée 1 et la deuxième plage serait la poignée 1 à gérer 2.) est-ce possible dans la configuration ou dois-je le pirater? Si je dois modifier la source, existe-t-il des lignes directrices pour savoir comment faire cela?
| --- Couleur 1 ----- Garde1 ---------- Couleur 2 ----------------------- Color3 ------ --- Garde 3 ----- Couleur 4 ---- |
(espérons que cela a du sens.)
4 Réponses :
Vous voulez probablement utiliser un curseur de plage et transmettez-le dans un tableau de 3 valeurs à Créez 3 poignées (selon les documents):
Le widget de curseur créera la poignée éléments avec la classe 'UI-Cuider-poignée' sur l'initialisation. Vous pouvez spécifier des éléments de poignée personnalisés En créant et en ajoutant les éléments et ajouter le 'UI-Cuider-poignée' classe avant init.
ça ne fera que créer le nombre de poignées nécessaires pour correspondre la longueur de la valeur / valeurs. Pour Exemple, si vous spécifiez "Valeurs: [1, 5, 18] 'et créer une poignée personnalisée, Le plugin créera les deux autres.
À droite, mais il dit que si plage: true , il forcera là-bas pour ne être que deux curseurs.
Probablement parce que cela ne sait pas quelle gamme vous voulez. Vous pouvez extraire les positions des poignées et utiliser la logique que vous proposez pour déterminer vos gammes (par exemple, la poignée A à gérer B = plage 1; poignée B pour gérer C = plage 2). C'est restrictif, cependant. Vous voudrez peut-être simplement utiliser deux curseurs de plage et l'appeler un jour.
Cela fait longtemps que j'ai joué avec les curseurs, mais j'ai beaucoup fait avec eux dans le passé. Je n'ai jamais voulu choisir une gamme de couleurs, cependant.
L'option de plage définie dans la documentation de curseur UI JQuery limite effectivement le curseur à seulement 2 poignées. Vous devez créer plusieurs éléments lorsque le curseur augmente l'événement "Diapositives" ou "Modifier" et définit la position de ceux-ci manuellement, de cette façon, vous pouvez créer un curseur avec plusieurs poignées et plusieurs gammes que vous pouvez appliquer CSS personnalisé à. Voir Fiddle pour un exemple de travail.
C'est génial - merci. Je pense qu'il y a un petit bug où il devrait être de position () et non compensé () dans la méthode Douppdate (). JSFIDDLE.net/AV3G3/60 Sinon, sinon le curseur va tout trop fou enterré dans une vraie application
Si vous n'insistez pas sur JQuery Ui, Nouislider peut donner des plages différentes classes et prend en charge plusieurs poignées - Tout comme vous le demandez. Cet exemple montre comment colorer les gammes.
Vaut la peine de rechercher ce but «MultiRange».
modifié avec Onclick Reset, veuillez trouver le code complet.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<style>
.slide {
margin-top: 20px;
margin-left: 20px;
width: 400px;
background: red;
}
.slide-back {
position:absolute;
height:100%;
}
</style>
</head>
<body>
<!-- HTML -->
<button class="button">submit</button>
<p>
<label for = "price">Price range:</label>
<input type = "text" id = "price"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id = "slider-3"></div>
</body>
<script>
var doUpdate = function(event, ui) {
$('#slider-3 .slide-back').remove();
$($('#slider-3 a').get().reverse()).each(function(i) {
var bg = '#fff';
if(i == 1) {
bg = 'red';
} else if(i == 2) {
bg = 'yellow';
} else if(i == 3) {
bg = 'green';
}
$('#slider-3').append($('<div></div>').addClass('slide-back').width($(this).offset().left - 5).css('background', bg));
});
};
$(".button").click(function(){
$('#slider-3').slider({
slide: doUpdate,
change: doUpdate,
min: 0,
max: 100,
values: [ 10, 30, 20],
slide: function( event, ui ) {
$( "#price" ).val( ui.values[ 2 ] );
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 )
);
doUpdate();
});
$('#slider-3').slider({
slide: doUpdate,
change: doUpdate,
min: 0,
max: 100,
values: [ 10, 30, 20],
slide: function( event, ui ) {
$( "#price" ).val( ui.values[ 2 ] );
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 ) );
doUpdate();
</script>
</html>
Peut être ça? Github.com/val-samonte/angular-Multirange