Question

我使用jquery UI slider并希望onchange调整div的宽度：

            $('#slider').slider({
                value: [17],
                change: handleSliderChange
            });

        function handleSliderChange(){
        ...         
        }

这里是html

    <div id="slider"></div>
<div id="vardiv" style="width:300px;height:20px;border:3px solid black"> Testing </div>

我希望通过调整滑块，div #vardiv的宽度应按比例调整。

我想我们必须计算一下并使用一些函数。

THX 4你的支持。

Answer 1

更改功能只会在释放鼠标后调用，如果您想要实时效果，可以使用滑动功能像这样：

$('#slider').slider({
    value: 17,
    slide: handleSliderChange
});

function handleSliderChange(event, slider){
          $('#vardiv').css('width', slider.value + '%');
          $("#vardiv").text(slider.value + '%');   
}

工作示例： http://jsfiddle.net/saelfaer/WXfkK/1/

Answer 2

为了得到这种行为，我会写这样的东西，简而言之。

$("#slider").slider({
     change: function (event, ui) {
          $("#vardiv").css("width", ui.value + "%");
     }
});

每次滑块更改时都会执行此事件。在该事件中，vardiv元素将获得与其父级成比例的新宽度。

jquery UI：通过滑块更改调整div的宽度

2 个答案: