jquery ui可调整大小的左下手柄来调整大小

Question

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

默认情况下，当您创建一个DOM对象jquery-ui-resizable时，可调整大小的句柄将显示在右下角，我需要左下角的可调整大小的句柄。

---编辑---

还有一件事，它不应该使用右边框重新调整大小，而应该使用左边框重新调整大小。

Answer 1

您应该使用handles

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

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

'e, s, se'

代码示例

使用指定的句柄选项初始化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' );

Answer 2

艾哈迈德的答案： jQueryUI不包含sw-handle的图标，也不为sw-handle应用图标类。您可以使用一些CSS添加图标：

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

Answer 3

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

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

和autoHide等于true意味着当鼠标指针从dom对象上移开时，抓握图标将自动隐藏。

Answer 4

我一直在寻找这个SW解决方案。我需要做的就是在调用resizable（）之后将ui-icon类添加到创建的div中。

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

然后在图像中定义图标/ 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

Answer 5

似乎标准游标属性是UI CSS使用的内容

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

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

我添加了所有手柄后发现了这个但是它们都没有出现过！ 更新：显然我的应用程序中存在导致我的问题的一些问题。在JSFiddle上测试所有句柄都可以使用相同版本的JQuery ..... argggggg

按预期工作