Question

这是how to apply a QTip to a JQueryUI slider and display its value。

var slider = $('#jqueryui-slider').slider({
    slide: function(event, ui) {
        handle.qtip('option', 'content.text', '' + ui.value);
    }
}),
    handle = $('.ui-slider-handle', slider);

handle.qtip({
    id: 'uislider',
    content: '' + slider.slider('option', 'value'),
    position: {
        my: 'bottom center',
        at: 'top center',
        container: handle 
    },
    hide: {
        delay: 1000
    },
    style: {
        widget: true
    }
});

我正在试图弄清楚如何以相同的方式应用多个QTips（滑块的值显示在提示中），但是对于同一页面上的任意数量的滑块。

我需要这个，因为我在页面上动态创建滑块，滑块的数量会因记录而异。

修改

为了进一步澄清，因为我在页面上动态生成滑块，一个接一个，它们当前正在独立配置，每个都需要自己的参数（最大值，值，步长）和滑动动作事件

由于需要独立初始化（并且需要在slide（）事件中引用不同的html元素），目前正在使用多个.slider（）。下面是一个可以添加到页面的.slider（）示例（使用ASP.net，在转发器中动态生成控件）。它使用隐藏字段根据要操作的值的类型初始化滑块。此外，它还会更新slide（）事件内页面上的标签和其他值（也是动态生成的）。

当前答案显示了如何配置多个滑块，但只使用一个slider（）声明。我真的在寻找能够做同样事情的答案，但允许每个滑块独立配置。如果仍然可以使用一个slider（）调用来完成，那么这也可以工作，虽然我不确定是否可以这样做。

var currentSlider = $('#<%=panSlider.ClientID%>').slider({
        range: "min",
        max: parseInt($('#<%=hfMaxValue.ClientID%>').val()),
        value: parseInt($('#<%=hfInitValue.ClientID%>').val()),
        step: parseInt($('#<%=hfStepValue.ClientID%>').val()),
        slide: function (event, ui) {
          // set the text to show the current value and update the hidden field for postback
          $("#<%=labValue.ClientID%>").text(ui.value);
          $("#<%=hfValue.ClientID%>").val(ui.value);
          // determine the difference from base to current value
          var difference = ui.value - $('#<%=hfBaseValue.ClientID%>').val();
          $("#<%=labDifference.ClientID%>").text(difference);

          // add tooltip to handle

          handle.qtip('option', 'content.text', '' + ui.value);
        }
      });

Answer 1

看看我的小提琴：http://jsfiddle.net/dodcbzdw/1/

HTML：

<div class="jqueryui-slider"></div>
<div class="jqueryui-slider"></div>
<div class="jqueryui-slider"></div>

JS：

var slider = $('.jqueryui-slider').slider({
    slide: function(event, ui) {
        handle.qtip('option', 'content.text', '' + ui.value);
    }
})

没有看到提示的z-index问题，这应该是你想要的。只需为每个滑块使用相同的类，并使用此类同时生成所有滑块和qtips。

Answer 2

您可以使用jquery的.each功能遍历所有滑块并单独初始化它们。

$('.jqueryui-slider').each(function(){
    var slider = $(this).slider({
        slide: function(event, ui) {
            handle.qtip('option', 'content.text', '' + ui.value);
        }
    }),
    handle = $('.ui-slider-handle', slider);

    handle.qtip({
        id: 'uislider',
        content: '' + slider.slider('option', 'value'),
        position: {
            my: 'bottom center',
            at: 'top center',
            container: handle 
        },
        hide: {
            delay: 1000
        },
        style: {
            widget: true
        }
    });    
});

Fiddle

将QTip应用于多个JQueryUI滑块

2 个答案: