喂,
我添加了一个jQuery滑块,现在我希望滑块上方有数字表示间隔。几乎像一个日常统治者。有没有人有快速的方法来实现这个目标?
答案 0 :(得分:2)
看看这个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元素而不是列表,所以你可能想要从插件中删除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来正确地设计样式。
答案 1 :(得分: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>