jquery ui 可调整大小的左下手柄以调整大小答案

【问题标题】：jquery ui resizable left-bottom handle to resizejquery ui 可调整大小的左下手柄以调整大小
【发布时间】：2011-10-15 20:09:14
【问题描述】：

我在我的项目中使用 jquery-ui-resizable 插件。

默认情况下，当您制作 DOM 对象 jquery-ui-resizable 时，可调整大小的句柄会出现在右下角，我需要左下角的可调整大小的句柄。

--- 编辑---

还有一点，它不应该使用右边框来调整大小，而应该使用左边框来调整大小。

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-resizable

【解决方案1】：

您应该使用handles

supported: { n, e, s, w, ne, se, sw, nw }.

这将在您指定的一侧创建句柄。默认值为

'e, s, se'

代码示例

使用指定的句柄选项初始化可调整大小的对象。

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

在初始化之后获取或设置句柄选项。

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

【讨论】：

+1，感谢@Ahmed 的回复，我认为它会起作用。请让我试试。
只是对未来访问者的提醒：这个答案在添加 FUNCTIONAL 句柄方面是正确的，但它不会像 OP 的屏幕截图中那样创建 VISIBLE 句柄。有关更多详细信息，请参见下文 Dr.Molle 的回答。

【解决方案2】：

除了艾哈迈德的回答： jQueryUI 不包含用于 sw 句柄的图标，也没有为 sw 句柄应用图标类。您可以使用一些 CSS 来添加图标：

#resizable .ui-resizable-sw{background:url(path/to/custom_icon.gif) no-repeat;}

【讨论】：

【解决方案3】：

也可以使用以下代码从各个方面重新调整大小

     var resizeOpts = { 
      handles: "all" ,autoHide:true
    }; 
$( ".selector" ).resizable(resizeOpts);

autoHide 等于 true 表示当鼠标离开 dom 对象时，grip icon 会自动隐藏。

【讨论】：

【解决方案4】：

我一直在寻找这种软件解决方案。我必须做的是在调用 resizable() 之后将 ui-icon 类添加到创建的 div 中。

$( "#wproof" ).resizable({handles: "w, sw, s"});
$('.ui-resizable-sw').addClass('ui-icon ui-icon-gripsmall-diagonal-sw');

然后在 images/ui-icons_222222_256x240.png 中定义图标它是底部的一个小 9X9 区域。制作一个 .png 文件（带有旋转！）并将样式添加到给定的类：

<style>
.ui-icon-gripsmall-diagonal-sw { 
    background-image: url(your 9x9 icon.png); }
.ui-resizable-sw {
    bottom: 1px;
    left: 1px;
}
</style>

jquery-ui css中底部和左侧设置为-5px

【讨论】：

好发现！在我的 jQuery UI 版本中，图像的文件名略有不同，但它就在“图像”文件夹中。（太糟糕了，jQuery UI icon set 不包括所有四个角的“握把”图标。那会为我们省去一些麻烦！）

【解决方案5】：

似乎标准的光标属性是 UI CSS 使用的

.ui-resizable-sw {
cursor: sw-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}

此外，用于定位的元素的一侧似乎没有显示光标并且未启用调整大小 - 例如：使用 left:20px top:20px 定位的 div 将不会在左侧和顶部启用调整大小侧面

我在添加所有句柄后发现了这一点，但后来它们都没有出现！更新：显然我的应用程序中有一些问题导致了我的问题。使用相同版本的 JQuery 对 JSFiddle 进行测试，所有句柄都按预期工作.....arggggg

【讨论】：