gpt4 book ai didi

javascript - 将可调整大小的 jQuery UI 锁定为仅垂直调整大小?

转载 作者:行者123 更新时间:2023-11-30 15:03:27 24 4
gpt4 key购买 nike

我基本上希望将这个可调整大小的元素锁定为仅垂直调整大小。我知道您可以使用 minWidth/maxWidth 等等,但这会将最小值和最大值设置为特定数值,如果我调整浏览器窗口的大小,这些数字将不再准确。关于如何锁定调整大小的想法?

这是一个代码片段:

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

最佳答案

您可以使用 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>

关于javascript - 将可调整大小的 jQuery UI 锁定为仅垂直调整大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46158283/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com