jquery - jquery ui滑块的基于百分比的高度和宽度

Question

我想创建一个在所有设备上无缝响应的界面，并且在调整其窗口大小时也调整大小。

这个例子正在到达那里：

$('.resizer').resizable({
    aspectRatio: true,
    handles: 'all'
});

$("#slider").slider();

JSFIDDLE

滑块元素的宽度和高度会动态调整，因为它们是基于百分比的。但手柄保持不变！如何允许手柄使用滑块调整大小？我必须在 jquery-ui 的 css 中扎根吗？

Answer 1

调整 CSS 属性：

.ui-slider-handle {
    top: -0.3em;
    margin-left: -0.6em;
}
.ui-slider-handle 
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 0.2em;
    cursor: default;
}

如果您想动态执行此操作，可以尝试以下操作：

$('.ui-slider-handle').css('width',$('.lyr2').width()*0.1);

编辑：

对不起，我之前没有得到调整大小。您必须以css()某种方式将上述更改语句放入合适的调整大小事件例程中。像这样的东西：

$('.resizer').resizable({
    aspectRatio: true,
    handles: 'all',
    resize: function(ev,ui) {var siz=ui.element.width()*0.1;
    $('.ui-slider-handle').css({width:siz,height:siz} );
    }});
$("#slider").slider();

见这里：JSfiddle。还不完美，因为top和margin-left属性仍然需要调整，但我会把它留给你。;-)