Plugin de curseur Jquery prenant en charge les "poignées à plusieurs plages"

Je cherchais une prise de curseur Jquery UI prenant en charge plusieurs poignées à distance. Le curseur d'interface utilisateur Jquery existant ne prend en charge qu'un ensemble de valeurs. Je suis à la recherche d'un curseur que vous pouvez avoir plusieurs gammes. Donc une gamme avec une gamme interne ou deux gammes qui ne se chevauchent pas.Plugin de curseur Jquery prenant en charge les "poignées à plusieurs plages"

Exemple:

R = poignée

XX = bar Curseur

= ou - = Gamme entre les poignées

XXR1 ------ R1XXXR2 - R2XXXXXXXXX

XXXR1 ---- R2 ==== R2 ----- R1XXXXXX

XXXR1 - R2 === R2 --- -R3 === R3 - R1XXXX

Je ne pense pas qu'il y ait un curseur là-bas qui puisse le faire? Je voulais juste m'assurer avant d'aller en écrire un.

Source

2009-10-07 StarSignLeo

Y at-il une raison particulière que vous ne pouvez pas utiliser plusieurs curseurs (un pour chaque plage)? Pour cela, vous pouvez les utiliser pour délimiter l'autre, donc si l'un est à l'extérieur, l'autre ne pourra pas dépasser les limites fixées par l'extérieur. – cdeszaq

Voici comment je l'ai fait.

myarr = [ 65, 80, 90 ]; 
$(function() { 
    $("#slider-range").slider({ 
     min: 0, 
     max: 100, 
     values: myarr, 
     slide: function(event, ui) { 
      if (ui.values[0] >= ui.values[1]) { 
       return false; 
      } 
      if (ui.values[1] >= ui.values[2]) { 
       return false; 
      } 
      $(this).find(".range0").css({ "width": ui.values[0] + "%" }); 
      $(this).find(".range1").css({ "left": ui.values[0] + "%", "width": (ui.values[1]-ui.values[0]) + "%" }) ; 
      $(this).find(".range2").css({ "left": ui.values[1] + "%", "width": (ui.values[2]-ui.values[1]) + "%" }) ; 
      $(this).find(".range3").css({ "left": ui.values[2] + "%", "width": (100-ui.values[2]) + "%" }) ; 
     }, 
     create: function(event, ui) { 
       $(this).append('<div class="ui-slider-range ui-widget-header range0" style="left: 0%; width: ' + myarr[0] + '%; background: none repeat scroll 0% 0% #CF1920;"></div>'); 
       $(this).append('<div class="ui-slider-range ui-widget-header range1" style="left: ' + myarr[0] + '%; width: ' + (100-myarr[1]) + '%; background: none repeat scroll 0% 0% #FFE900;"></div>'); 
       $(this).append('<div class="ui-slider-range ui-widget-header range2" style="left: ' + myarr[1] + '%; width: ' + (100-myarr[2]) + '%; background: none repeat scroll 0% 0% #26CF2D;"></div>'); 
       $(this).append('<div class="ui-slider-range ui-widget-header range3" style="left: ' + myarr[2] + '%; width: ' + (100-myarr[2]) + '%; background: none repeat scroll 0% 0% #00BCFF;"></div>'); 
     } 
    }); 
});

Im sûr qu'il peut être optimisé plus, mais cela devrait vous donner l'idée générale

Source

2011-08-24 17:04:41 shitburg

Je viens de publier Elessar pour remplir ce créneau exact. colResizable est très bien, mais ce n'est pas vraiment le bon outil pour le travail.

Source

2013-11-07 18:59:32

C'est génial! –

@Matt Brennan J'aime vraiment ça, mais j'en ai besoin d'un sans aucune lacune ... Et la première plage aurait besoin d'être réparée, possible de faire? Merci! – tim

@tim, pas avec Elessar actuellement j'ai peur. Les plages fixes sont sur la feuille de route, mais la suppression des écarts serait difficile avec notre conception actuelle. –

Plugin de curseur Jquery prenant en charge les "poignées à plusieurs plages"

Répondre

Questions connexes