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

我在我的项目中使用了jquery-ui-resizable插件。jquery ui可调整大小的左手柄调整大小

默认情况下，当你使一个DOM对象jquery-ui-resizable时，可调整大小的句柄将出现在右下角，我需要左下角的可重新调整的句柄。

---编辑---

一两件事，它不应该被使用右边框重新可观的，但应该使用左边框重新可观。

enter image description here

2011-07-29 Imran Naqvi

您应该使用handles

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

这将创建您指定的侧手柄。默认值是

'e, s, se'

代码示例

初始化与指定的手柄选项调整大小。

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

在init之后获取或设置句柄选项。

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

来源

2011-07-29 10:16:56

+1，谢谢@Ahmed为您的答复，我认为它会工作。请让我试试。 –

附加艾哈迈德的回答是： jQueryUI的不包括为SW-手柄一个图标，也为SW-句柄不应用图标类。您可以使用一些CSS来添加一个图标：

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

来源

2011-07-29 10:33:59

+1，谢谢@ Dr.Molle，我已经明白了。 –

做大小调整从四面八方下面的代码还可以用于

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

和自动隐藏等于真正意味着握图标会自动隐藏，当鼠标指针从dom对象中移除。

来源

2011-10-15 16:56:43

我一直在寻找这个软件解决方案。我需要做的就是在调用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

来源

2012-07-11 17:50:26 adamreith

好像标准光标属性是什么使用的UI CSS

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

而且似乎光标不显示和可调整大小没有为一个用于定位的元件的侧启用 - 例如：使用左定位一个div：20像素顶：20像素不会使尺寸调整这些左侧和顶侧

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

来源

2013-07-13 23:36:51 alQemist

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

回答

相关问题