Javascript jquery ui 可调整大小的左下手柄以调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6871558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery ui resizable left-bottom handle to resize
提问by Imran Naqvi
I am using jquery-ui-resizable plugin in my project.
我在我的项目中使用 jquery-ui-resizable 插件。
By default when you make a DOM Object jquery-ui-resizable the resizable handle will appear on right-bottom corner, I need the re-sizable handle on left-bottom corner.
默认情况下，当您创建 DOM 对象 jquery-ui-resizable 时，可调整大小的句柄将出现在右下角，我需要左下角的可调整大小的句柄。
--- EDIT ---
- - 编辑 - -
One more thing, it should not be re-sizable using right border but should be re-sizable using left border.
还有一件事，它不应该使用右边框重新调整大小，而应该使用左边框重新调整大小。
回答by Talha Ahmed Khan
You should use the handles
你应该使用 handles
supported: { n, e, s, w, ne, se, sw, nw }.
This will create the Handles on the side you specified. Default values are
这将在您指定的一侧创建手柄。默认值为
'e, s, se'
Code examples
代码示例
Initialize a resizable with the handles option specified.
使用指定的 handles 选项初始化可调整大小。
$( ".selector" ).resizable({ handles: 'n, e, s, w' });
Get or set the handles option, after init.
在 init 之后获取或设置 handles 选项。
//getter
var handles = $( ".selector" ).resizable( "option", "handles" );
//setter
$( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );
回答by Dr.Molle
Additional to Ahmed's answer: jQueryUI doesn't include a icon for the sw-handle and also doesn't apply a icon-class for the sw-handle. You may use some CSS to add an icon:
艾哈迈德回答的补充：jQueryUI 不包含 sw 句柄的图标，也不为 sw 句柄应用图标类。您可以使用一些 CSS 来添加图标：
#resizable .ui-resizable-sw{background:url(path/to/custom_icon.gif) no-repeat;}
回答by Ali Nouman
To do re-sizing from all sides following code can also be used
要从各个方面重新调整大小，也可以使用以下代码
var resizeOpts = {
handles: "all" ,autoHide:true
};
$( ".selector" ).resizable(resizeOpts);
and autoHide equal true means that grip icon will automatically hide when mouse pointer is taken away from dom object.
和 autoHide 等于 true 意味着当鼠标指针离开 dom 对象时，手柄图标将自动隐藏。
回答by adamreith
I was looking for this SW solution. What i had to do to make it work is add the ui-icon classes to the created div just after the call to resizable().
我正在寻找这个软件解决方案。我必须做的就是在调用 resizable() 之后将 ui-icon 类添加到创建的 div 中。
$( "#wproof" ).resizable({handles: "w, sw, s"});
$('.ui-resizable-sw').addClass('ui-icon ui-icon-gripsmall-diagonal-sw');
Then define the icon by taking it in images/ui-icons_222222_256x240.png It is a small 9X9 area at the bottom. Make a .png file of it ( with a rotation ! ) and add the style to the given class :
然后在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>
The bottom and left are set at -5px in jquery-ui css
jquery-ui css中底部和左侧设置为-5px
回答by alQemist
Seems like the standard cursor property is what is used by the UI CSS
似乎标准光标属性是 UI CSS 使用的
.ui-resizable-sw {
cursor: sw-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
Also it seems that cursor does not display and resizable is not enabled for the side of the element that is used for positioning - for example: a div positioned using left:20px top:20px will not enable resizing on those left and top sides
此外，用于定位的元素一侧似乎没有显示光标并且未启用可调整大小 - 例如：使用 left:20px top:20px 定位的 div 将无法在这些左侧和顶部调整大小
I discovered this after adding all handles but then they all never showed up ! Update: Apparently there is some problem within my app that is causing my problem. Testing on JSFiddle all handles do work as expected using the same version of JQuery.....argggggg
我在添加所有句柄后发现了这一点，但后来它们都没有出现！更新：显然我的应用程序中有一些问题导致了我的问题。使用相同版本的 JQuery 对 JSFiddle 进行测试，所有句柄都按预期工作.....arggggggg
