我有一个jqueryui重新调整大小的div。我只希望宽度可以重新调整大小并且高度保持自动,以便div随内容增长或缩小。如果我将其设置为仅显示东方句柄并使用css height:auto
,则在调整大小后,即使只更改了宽度,也会设置高度。我必须每次都将高度设置为自动调整大小事件:
resize: function(event, ui) {
$(this).css('height', 'auto');
}
防止高度被设定。当只使用东方手柄时,是否有更好的方法来防止高度设置?
答案 0 :(得分:0)
尝试设置宽高比和handle属性:
$( "#resizable" ).resizable({
aspectRatio: 16 / 9,
handles: 'e'
});
上面将创建一个容器,它将自动重新调整大小为16/9的宽高比,只有容器东侧的句柄。
以下是http://jqueryui.com/demos/resizable/#option-containment文档网站上的说明:
如果指定为字符串,则应该是以下任何一个的逗号分割列表:'n,e,s,w,ne,se,sw,nw,all'。必要的句柄将由插件自动生成。
如果指定为对象,则支持以下键:{n,e,s,w,ne,se,sw,nw}。任何指定的值应该是一个jQuery选择器,匹配resizable的子元素以用作该句柄。如果句柄不是resizable的子句,则可以直接传入DOMElement或有效的jQuery对象。
代码示例
使用指定的句柄选项初始化resizable。
$( ".selector" ).resizable({ handles: 'n, e, s, w' });
在init之后获取或设置handle选项。
//getter
var handles = $( ".selector" ).resizable( "option", "handles" );
//setter
$( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );