用jquery ui滑塊更改css

Question

我有一個具有10px邊框的div。我想要做的是通過移動jQuery UI滑塊小部件來改變邊框的大小。

HTML

<h1>Choose Your Size!</h1> 
<div id="map"> 
<div id="detail"> 
    <div id="slider"></div> 
    <div class="dataPt"></div> 
</div> 
</div> 

的jsfiddle

http://jsfiddle.net/NWztP/1/

Answer 1

從來沒有使用過這一點，只是看着http://api.jqueryui.com/slider/#event-slide

$(function() { 
    $("#slider").slider({ 
     slide: function(event, ui) { 
      //console.log(ui.value); 
      $('.dataPt').css({borderWidth: ui.value}); 
     } 
    }); 
    }); 

Updated jsfiddle

要，只要我能保持一個圓圈

$('.dataPt').css({borderWidth: ui.value, borderRadius: ui.value * 2}); 

http://jsfiddle.net/NWztP/3/