jQuery UI可调整大小:单独使用东手柄时的自动高度

前端之家收集整理的这篇文章主要介绍了jQuery UI可调整大小:单独使用东手柄时的自动高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个 jqueryui重新调整大小的div.我只希望宽度可以重新调整大小并且高度保持自动,以便div随内容增长或缩小.如果我将其设置为仅显示东方手柄并使用css height:auto,则在调整大小后,即使只更改了宽度,也会设置高度.我必须每次都将高度设置为自动调整大小事件,如下所示:
resize: function(event,ui) {
    $(this).css('height','auto');
}

防止高度被设定.当只使用东手柄时,是否有更好的方法来防止高度设置?

解决方法

尝试设置宽高比和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,nw}.任何指定的值应该是一个jQuery选择器,匹配resizable的子元素以用作该句柄.如果句柄不是resizable的子句,则可以直接传入DOMElement或有效的jQuery对象.

代码示例

使用指定的句柄选项初始化resizable.

$( ".selector" ).resizable({ handles: 'n,w' });

在init之后获取或设置handle选项.

//getter
var handles = $( ".selector" ).resizable( "option","handles" );
//setter
$( ".selector" ).resizable( "option","handles",'n,w' );

猜你在找的jQuery相关文章