Plug-in Jquery che supporta "Multiple Ranged Handles"

Ho cercato un plug-in di interfaccia utente Jquery che supporti le maniglie a più zone. Il cursore esistente dell'interfaccia utente Jquery supporta solo un insieme di valori di intervallo. Sto cercando un cursore che tu possa avere intervalli multipli. Quindi un intervallo con un intervallo interno o due intervalli che non si sovrappongono.Plug-in Jquery che supporta "Multiple Ranged Handles"

Esempio:

R = gestire

XX = Slider bar

= o - = intervallo tra le maniglie

XXR1 ------ R1XXXR2 - R2XXXXXXXXX

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

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

Non penso che ci sia uno slider che può farlo ?? Volevo solo essere sicuro prima di andare a scriverne uno.

fonte

2009-10-07 StarSignLeo

C'è un motivo particolare che non è possibile utilizzare più cursori (uno per ogni serie)? Per questo, potresti usarli per legare l'altro, quindi se uno è un raggio esterno, l'altro non sarebbe in grado di scorrere oltre i limiti impostati dall'esterno. – cdeszaq

Ecco come l'ho fatto.

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>'); 
     } 
    }); 
});

Sono sicuro che può essere ottimizzato di più, ma questo dovrebbe dare l'idea generale

fonte

2011-08-24 17:04:41 shitburg

Ho appena rilasciato Elessar di riempire questa nicchia esatto. colResizable va bene, ma non è davvero lo strumento giusto per il lavoro.

fonte

2013-11-07 18:59:32

Questo è fantastico! –

@Matt Brennan Mi piace molto ma ho bisogno di uno senza spazi vuoti ... E il primo intervallo dovrebbe essere corretto, è possibile farlo? Grazie! – tim

@tim, non con Elessar attualmente ho paura. Gli intervalli fissi sono sulla tabella di marcia, ma rimuovere le lacune sarebbe complicato con il nostro attuale design. –

Plug-in Jquery che supporta "Multiple Ranged Handles"

risposta

Problemi correlati