1

你好,

我添加了一个 jQuery 滑块,现在我希望滑块上方有数字,表示间隔。几乎就像一个日常的统治者。有没有人有一个快速的方法来完成这个?

4

2 回答 2

2

看看这个 jQuery UI 插件:http ://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

它实际上是由赞助 jQuery UI 的同一个人创建的 jQuery UI 滑块的更复杂版本。但是,这使用selectHTML 元素而不是列表,因此您可能希望从插件中删除 tic 添加功能并改用它(不容易,但它比编写自己的要好,我希望!)。

这是插件使用的:

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元素添加一个 tic,标签由另一个代码块添加到更下方。它所做的基本上是将跨度列表注入滑块元素,文本直接取自元素的 value 属性。您还需要相当多的 CSS 才能将其正确设置为 tics 样式。

于 2010-09-16T08:07:34.717 回答
0

我使用此代码。
img/current.png - 当前图像的路径,当我按下 Click 时)

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>
于 2010-09-16T07:55:50.733 回答