📌  相关文章
📜  jQWidgets jqxComboBox autoItemsHeight 属性(1)

📅  最后修改于: 2023-12-03 15:32:16.030000             🧑  作者: Mango

jQWidgets jqxComboBox autoItemsHeight 属性

jQWidgets jqxComboBox 是一个支持自动完成（autocomplete）、过滤和下拉框的 jQuery 插件。autoItemsHeight 属性可设置下拉框中每个选项的高度自动适应选项内容。

语法
$("#jqxComboBox").jqxComboBox({
    autoItemsHeight: true|false
});
属性值
  • true（默认值）：选项高度自动适应选项内容。
  • false：选项高度将按照预设的高度进行渲染。
示例
<!DOCTYPE html>
<html>
<head>
    <title>jqxComboBox autoItemsHeight 属性示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/styles/jqx.base.css">
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxbuttons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxscrollbar.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxlistbox.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxdropdownlist.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxcombobox.js"></script>
    <script>
        $(document).ready(function () {
            $("#jqxComboBox").jqxComboBox({
                source: ["Java", "JavaScript", "Python", "PHP", "C#", "Ruby", "Swift", "Objective-C"],
                width: 200,
                height: 25,
                autoItemsHeight: true
            });
        });
    </script>
</head>
<body>
    <div id="jqxComboBox"></div>
</body>
</html>

运行以上代码可以得到一个下拉框，其中选项高度自动适应选项内容。如下图所示：

jqxComboBox autoItemsHeight 示例图

常见问题
autoItemsHeight 是否可以动态修改？

可以。只需使用以下代码即可：

$("#jqxComboBox").jqxComboBox("autoItemsHeight", true|false);
设置 autoItemsHeight 后，下拉框高度是否也会自适应调整？

不会。autoItemsHeight 仅影响选项高度，下拉框高度仍需手动设置。