Interfaccia utente di Jquery: intervallo di scorrimento. Quale cursore viene spostato?

Question

In questa pagina demo: http://jqueryui.com/demos/slider/#event-change

Il 'slide' riscrittura evento ha due ingressi in una volta:

$("#amount").val("$" + $("#slider-range").slider("values", 0) + 
      " - $" + $("#slider-range").slider("values", 1)); 

Per i miei scopi che voglio sapere, quale delle due cursori vengono spostati (min o max) . Come posso ottenerlo?

Answer 1

@Nikoole, non v'è alcun metodo specifico per trovare quale maniglia è scorrevole, ma si potrebbe provare questo trucco

var minSlide = 75, maxSlide = 300; 
$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     if(minSlide != parseInt(ui.values[0], 10)){ 
      // Do what in minimum handle case 
     } 
     else if(maxSlide != parseInt(ui.values[1], 10)) { 
      // Do what in maximum handle case 
     } 
    }, 
    stop: function(event, ui){ 
     minSlide = parseInt(ui.values[0], 10); 
     maxSlide = parseInt(ui.values[1], 10);    
    } 
}); 

Spero che questo vi aiuterà.

Answer 2

Anche io ho affrontato lo stesso problema di recente. Quando si utilizza un cursore di intervallo, è necessario determinare quale cursore (destro o sinistro) è stato spostato. C'è no direct modo per determinare che, ma tuttavia, l'oggetto ui ha attributi, value e values che è possibile utilizzare per determinare quale dispositivo di scorrimento è stato spostato. ecco la soluzione che ha funzionato per me: -

 $("#slider-range").slider({ 
     range: true, 
     min: 75, 
     max: 300, 
     values:[75,300], 
     slide: function(event, ui) { 
     target_name = '' 
     if(ui.values[0] == ui.value) target_name = 'min_price' 
     else if(ui.values[1] == ui.value) target_name = 'max_price' 
     alert(target_name) 
     } 

Answer 3

Ho risolto questo impostando attributo ID a min e max selettori sul creare evento definito dal cursore API http://api.jqueryui.com/1.8/slider/#event-create.

  create:function(event, ui) 
     { 
     var handlers = $('.ui-slider-handle'); 
     $.each(handlers, function(i, element) 
     { 
      if(i == 0) 
       $(element).attr('id', 'slider-handler-min'); 
      else 
       $(element).attr('id', 'slider-handler-max'); 
     }); 
     } 

... e poi di nuovo nel mio caso ho slide attributo ID Simply Red dal ui.handler per ottenere che uno si muove :)

Answer 4

gestore cursore destro è l'ultimo figlio di contenitore di scorrimento, così, a differenza gestore di sinistra, il gestore destro non ha nextSibling:

$('#slider-range').slider({ 
    range: true, 
    min: 0, max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     if (ui.handle.nextSibling) { 
      // Moving LEFT slider ... 
     } else { 
      // Moving RIGHT slider ... 
     } 
    } 
}); 

Answer 5

L'evento di diapositiva richiede due parametri: evento e ui. ui contiene un oggetto maniglia. È possibile accedere e testare l'indice del manico in questo modo:

$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     var index = $(ui.handle).index(); 
     if (index == 1) { 
      // do stuff for minimum 
     } 
     if (index == 2) { 
      // do stuff for maximum 
     } 
    } 
}); 

Questo funziona per qualsiasi numero di handle in un dato dispositivo di scorrimento. Notare che gli indici iniziano da 1 e non da 0.