將可調整大小的jQuery UI鎖定為僅垂直調整大小？

Question

我基本上是希望將此可調整大小的元素鎖定為僅垂直調整大小。 我知道您可以使用minWidth / maxWidth等等，但這會將min和max設置為特定數字值，並且如果我調整瀏覽器窗口的大小，這些數字將不再准確。 關於如何鎖定調整大小的想法？

這是一個代碼片段：

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#resizable" ).resizable(); } ); </script> <body> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Resizable</h3> </div> </body>

Answer 1

您可以使用手柄：

 $( "#resizable" ).resizable({ handles: 'n, s' });

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

 <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Resizable</h3> </div>

Answer 2

JQueryUI Resizable有2個選項可用於執行此操作：

$( "#resizable" ).resizable({
   minWidth:150,
   maxWidth:150
});

將可調整大小的jQuery UI鎖定為僅垂直調整大小？

問題描述

2 個解決方案

解決方案1
2 已采納 2017-09-11 14:42:09

解決方案2
0 2017-09-11 14:41:45

將可調整大小的jQuery UI鎖定為僅垂直調整大小？

問題描述

2 個解決方案

解決方案1 2 已采納 2017-09-11 14:42:09

解決方案2 0 2017-09-11 14:41:45

解決方案1
2 已采納 2017-09-11 14:42:09

解決方案2
0 2017-09-11 14:41:45