jquery ui可resize的左下手柄来resize

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

默认情况下，当您创建一个DOM对象jquery-ui可resize时，可resize的句柄将出现在右下角，我需要左下角的可resize的句柄。

—编辑—

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

Answer 1

你应该使用handles

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

这将在您指定的一侧创建Handles。 默认值是

 '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

除了Ahmed的回答：jQueryUI不包含sw-handle的图标，也不为sw-handle应用图标类。 您可以使用一些CSS添加图标：

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

Answer 3

也可以使用以下代码来重新resize

  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文件（旋转！）并将样式添加到给定的类：

在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将无法在左侧和顶侧resize

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