用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/