jquery - 使用 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

Never used this before, just looked at 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

To maintain a circle

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

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