[英]Lock Resizable jQuery UI to vertical resize only?
我基本上是希望将此可调整大小的元素锁定为仅垂直调整大小。 我知道您可以使用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>
您可以使用手柄 :
$( "#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>
JQueryUI Resizable有2个选项可用于执行此操作:
$( "#resizable" ).resizable({
minWidth:150,
maxWidth:150
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.