5

私は jQuery Slider を試していて、例を使って遊んでいました。

編集: 使いやすさを向上させるために、定規のようにスライダーに値を表示させたいと思います。今のところ、ユーザビリティテストに合格するのは難しいと感じています. 人々は、スライドを開始する前に、どの値を選択しているかを知りたいと不満を漏らしています。

これを達成する方法はありますか？検索した限り、この機能が既に存在するかどうか、またはこれを行う方法についてはわかりませんでした。

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

3 に答える 3

5

ハッシュ マーキングを表示するカスタム JQuery UI スライダーの例を見つけました。

選択要素からの jQuery UI スライダー

これにより、良い出発点が得られるはずです。助けが必要な場合はお知らせください。

于 2009-05-01T04:53:07.723 に答える
0

これは役立つはずです。彼はハンドルの横に値を示しています。かなりきれい!:

http://www.keepthewebweird.com/creating-a-nice-slider-with-jquery-ui/

チュートリアルを見る!! デモは何らかの理由で少しずれています。

于 2009-08-03T20:51:04.593 に答える