javascript - jQuery スライダーの上に番号付きの間隔を表示する

Question

ハロー、

jQueryスライダーを追加しましたが、スライダーの上に間隔を示す数値を表示したいと思います。ほぼ毎日の定規のようです。誰もこれを達成するための簡単な方法を持っていますか?

Answer 1

この jQuery UI プラグインをご覧ください: http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

これは実際には、jQuery UI のスポンサーである同じ人々によって作成された、jQuery UI スライダーのより洗練されたバージョンです。ただし、これはselectリストの代わりに HTML 要素を使用するため、プラグインから目盛り追加機能を取り除き、代わりにそれを使用することをお勧めします (簡単ではありませんが、独自に記述するよりはましです!)。

これはプラグインが使用するものです：

var scale = sliderComponent.append('<ol class="ui-slider-scale ui-helper-reset" role="presentation"></ol>').find('.ui-slider-scale:eq(0)');
jQuery(selectOptions).each(function(i){
    var style = (i == selectOptions.length-1 || i == 0) ? 'style="display: none;"' : '' ;
    var labelText = (options.labelSrc == 'text') ? this.text : this.value;
    scale.append('<li style="left:'+ leftVal(i) +'"><span class="ui-slider-label">'+ labelText +'</span><span class="ui-slider-tic ui-widget-content"'+ style +'></span></li>');
});

すべてのoption要素に対して目盛りが追加され、さらに下の別のコード ブロックによってラベルが追加されます。基本的には、要素の value 属性からテキストを直接取得して、スパンのリストをスライダー要素に挿入します。また、目盛りに適切にスタイルを設定するには、かなりの量の CSS が必要になります。

Answer 2

私はこのコードを使用します。
img/current.png - クリックしたときの現在の画像へのパス)

function setSlider(selected) {
 $('.slider_item > img').remove();
 $(selected).html('<img src="img/current.png">'+$(selected).html());
 } 



 <div class="line">
        <span onclick="setSlider(this);" class="slider_item left">
            0.5
        </span><span onclick="setSlider(this);" class="slider_item middle">
            1
        </span><span onclick="setSlider(this);" class="slider_item middle">
            2
        </span><span onclick="setSlider(this);" class="slider_item middle">
            4
        </span><span onclick="setSlider(this);" class="slider_item middle">
            8
        </span><span onclick="setSlider(this);" class="slider_item middle">
            16
        </span><span onclick="setSlider(this);" class="slider_item right">
            32
        </span>
    </div>