javascript - 在 jQuery slider 上方显示编号间隔

Question

你好，

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

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 slider 的更复杂版本。然而，这使用 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，并由另一个代码块进一步添加一个标签。它所做的基本上是将跨度列表注入(inject) slider 元素，文本直接取自元素的值属性。您还需要相当多的 CSS 才能将其正确设置为 tics。