jQuery UI的滑块标签下滑块jQuery UI的滑块标签下滑块(jQuery UI Slide

我仅限于使用jQuery 1.4.2和jQuery UI 1.8.5（这是没有选择的余地，请不要问我升级到最新版本）。我创建了一个滑块，显示滑动条高于目前的价值，但我现在需要的是填充滑动条下面的图例相距相同滑块的方式（即，如果滑块100像素宽，有五个值滑块将捕捉每20像素。在这个例子中，我想在图例中的值被放置在20米像素的间隔）。

下面是我想要的一个例子：

这里是jQuery的我已经（从UI滑块演示页同化）：

//select element with 5 - 20 options
var el = $('.select');

//add slider
var slider = $( '<div class="slider"></div>' ).insertAfter( el ).slider({
    min: 1,
    max: el.options.length,
    range: 'min',
    value: el.selectedIndex + 1,
    slide: function( event, ui ) {
      el.selectedIndex = ui.value - 1;
      slider.find("a").text(el.options[el.selectedIndex].label);
    },
    stop: function() {
      $(el).change();
    }
});

slider.find("a").text(el.options[el.selectedIndex].label); //pre-populate value into slider handle.

Answer 1:

在发布的解决方案是完全可行的，但在这里是一种不需要额外的插件，并产生另一种解决方案这一点（见小提琴）：

以下是如何做到这一点：

启动滑块。
对于每一个可能的值，附加一个label与元件position: absolute （滑块已经position: relative ，所以标签将被相对于滑块定位）。
对于每一个label ，设置left属性的百分比。

CSS

#slider label {
  position: absolute;
  width: 20px;
  margin-top: 20px;
  margin-left: -10px;
  text-align: center;
}

JS

// A slider with a step of 1
$("#slider").slider({
    value: 4,
    min: 1,
    max: 7,
    step: 1
})
.each(function() {

    // Add labels to slider whose values 
    // are specified by min, max

    // Get the options for this slider (specified above)
    var opt = $(this).data().uiSlider.options;

    // Get the number of possible values
    var vals = opt.max - opt.min;

    // Position the labels
    for (var i = 0; i <= vals; i++) {

        // Create a new element and position it with percentages
        var el = $('<label>' + (i + opt.min) + '</label>').css('left', (i/vals*100) + '%');

        // Add the element inside #slider
        $("#slider").append(el);

    }

});

Answer 2:

要创建一个传奇，我们需要知道的滑块和元素的数量的宽度，然后将一个对等：

//store our select options in an array so we can call join(delimiter) on them
var options = [];
for each(var option in el.options)
{
  options.push(option.label);
}

//how far apart each option label should appear
var width = slider.width() / (options.length - 1);

//after the slider create a containing div with p tags of a set width.
slider.after('<div class="ui-slider-legend"><p style="width:' + width + 'px;">' + options.join('</p><p style="width:' + width + 'px;">') +'</p></div>');

p标签需要有风格“显示：内联块”正确渲染，否则每个标签将一条线或标签将毗邻彼此堆叠起来。

我创建了一个文章，解释问题和解决方案： jQuery UI的滑块在滑块传奇其中包含此工作的现场演示。