Question

我正在使用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;
    }

Answer 1

将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

YUI API双滑块控制问题

1 个答案: