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

Question

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

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

---编辑---

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

Answer 1

你应该使用 handles

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

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

'e, s, se'

代码示例

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

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

初始化后获取或设置句柄选项.

//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

也可以使用以下代码来重新调整大小

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

和autoHide等于true意味着当鼠标指针从dom对象中取出时,夹点图标将自动隐藏.