1. Zuhause
  2. Frage und Antwort
  3. jQuery Slider UI - Verbesserungen

jQuery Slider UI - Verbesserungen

2009-04-30 14 views
5

Ich habe versucht, jQuery Slider und ein Beispiel zum Spielen verwendet.jQuery Slider UI - Verbesserungen

EDIT: Ich möchte den Schieberegler zeigen die Werte, wie ein Lineal, um die Benutzerfreundlichkeit zu erhöhen. Wie es jetzt ist, finde ich es schwierig, den Usability-Test zu bestehen. Die Leute beschweren sich, dass sie wissen wollen, welchen Wert sie wählen, bevor sie anfangen zu gleiten.

Irgendwelche Ideen, wie ich das erreichen kann? Soweit ich gesucht habe, konnte ich nicht herausfinden, ob dieses Feature bereits existiert oder wie man das macht.

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

Quelle

2009-04-30 Vijay Dev

Antwort

5

Ich habe ein Beispiel für einen benutzerdefinierten JQuery UI Slider gefunden, der Hash-Markierungen anzeigt.

jQuery UI Slider from a Select Element

Dies sollte Ihnen einen guten Ausgangspunkt. Lass es mich wissen falls du Hilfe benötigst.

Quelle

2009-05-01 04:53:07 bchang

0

Ich habe wie die Eingabe synchron mit dem Schieber zu halten, so

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

Quelle

2009-05-01 16:32:33

Verwandte Themen

 Verwandte Themen