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

【问题标题】：Percentage based height and width of jquery ui sliderjquery ui滑块的基于百分比的高度和宽度
【发布时间】：2013-08-12 11:04:24
【问题描述】：

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

这个例子正在到达那里：

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

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

JSFIDDLE

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

【问题讨论】：

标签： jquery css

【解决方案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 属性仍然需要调整，但我会留给你。 ;-)

【讨论】：

啊，是的。非常感谢！