Question

我在三个元素上使用jQuery-UI可调整大小，如下所示：

$("#element1, #element2, #element3").resizable();

一切都很好......但是我需要设置最大/最小高度，宽度。我无法在documentation或example中看到方式为这些元素赋予不同的元素（如所选的每个元素的唯一值）：

  maxHeight:
  maxWidth: 
  minHeight: 
  minWidth:

这意味着我必须为每个元素调用.resizable（）一次....这感觉不是最佳的。像这样：

$("#element1").resizable({
    maxHeight:
    maxWidth: 
    minHeight: 
    minWidth: 
});

$("#element2").resizable({
    maxHeight:
    maxWidth: 
    minHeight: 
    minWidth: 
});

$("#element3").resizable({
    maxHeight:
    maxWidth: 
    minHeight: 
    minWidth: 
});

我喜欢的是这样的事情（PSEUDO CODE即将发布）：

$("#element1, #element2, #element3").resizable({
    [maxHeight: 111 //#element1   
    maxWidth: 111 
    minHeight: 111 
    minWidth: 111],

    [maxHeight: 222 //#element2
    maxWidth: 222 
    minHeight: 222 
    minWidth: 222],

    [maxHeight: 333 //#element3
    maxWidth: 333
    minHeight: 333
    minWidth: 333],

});

这有点可行吗？

Answer 1

我相信您可以在可调整大小的start事件中以这种方式实现此目标。

为所有可调整大小的元素提供一个通用类。

您可以使用switch语句，但仍然要编写很多内容。

$('.widget').resizable({
  start: function(event,ui) {
    var hasId = ui.element.attr('id');

    switch(hasId ){
      case '#element1':
        ui.element.resizable('option','maxHeight', 111);
        ui.element.resizable('option','maxWidth', 111);
        break;
      case '#element2':
        ui.element.resizable('option','maxHeight', 222);
        ui.element.resizable('option','maxWidth', 222);
        break;
      case '#element3':
        ui.element.resizable('option','maxHeight', 333);
        ui.element.resizable('option','maxWidth', 333);
        break;
    }
  }
});

或者，您可以使用数据属性来设置maxHeight和maxWidth，如下所示：

$(function() {

  $('.widget').resizable({
    start: function(event,ui) {
      var minH = $(this).attr('data-minH');
      var maxH = $(this).attr('data-maxH');
      var minW = $(this).attr('data-minW');
      var maxW = $(this).attr('data-maxW');
      
      $(this).resizable('option', 'minHeight', minH);
      $(this).resizable('option', 'maxHeight', maxH);
      $(this).resizable('option', 'minWidth', minW);
      $(this).resizable('option', 'maxWidth', maxW);
    }
  });

});

.widget {
  width: 100px;
  height: 100px;
  background: #333;
  border: 1px solid #555;
  position: relative;
  display: inline-block;
}

.ui-resizable-se {
  width: 20px;
  height: 20px;
  background: #555;
  position: absolute;
  bottom: 0;
  right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="element1" class="widget" data-minH="100" data-maxH="100" data-minW="100" data-maxW="100"></div>
<div id="element2" class="widget" data-minH="100" data-maxH="200" data-minW="100" data-maxW="200"></div>
<div id="element3" class="widget" data-minH="100" data-maxH="300" data-minW="100" data-maxW="300"></div>

使用jqueryUI可调整大小

1 个答案: