将可调整大小的jQuery UI锁定为仅垂直调整大小？
[英]Lock Resizable jQuery UI to vertical resize only?
问题描述
I'm basically looking to lock this resizable element to a vertical resize only. 
我基本上是希望将此可调整大小的元素锁定为仅垂直调整大小。 I know that you can use minWidth/maxWidth and all that, but this sets the min and max to a specific number value, and if I resize the browser window these numbers are no longer accurate. 我知道您可以使用minWidth / maxWidth等等，但这会将min和max设置为特定数字值，并且如果我调整浏览器窗口的大小，这些数字将不再准确。 Thoughts on how I could lock the resize? 关于如何锁定调整大小的想法？
Here is a code snippet: 这是一个代码片段：
<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>
2 个解决方案
解决方案1
2 已采纳 2017-09-11 14:42:09
You may use handles : 您可以使用手柄 ：
$( "#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>
解决方案2
0 2017-09-11 14:41:45
JQueryUI Resizable has 2 options that can be used to do this: JQueryUI Resizable有2个选项可用于执行此操作：
$( "#resizable" ).resizable({
minWidth:150,
maxWidth:150
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.