滑块下的jQuery UI滑块标签 [英] jQuery UI Slider Labels Under Slider

问题描述

我仅限使用jQuery 1.4.2和jQuery ui 1.8.5(这不是选择，请不要要求我升级到最新版本).我创建了一个滑块，该滑块显示滑块上方的当前值，但是我现在需要的是一种在滑块下方填充与滑块相同距离的图例的方法(即，如果滑块的宽度为100px，并且有五个值滑块将每20px捕捉一次.在此示例中，我希望图例中的值以20px的间隔放置).

I am limited to using jQuery 1.4.2 and jQuery ui 1.8.5 (this is not by choice, please do not ask me to upgrade to latest versions). I have created a slider that shows the current value above the slide bar, but what I need now is a way to populate a legend below the slide bar distanced the same as the slider (i.e. if the slider is 100px wide and there are five values the slider will snap every 20px. In this example, I would like the values in the legend to be placed at 20px intervals).

这是我想要的例子:

这是我拥有的jQuery(来自ui滑块演示页面):

Here is the jQuery I have (assimilated from the ui slider demo page):

//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.

推荐答案

要创建图例，我们需要知道滑块的宽度和元素数，然后将一个元素除以另一个:

To create a legend, we need to know the width of the slider and the number of elements then divide one against the other:

//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标签必须具有'display:inline-block'样式才能正确呈现，否则每个标签将占用一行，或者标签将紧挨着堆叠.

The p tag needs to have the style 'display:inline-block' to render correctly, otherwise each label will take one line or the labels will be stacked up right next to each other.

我创建了一个帖子来解释问题和解决方案:滑块下的jQuery UI滑块图例，其中包含此工作的实时演示.

I have created a post explaining the problem and solution: jQuery UI Slider Legend Under Slider which contains a live demo of this working.

这篇关于滑块下的jQuery UI滑块标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！