0

画像のような評価システムを持つスライダーを作成したいと思います（色は一致する必要はなく、数字だけです）。

http://i.imgur.com/FmD7D.jpg

私は私が使用する必要があることを知っています

$("#slider").slider();

ここに示すように少し：http：//docs.jquery.com/UI/Slider、しかし私は最小（0,5または1）、最大（10）およびステップ（0,5）を構築する方法を本当に理解していませんまたは1）その中。また、その後、ボタンがあります

<a href="#linkToOtherPage" data-direction="reverse" data-role="button" data-theme="b">Save</a>

そして、クリックすると、選択した評価が保存されたことを知らせるアラートを表示したいと思います。誰もがそれを行う方法を知っていますか？

編集

jquery-mobileがスライダーを別の方法で処理することを発見しました。この場合、私はjQuery-mobileを使用しています。

4

3 に答える 3

1

テストされていませんが、参照したドキュメントから、これでうまくいくようです。

$( "#slider" ).slider( { min: 0.5,
                           max: 10,
                           step: 0.5,
                           value: 5 } );

スライダーから値を表示し、アラートで表示するには、次のことを試してください。

<script>

  function saveSlider() {
    var value = $( "#slider" ).slider( "option", "value" );
    alert ("you have selected the value " + value);
  }

</script>

<input type="button" value="click me" onClick="saveSlider();" />
于 2012-12-07T14:16:36.113 に答える
1 
$("#slider").slider({ max: 10, min: 1, step: 0.5);
于 2012-12-07T14:12:49.867 に答える
0

jQuery-mobile スライダー機能を使用する必要があることがわかりました。これを使用しました：

        <input type="range" name="slider-mini" id="slider-mini" value="5" min="1" max="10" data-highlight="true" data-mini="true" />
        <script>
          function saveSlider() {
            var value = $( "#slider-mini" ).val();
            alert ("You have selected the value: " + value);
          }

        </script>

0,5 ではなく のステップがありますが、今のところは問題ありません。

于 2012-12-09T11:24:04.313 に答える