0

我正在使用 YUI 2.7 库来处理网页中的双滑块（范围滑块）控件。

它工作得很好——但是，我希望允许用户通过 Ajax 切换范围值——有效地将价格范围从“0-50,000”更改为子集（例如“50-250”），而无需重新加载页面。

问题是现有滑块的值似乎没有被重置，即使我在函数内将它们显式设置回 NULL 以“重建”滑块。

在 ajax 请求之后，滑块句柄出现位置不正确（远离右侧的比例），并且滑块的值显然是随机波动的。

除了将其引用设置为 null 之外，有没有办法显式销毁 YUI 滑块对象？还是我只需要以某种方式重新声明比例和最小/最大值？

感谢您的帮助（我会尽快发布指向示例的链接）

这是代码：

function slider(bg,minthumb,maxthumb,minvalue,maxvalue,startmin,startmax,aSliderName,soptions) {
        var scaleFactor = null;
        var tickSize = null;
        var range = null;
        var dual_slider = null;
        var initVals = null;
        var Dom = null;

        range = options.sliderLength;
        if ((startmax - startmin) < soptions.sliderLength) {
            tickSize = (soptions.sliderLength / (startmax - startmin));
        }else{
            tickSize = 1;
        }

        initVals = [ 0,soptions.sliderLength ], // Values assigned during instantiation
        //Event = YAHOO.util.Event,
        dual_slider,
        scaleFactor = ((startmax - startmin) / soptions.sliderLength); 

        dual_slider = YAHOO.widget.Slider.getHorizDualSlider(
        bg,minthumb,maxthumb,range, tickSize, initVals);

        dual_slider.subscribe("change", function(instance) {
            priceMin = (dual_slider.minVal * scaleFactor) + startmin;
            priceMax = (dual_slider.maxVal * scaleFactor) + startmin;
        });

        dual_slider.subscribe("slideEnd", function(){ alert(priceMin + ' ' + priceMax); });
        return dual_slider;
    }
4

1 回答 1

2

将 startmin、startmax 和 scaleFactor 存储在 dual_slider 对象上，然后在您的 ajax 回调中，使用新值更新这些属性。更改您的更改事件订阅者以引用 this.startmin、this.startmax 和 this.scaleFactor。

Slider 和 DualSlider 只真正了解拇指的像素偏移量，并报告这些值。正如您所做的（以及大多数 Slider 示例），您需要应用转换因子将像素偏移转换为“值”。这个常见的习惯用法已经融入了 YUI 3 Slider 的核心逻辑（尽管库中还没有 DualSlider）。

这是一个说明动态更新值范围的示例：http: //yuiblog.com/sandbox/yui/v282/examples/slider/slider_factor_change.html

于 2010-10-28T22:41:13.877 回答