javascript - 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'

代码示例

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

$( ".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

除了艾哈迈德的回答：jQueryUI 不包含 sw 句柄的图标，也没有为 sw 句柄应用图标类。您可以使用一些 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');

然后在 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

Answer 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