在“ resizestart”事件中計算jQuery UI可調整大小的最小和最大寬度

Question

我對Javascript真的很陌生，並且在了解自己的出路方面有些困難。

我正在嘗試制作一個jQuery插件來使用jQuery UI可調整大小的插件來處理調整大小的元素。

當用戶開始調整div的大小時，我想執行一些邏輯以確定我希望他們能夠將其調整為最小和最大大小，但是在文檔示例中，總是提前聲明。

下面是我嘗試將其開始的嘗試，然后我有點迷路了。 這是Java語言中我要做的第一件事，不僅僅是更改文本或顏色。

 $.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>