上一篇: jQuery – 根据屏幕大小执行脚本下一篇:jquery – Poltergeist – 关闭J...

jquery-ui – jQuery UI滑块：沿着(带)的句柄移动值

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery-ui – jQuery UI滑块：沿着(带)的句柄移动值，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我在页面中使用了jQuery UI滑块组件来设置一系列的价格.
我也可以使用它们的ui.values []来设置和显示其他div中的新值.

我如何才能看到句柄下的新值.即如果我移动了
处理到$100,我想在该句柄下设置“$100”文本.

BTW,我使用范围版本 – 设置一系列的价格,所以我有两个手柄在我的滑块(最小和最大).

var minPriceRange=100;
var maxPriceRange=500;
$( "#priceRangeSlider" ).slider({
        range: true,min: minPriceRange,max: maxPriceRange,step: 10,values: [ minPriceRange,maxPriceRange ],slide: function( event,ui ) {
            ("#fromRangeText").text("$" + ui.values[ 0 ]);
            $("#toRangeText").text("$" + ui.values[ 1 ]);
        }
});

解决方法

您可以使用jQuery UI中的.position实用程序函数来放置标签：

$("#slider").slider({
    ...
    slide: function(event,ui) {
        var delay = function() {
            var handleIndex = $(ui.handlE).data('index.uiSliderHandle');
            var label = handleIndex == 0 ? '#min' : '#max';
            $(label).html('$' + ui.value).position({
                my: 'center top',at: 'center bottom',of: ui.handle,offset: "0,10"
            });
        };

        // wait for the ui.handle to set its position
        setTimeout(delay,5);
    }
});

看到动作：http://jsfiddle.net/william/RSkpH/1/.