jQuery UI可调整大小:单独使用向东句柄时的自动高度 [英] jQuery UI resizable : auto height when using east handle alone

问题描述

我有一个jqueryui可调整大小的div.我只希望宽度可以调整大小，而高度则可以保持自动，以便div随内容增加或缩小.如果我将其设置为仅显示东向手柄并使用css height:auto，则在调整大小后，即使仅更改了宽度，也将设置高度.我必须将每次调整大小事件时的高度都设置为自动，如下所示:

i have a jqueryui re-sizable div. I want only the width to be re-sizable and the height to remain auto, so that the div grows or shrinks with the content. If i set it to display only the east handle and use css height:auto, after resize the height also gets set even though only the width changed. I have to set the height to auto on resize event everytime like so:

resize: function(event, ui) {
    $(this).css('height', 'auto');
}

以防止设置高度.仅使用东向手柄时，有没有更好的方法来防止高度设置?

to prevent the height from being set. Is there a better way to prevent the height from getting set when only the east handle is used?

推荐答案

尝试设置长宽比和handles属性:

Try setting an aspect ratio AND the handles property:

    $( "#resizable" ).resizable({
        aspectRatio: 16 / 9,
                    handles: 'e'
    });

上面的代码将创建一个容器，该容器将自动调整为16/9的宽高比，仅在容器的东侧具有一个手柄即可.

The above will create a container that will automatically re-size to a 16/9 aspect ratio, only with a handle on the east side of the container.

这是文档站点 http://jqueryui.com/demos/上的描述可调整大小/#option-containment :

如果指定为字符串，则应为以下任何一个逗号分隔的列表:"n，e，s，w，ne，se，sw，nw，所有".必要的句柄将由插件自动生成.

If specified as a string, should be a comma-split list of any of the following: 'n, e, s, w, ne, se, sw, nw, all'. The necessary handles will be auto-generated by the plugin.

如果指定为对象，则支持以下键:{n，e，s，w，ne，se，sw，nw}.指定的任何值都应该是一个与可调整大小的子元素匹配的jQuery选择器，以用作该句柄.如果该句柄不是可调整大小的子级，则可以直接传递DOMElement或有效的jQuery对象.

If specified as an object, the following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.

代码示例

使用指定的handles选项初始化可调整大小的内容.

Initialize a resizable with the handles option specified.

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

在初始化后获取或设置handles选项.

Get or set the handles option, after init.

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

这篇关于jQuery UI可调整大小:单独使用向东句柄时的自动高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！