jQuery UI可调整大小 – 操作方向

前端之家收集整理的这篇文章主要介绍了jQuery UI可调整大小 – 操作方向前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何确定调整大小操作的方向?我尝试了谷歌搜索,并在 jquery ui上找到一张机票,说它是固定的.但是没有关于如何使用它的文档.

解决方法

不确定您是否希望限制特定轴的调整大小操作,或者想知道实际调整大小的方向.

如果你想要前任,Rayell的答案可以工作.我会讨论后者.

如果你设置了这样的可调整大小:

  1. var r = $("#resizable");
  2. r.resizable();

假设您想知道在用户释放鼠标按钮之后,调整大小发生的方向.我们将一个函数绑定到resize stop事件:

  1. r.bind('resizestop',function(event,ui) {
  2. // determine resize deltas
  3. var delta_x = ui.size.width - ui.originalSize.width;
  4. var delta_y = ui.size.height - ui.originalSize.height;
  5. }

使用传递的ui对象,我们可以通过从旧大小减去新的大小来确定大小的相对变化.之后,您可以使用delta_x和delta_y,但是您希望.我们来构建一个与其中一个句柄对应的字符串.

  1. r.bind('resizestop',ui) {
  2.  
  3. // determine resize deltas
  4. var delta_x = ui.size.width - ui.originalSize.width;
  5. var delta_y = ui.size.height - ui.originalSize.height;
  6.  
  7. // build direction string
  8. var dir = '';
  9.  
  10. if (delta_y > 0) {
  11. dir += 's';
  12. } else if (delta_y < 0) {
  13. dir += 'n';
  14. }
  15.  
  16. if (delta_x > 0) {
  17. dir += 'e';
  18. } else if (delta_x < 0) {
  19. dir += 'w';
  20. }
  21.  
  22. // do something with this string
  23. alert(dir);
  24. });

请注意,如果您在元素的两边都有句柄,那么它不一定会返回哪个句柄实际用于执行调整大小,只是它的净方向.

猜你在找的jQuery相关文章