1

私はかなりjavascriptとjqueryです。Web ページにスライダーを追加しようとしています。誰でも0～100の間で値を選択できる基本的なスライダーです。途中でいくつかの間隔をマークする方法がわかりません。

これは私がこれまで持っているコードです

  <script>
    $(function() {
    var temp = 0;
        $( "#slider" ).slider({
            animate: true,
            value:temp,
            min: 0,
            max: 100,
            step: 1,
            slide: function( event, ui ) {
                $( "#amount" ).val(ui.value );
            },
            stop: function(event, ui) {          
                temp = ui.value;
                //Do something
            }
        });
        $( "#amount" ).val($( "#slider" ).slider( "value" ) );
    });
    </script>

正常に機能しています。私がやりたいのは、0.25、50、75、および 100 に間隔マーカーを追加することです。

SO に関するいくつかの質問をしましたが、実装を進める方法がわかりません。助けていただければ幸いです。

私はこの実装を試しました：http://jsbin.com/iwimeしかし、これは私がやろうとしていることではありません.定期的に目盛りを表示したいだけですが、ユーザーは他の値を選択することができます.

ありがとう乾杯

4

2 に答える 2

0

私はあなたがこのようなものが欲しいと推測しています: http://jsbin.com/iwime/116

そのため、スライダーのオプションで目盛りの数を使用する代わりに、max提供したい任意の最大単位 (100 など) を使用します。次にrefershTicks()、アルゴリズムを更新してクラスを切り替えます。

スライダー設定:

    var slider = $("#slider").slider({
        ...
        max: 100,     // the only change
        ...
    });

そしてrefreshTicks()方法：

    function refreshTicks() {
        var s = slider
            , lo = s.slider("values", 0), hi = s.slider("values", 1);
        var max = s.slider('option', 'max');
        s.find(".tick").each(function(i) {
            var i = (i + 1) * (max/ticks.length) - (max/ticks.length)/2;   // the updated algorithm
            var inRange = (i >= lo && i < hi);
            $(this)
                [(inRange ? 'add' : 'remove') + 'Class']("ui-widget-header")
                [(inRange ? 'remove' : 'add') + 'Class']("ui-widget-content");
        });
    }
于 2012-09-24T23:20:28.510 に答える
0

この SO の質問に似ています: Bijan からの回答が役立つ場合があります。

彼が提案する jQuery UI スライダーの実装は、解決策を見つけるのに役立つかもしれません: http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

于 2012-09-26T22:54:24.517 に答える