我如何确定调整大小操作的方向?我尝试通过谷歌搜索,在jquery ui上找到了一个说已经解决的票据。但是没有关于如何使用它的文档。
我该怎么判断调整大小的方向?我尝试在谷歌上搜索,发现了一个jQuery UI的问题解决记录,但是并没有说明如何使用。我如何确定调整大小操作的方向?我尝试通过谷歌搜索,在jquery ui上找到了一个说已经解决的票据。但是没有关于如何使用它的文档。
我该怎么判断调整大小的方向?我尝试在谷歌上搜索,发现了一个jQuery UI的问题解决记录,但是并没有说明如何使用。不确定您是否希望限制调整大小操作到特定轴,还是想了解调整大小实际发生的方向。
RaYell的答案适用于前者。我将讨论后者。
如果您像这样设置可调整大小:
var r = $("#resizable");
r.resizable();
假设您想知道用户松开鼠标按钮后调整大小发生的方向。 让我们将一个函数绑定到resize stop事件:
r.bind('resizestop', function(event, ui) {
// determine resize deltas
var delta_x = ui.size.width - ui.originalSize.width;
var delta_y = ui.size.height - ui.originalSize.height;
}
delta_x
和delta_y
。让我们构建一个与一个手柄对应的字符串。r.bind('resizestop', function(event, ui) {
// determine resize deltas
var delta_x = ui.size.width - ui.originalSize.width;
var delta_y = ui.size.height - ui.originalSize.height;
// build direction string
var dir = '';
if (delta_y > 0) {
dir += 's';
} else if (delta_y < 0) {
dir += 'n';
}
if (delta_x > 0) {
dir += 'e';
} else if (delta_x < 0) {
dir += 'w';
}
// do something with this string
alert(dir);
});
$(this).data('resizable').axis
我知道这是一个很久以前的问题,但是给出的解决方案不能解决我的问题。我发现了一种方法,在start函数中可以访问处理程序并且在FF和Chrome中可以正常工作。我的组织不支持IE,因此未经测试,但在这种情况下,FF的方法应该可以正常工作,因为它是更标准的事件处理方式。
$(".resizable").resizable({
start: function (event, ui) {
var dir = event.toElement ? event.toElement : event.originalEvent.target;
}
});
dir
是实际的处理程序,您需要从中找到类和方向(从类列表中解析,如果我到达那里,我会发布我所做的内容)。
在调整大小之前知道调整大小的方向对于许多原因都非常有用,我真的认为 jQuery 应该包含一种知道哪个手柄被抓取的方法。
稍后编辑: jQuery UI 为其 API 提供了 getter,在这种情况下,要获取手柄列表,只需执行以下操作:
var handles = $( ".selector" ).resizable( "option", "handles" );
dir
并切掉返回的类名的最后一个字母以外的所有内容,因为类似于ui-handle-s
这样的类名。handles
是你需要的:
我认为选项handles
是你需要的:
$(selector).resizable({handles: 'n, s, e, w'})
方向字母如下:
可以使用以上任意子集。
您可以在此处找到该选项的文档(链接)
$(".ui-resizable-handle").live("mousedown", function(e) {
$.ui.curResizeDirection = this.className.split("-").pop();
console.log($.ui.curResizeDirection);
});
$( "#resizable" ).resizable({
handles: "n, e, s, w",
resize: function( event, ui ) {
//your codes here
}
});
在这里查看:
http://www.landcoder.com/4-dynamic-interactive-code-snippets-jquery-705#resizable
jsonx 已经有了一个很好的解决方案,但你也可以利用内置事件:
$('#resizable').resizable({
handles: 'n,s',
start: function( event, ui ) {
var handleDirection = event.srcElement.className.split("-").pop();
}
});