📌  相关文章
📜  jQWidgets jqxTabs autoHeight 属性(1)

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

jQWidgets jqxTabs AutoHeight 属性

简介

jQWidgets jqxTabs 是一款实现标签页（Tab）功能的 jQuery 插件，可以通过简单的代码实现页面间的切换。而 AutoHeight 属性则是其中的一项功能，可以根据内容的高度自动调整标签页的高度，避免了因内容高度不同而造成的页面布局错位。

使用方法

在使用 AutoHeight 属性前需要先引入 jQWidgets 库和合适的样式文件。然后可以使用下面的代码将两个标签页（Tab）加入到一个容器中，并启用 AutoHeight 属性：

$(document).ready(function () {
    $('#jqxTabs').jqxTabs({
        height: 'auto',
        autoHeight: true,
        scrollable: true,
        theme: 'energyblue'
    });
    $('#firstTab').html('内容较多，高度较高');
    $('#secondTab').html('内容较少，高度较低');
});

在上述代码中，height 属性设置为 auto，表示标签页的高度由插件自动计算。同时启用了 AutoHeight 属性，将会自动根据内容高度调整标签页的高度。scrollable 属性设为 true，表示标签页溢出时可通过滚动查看所有内容。theme 属性则用于设置样式主题。

实例演示

以下是一个 jQWidgets jqxTabs 使用 AutoHeight 属性的实例，通过不同的内容展示标签页高度自动调整的效果。

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxTabs AutoHeight 属性</title>
    <script type="text/javascript" src="../jqwidgets-ver/tree/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets-ver/jqxtabs.js"></script>
    <link rel="stylesheet" href="../jqwidgets-ver/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets-ver/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
</head>
<body>
    <div id="jqxTabs">
        <ul>
            <li>标签页一</li>
            <li>标签页二</li>
        </ul>
        <div id="firstTab"></div>
        <div id="secondTab"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxTabs').jqxTabs({
                height: 'auto',
                autoHeight: true,
                scrollable: true,
                theme: 'energyblue'
            });
            $('#firstTab').html('<p>第一个标签页内容较多，高度较高</p>'.repeat(15));
            $('#secondTab').html('<p>第二个标签页内容较少，高度较低</p>');
        });
    </script>
</body>
</html>
总结

jQWidgets jqxTabs 提供了丰富的功能，通过使用 AutoHeight 属性可以自动调整标签页的高度，不但方便了程序员的开发工作，也使得页面呈现更加美观。需要注意的是，在使用 AutoHeight 属性时，需查看标签页中内容的高度占比，以避免出现过高过低的情况。