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

问题描述

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

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 Slider Legend Under Slider，其中包含此工作的现场演示.

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屋！