gpt4 book ai didi

javascript - 使 jQueryUI 自动完成高度取决于父级

转载 作者:行者123 更新时间:2023-11-28 19:21:05 24 4
gpt4 key购买 nike

我在 jQueryUI 对话框中有一个 jQueryUI 自动完成功能。对话框具有给定的高度(即 200px),因此自动补全的高度必须小于对话框,以便显示滚动条。我通过将 100px 高度硬编码到自动完成来实现它。我怎样才能使高度取决于 parent 的高度,而不是硬编码这个高度?

http://jsbin.com/xunazowiqa/1/

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];

$("#open").click(function() {$("#dialog").dialog("open");});
$('#dialog').dialog({
autoOpen : false,
resizable : false,
height : 200,
width : 400,
modal : true,
open : function() {
console.log(this,$(this));
$(this).find('input').val('')
.autocomplete({source: availableTags})
.parent().next('ul.ui-autocomplete')
.attr('style', 'max-height: 100px; overflow-y: auto; overflow-x: hidden;')
}
});
});
</script>
</head>

<body>
<button id="open">Open</button>
<div id="dialog" title="DIALOG TITLE"><input></div>
</body>
</html>

最佳答案

你可以这样尝试

console.log(this,$(this));
var height = $(this).height();
console.log(height);
$(this).find('input').val('')
.autocomplete({source: availableTags})
.parent().next('ul.ui-autocomplete')
.attr('style', 'max-height: 100px; overflow-y: auto; overflow-x: hidden;')

您可以将此代码放在 open 函数中在这段代码中你可以获取对话框的高度,之后你可以自己管理。

关于javascript - 使 jQueryUI 自动完成高度取决于父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28902100/

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