1. Inicio
  2. Pregunta y respuesta
  3. jQuery Slider UI - Mejoras

jQuery Slider UI - Mejoras

2009-04-30 15 views
5

Estaba probando jQuery Slider y usé un ejemplo para jugar.jQuery Slider UI - Mejoras

EDITAR: Me gustaría que el control deslizante mostrara los valores, como una regla, para aumentar la usabilidad. Como es ahora, me resulta difícil pasar las pruebas de usabilidad. La gente se queja de que quieren saber qué valor están eligiendo antes de comenzar a deslizarse.

¿Alguna idea de cómo puedo lograr esto? Por lo que busqué, no pude averiguar si esta característica ya existe o sobre cómo hacer esto.

<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>

Fuente

2009-04-30 Vijay Dev

Respuesta

5

Encontré un ejemplo de un control deslizante JQuery UI personalizado que muestra marcas de hash.

jQuery UI Slider from a Select Element

Esto debe darle un buen punto de partida. Déjame saber si necesitas ayuda.

Fuente

2009-05-01 04:53:07 bchang

0

he estado guardando la entrada en sincronía con el control deslizante al igual que

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

Fuente

2009-05-01 16:32:33

Cuestiones relacionadas

 Cuestiones relacionadas