Question

我对Javascript很陌生，而且我知道自己的方式有点困难。

我正在尝试制作一个jQuery插件，用于使用jQuery UI可调整大小的插件处理调整大小元素。

当用户开始调整div的大小时，我想执行一些逻辑来确定最小值＆amp;最大尺寸我希望他们能够重新调整大小，但在文档示例中，这总是提前声明。

以下是我尝试启动此功能然后我有点迷失了。这是我在Javascript中做的第一件事，除了简单的文本或颜色更改之外。

$.fn.myresize = function() {
  // add draggable handle only on right
  this.resizable({

    handles: 'e'
  });

  var calculateSizes = function(event, ui) {
    // in reality I am reading several different values to work these value out but for simplicity sake here is just arbitary numbers
    var minWidth = 100;
    var maxWidth = 100 * 3;

    // how do I now set the min & max values for jQuery UI resizable?
  }
  
  // call my function for calculating the min & max width
  this.on("resizestart", calculateSize);

};

$(function() {
  $("#resizable").myresize();
});

 #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>



<h2>Resizable</h2>

<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>

（针对移动用户的Jsfiddle镜像：https://jsfiddle.net/9909zfz0/）

我想我可以提前计算出页面每个元素的大小，但是当我只想对相邻的兄弟姐妹感兴趣时，这似乎是一个很大的开销。

非常感谢这里的一些一般性建议。

Answer 1

我设法找到了一个设置选项的片段并将其弄清楚了。在这里。

$.fn.myresize = function() {
  // add draggable handle only on right
  this.resizable({

    handles: 'e'
  });

  var calculateSizes = function(event, ui) {
    // in reality I am reading several different values to work these value out but for simplicity sake here is just arbitary numbers

    // here it is
    ui.element.resizable("option", "minWidth", 100);
    ui.element.resizable("option", "maxWidth", 100 * 3);

  }
  
  // call my function for calculating the min & max width
  this.on("resizestart", calculateSizes);

};

$(function() {
  $("#resizable").myresize();
});

 #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>



<h2>Resizable</h2>

<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>

计算jQuery UI可调整大小和最小值“resizestart”事件中的最大宽度

1 个答案: