1. casa
  2. Domanda e risposta
  3. Interfaccia utente jQuery Slider - Miglioramenti

Interfaccia utente jQuery Slider - Miglioramenti

2009-04-30 19 views
5

Stavo provando jQuery Slider e ho usato un esempio per giocare.Interfaccia utente jQuery Slider - Miglioramenti

MODIFICA: Mi piacerebbe che il cursore mostri i valori, come un righello, per aumentare l'usabilità. Come è ora, trovo difficile passare il test di usabilità. Le persone si lamentano di voler sapere quale valore stanno selezionando prima che inizino a scivolare.

Qualche idea su come posso raggiungere questo obiettivo? Per quanto ho cercato, non sono riuscito a scoprire se questa funzione esiste già o su come farlo.

<html> 
<head> 
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> 
<style type="text/css"> 
    #slider { margin: 10px; } 
</style> 
<script type="text/javascript"> 
    $(function() { 
     $("#slider").slider({   
      value: 50, 
      min: 0, 
      max: 99, 
      step: 1, 
      slide: function(event, ui) { 
       $("#amount").val('$' + ui.value); 
      } 
     }); 
     $("#amount").val('$' + $("#slider").slider("value")); 
    }); 
</script> 
</head> 
<body style="font-size:62.5%;"> 
<div id="slider"></div> 
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> 
</body> 
</html>

fonte

2009-04-30 Vijay Dev

risposta

5

Ho trovato un esempio di un dispositivo di scorrimento dell'interfaccia utente JQuery personalizzato che visualizza i segni di hash.

jQuery UI Slider from a Select Element

Questo dovrebbe dare un buon punto di partenza. Fammi sapere se hai bisogno di aiuto.

fonte

2009-05-01 04:53:07 bchang

0

ho tenuto l'ingresso in sincronia con il cursore in questo modo

<div id='support_slider' class='slider' alt='" + pct + "'></div> 
<input id='support_input' class='input' alt='" + pct + "' value='" + pct + "' size='1'/> 

$("#support_slider").slider({ 
    //animate: true, 
    min: 0, 
    max: 10, 
    value: pct, 
    slide: function(event, ui) { 
      set_sliders_and_input($(this), $(this).next(), $(this).next().attr("value"), ui.value); 
    } 
}); 

$("#support_input").keyup(function(event) { 
    set_sliders_and_input($(this).prev(), $(this), $(this).attr("alt"), $(this).attr("value")); 
}); 

function set_sliders_and_input(slider, input, oldv, newv) { 
    if (newv < 0 || newv > 100) return false; 
    var diff = oldv - newv; 
    input.attr("value", newv).attr("alt", newv); 
    slider.slider('option', 'value', newv); 
    GM_setValue('support_pct', newv); 
    return true; 
}

fonte

2009-05-01 16:32:33

Problemi correlati

 Problemi correlati