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()更改语句以某种方式放入合适的resizing-event例程中。像这样：

$('.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属性仍需要调整，但我会留给您。 ; - ）

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

1 个答案: