jQuery用户界面：通过滑块改变调整DIV的宽度

Question

使用jQuery UI slider，想平变化来调整一个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元素将获得一个新的比例宽度给它的父项。