J'essaie de mettre en œuvre une page où il y a 4 curseurs JQuery-UI et je tiens à le faire pour que le total combiné des 4 curseurs n'ira jamais plus de 400.
Ça ne me dérange pas de la manière dont il est implémenté, cela peut provenir d'un début de 0, et dès que vous modifiez 1 curseur, le total disponible diminue ou définit un curseur au-delà du maximum, diminue les valeurs de l'autre. curseurs.
P.s. Les curseurs sont incréments de 10.
Toutes idées et suggestions sont les bienvenues, et j'ai mis en place un Jsfiddle si vous souhaitez Test.
6 Réponses :
Eh bien ici, y allez: Voici une simple démonstration de ceci: http://jsfiddle.net/yijiang/y5zll/4/
a créé une version mise à jour de la réponse ci-dessus pour montrer les pourcentages de 100%. Ainsi, lorsque vous ajustez un curseur vers le haut, les deux autres diminuées en faisant le pourcentage de chaque curseur s'ajouter jusqu'à 100%. A également facilité de définir des valeurs initiales
jsfiddle
De mon expérience, cela ne fonctionne parfaitement que si vous définissez étape sur 1 et modifier la ligne var NEW_VALUE = VALEUR + (Delta / 2); TO VAR NEW_VALUE = VALEUR + (Delta);
@ ZZ5 qui fonctionne si vous n'avez que 2 curseurs au total, tandis que cette réponse ne fonctionne que si vous en avez 3. une solution générale avec n curseurs serait plus complexe. En outre, l'UX est assez mauvaise (c'est-à-dire essayer de sélectionner 70% - 15% - 15%).
J'ai trouvé quand les autres curseurs (ceux autres que ceux que vous déplacez) se déplacent, c'est distrayant. J'ai également modifié le violon Yi Jiang pour maintenant, il suffit d'arrêter de s'arrêter lorsque vous atteignez un total de 400. Si vous voulez que ce curseur soit plus élevé, vous aurez d'abord de baisser l'un des autres comme la façon dont la première , mais il garde le curseur relatif au total global.
Cela signifie que lorsque vous avez un curseur à 25% et un autre à 50%, ils semblent respectivement à 25 et 50.
jsfiddle
Seule une réponse correcte sur l'ensemble de l'Internet concernant le problème d'un curseur de somme constant! Gloire!
L'une de ces réponses n'était pas un peu efficace pour changer les curseurs en relation les unes des autres de n'importe quelle manière efficace ... la plupart d'entre eux ont laissé un ou plusieurs des calculs ou ne respectent pas la limite globale, je avait besoin de quelque chose pour permettre à un utilisateur de choisir leurs jetons dans un jeu HTML5, alors je suis venu avec cela si quelqu'un d'autre a déjà un problème similaire ... Si vous n'avez pas besoin de l'attacher à quelque chose comme changer les chips de paris, alors sortez simplement l'option d'arrêt ou le modifier en fonction de vos besoins
Ce fil était un excellent point de lancement pour que je puisse travailler pour la construire, espérons que cela aide les autres. https://codepen.io/jmester13/pen/joeyne
C'était une bonne expérience pour moi. J'espère que cela vous aidera également pour les autres.
p>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-lg-8">
<div class="slidecontainer">
<div class="slider"></div>
<p class="value">Value:<span class="setval"></span>
Max: <span class="max"></span>
</p>
</div>
</div>
<div class="col-lg-8">
<div class="slidecontainer">
<div class="slider"></div>
<p class="value">Value:<span class="setval"></span>
Max: <span class="max"></span>
</p>
</div>
</div>De l'avis: Bienvenue dans le débordement de la pile! S'il vous plaît ne répondez pas simplement avec le code source. Essayez de fournir une belle description sur la façon dont votre solution fonctionne. Voir: Comment puis-je écrire une bonne réponse? . Merci