如何使用 jQuery UI 可调整大小仅水平或垂直调整大小？

发布于 2024-09-17 10:16:37 字数 188 浏览 5 评论 0原文

我找到的唯一解决方案是使用当前值设置最大和最小高度或宽度。

示例：

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});

但这确实很难看，特别是如果我必须以编程方式更改元素的高度。

原文

The only solution I've found is to set the max and min height or width with the current value.

Example:

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});

But this is really ugly, especially if I have to change the element's height programmatically.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暖心男生 2024-09-24 10:16:37

您可以将调整大小handles选项设置为仅显示在左侧和右侧（或东/西），如下所示：

foo.resizable({
    handles: 'e, w'
});

您可以在这里尝试一下。

You could set the resize handles option to only show on the left and right (or east/west), like this:

foo.resizable({
    handles: 'e, w'
});

You can give it a try here.

回复收藏 0 原文

揽清风入怀 2024-09-24 10:16:37

虽然海报主要要求仅水平调整大小，但该问题也要求垂直调整。

垂直情况有一个特殊问题：您可能设置了一个相对宽度（例如 50%），即使在调整浏览器窗口大小时也希望保留该宽度。然而，一旦您第一次调整元素大小，jQuery UI 就会设置一个以 px 为单位的绝对宽度，并且相对宽度会丢失。

如果发现以下代码适用于此用例：

$("#resizable").resizable({
    handles: 's',
    stop: function(event, ui) {
        $(this).css("width", '');
   }
});

另请参阅 http://jsfiddle.net/cburgmer/wExtX / 和 jQuery UI 可调整大小：自动高度单独使用东手柄时

While the poster was mainly asking for a horizontal-only resize, the question does ask for vertical, too.

The vertical case has a special issue: You might have set a relative width (e.g. 50%) that you want to keep even when the browser window is resized. However jQuery UI sets an absolute width in px once you first resize the element and the relative width is lost.

If found the following code to work for this use case:

$("#resizable").resizable({
    handles: 's',
    stop: function(event, ui) {
        $(this).css("width", '');
   }
});

回复收藏 0 原文

日久见人心 2024-09-24 10:16:37

一个非常简单的解决方案：

$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical

这也适用于draggable()。
示例： http://jsfiddle.net/xCepm/

A very simple solution:

$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical

This works for draggable() as well.
Example: http://jsfiddle.net/xCepm/

回复收藏 0 原文

往昔成烟 2024-09-24 10:16:37

解决方案是配置您的可调整大小，以便取消您不需要的尺寸的更改。

这是仅垂直调整大小的示例：

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});

The solution is to configure your resizable so it cancels changes of the dimension you don't want.

here is an example of vertically only resizable:

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});

回复收藏 0 原文

空心空情空意 2024-09-24 10:16:37

我想允许在浏览器调整大小时调整宽度，但在用户更改元素大小时不允许调整宽度，这工作得很好：

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});

I wanted to allow re-size the width when browser re-sizes, but not when user changes the size of element, this worked fine:

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});

回复收藏 0 原文

送你一个梦 2024-09-24 10:16:37

对于我来说，同时具有句柄和调整大小处理程序的解决方案工作得很好，因此用户可以看到句柄，但只能水平调整大小，类似的解决方案应该适用于垂直方向。如果没有右下处理程序，用户可能不知道他可以调整元素的大小。

当使用ui.size.height = ui.originalSize.height;时，如果元素从初始状态更改了其大小，它将无法正常工作。

foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        $(this).css("height", '');
    }
});

为了获得更好的性能，可以删除 $(this)：

var foo = jQuery('#foo');
foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        foo.css("height", '');
    }
});

For me solutions with both handles and resize handler worked fine, so user see handle but can resize only horizontally, similar solution should work for vertical. Without bottom right handler user might be unaware that he can resize element.

When using ui.size.height = ui.originalSize.height; it will not work properly if element changed it's size from initial state.

foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        $(this).css("height", '');
    }
});

For better performance $(this) could be removed:

var foo = jQuery('#foo');
foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        foo.css("height", '');
    }
});

回复收藏 0 原文

一梦浮鱼 2024-09-24 10:16:37

成功地在垂直和水平方向上工作 div 位置

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <style>
    .resizable {
      height: 100px;
      width: 500px;
      background: #09C;
    }
    
    .resizable-x {
      margin-top: 5px;
      height: 100px;
      width: 500px;
      background: #F60;
    }
  </style>

  <script>
    $(function() {
      $(".resizable").resizable({
        grid: [10000, 1]
      });
      $(".resizable-x ").resizable({
        grid: [1, 10000]
      });
      $(".resizable").draggable();
    });
  </script>
</head>

<body>
  <div class="resizable"></div>
  <div class="resizable-x"></div>
</body>

Successfully working div position Vertically and horizontally

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <style>
    .resizable {
      height: 100px;
      width: 500px;
      background: #09C;
    }
    
    .resizable-x {
      margin-top: 5px;
      height: 100px;
      width: 500px;
      background: #F60;
    }
  </style>

  <script>
    $(function() {
      $(".resizable").resizable({
        grid: [10000, 1]
      });
      $(".resizable-x ").resizable({
        grid: [1, 10000]
      });
      $(".resizable").draggable();
    });
  </script>
</head>

<body>
  <div class="resizable"></div>
  <div class="resizable-x"></div>
</body>

回复收藏 0 原文

~没有更多了~