博客

jQWidgets jqxTabs scrollable属性

  • Post category:jquery

当Tab页签中的内容过多，一般情况下会出现滚动条使得内容可视化。而jQWidgets中的jqxTabs控件也提供了scrollable属性来实现这一需求。本文将详细介绍jqxTabs的scrollable属性使用方法。

1. scrollable属性简述

scrollable属性为布尔类型，用于控制可滚动的选项卡面板。当该属性值为true时，选项卡面板将自动加入横向滚动条来处理多余的选项卡，否则所有选项卡将平铺在一行中。

2. scrollable属性实例说明

示例1：scrollable属性为true

在该示例中，我们将展示如何使用scrollable属性创建可滚动的选项卡面板。下面是示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>scrollable Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/modules/jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/modules/jqxtabs.js"></script>
</head>
<body>
    <div id="jqxTabs">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 4</li>
            <li>Tab 5</li>
            <li>Tab 6</li>
            <li>Tab 7</li>
            <li>Tab 8</li>
            <li>Tab 9</li>
            <li>Tab 10</li>
            <li>Tab 11</li>
            <li>Tab 12</li>
            <li>Tab 13</li>
            <li>Tab 14</li>
            <li>Tab 15</li>
            <li>Tab 16</li>
            <li>Tab 17</li>
            <li>Tab 18</li>
            <li>Tab 19</li>
            <li>Tab 20</li>
        </ul>
        <div>
            <p>This is tab 1</p>
        </div>
        <div>
            <p>This is tab 2</p>
        </div>
        <!-- ... 将剩余div省略 ... -->
    </div>

    <script>
        $(document).ready(function () {
            $('#jqxTabs').jqxTabs({
                width: 500,
                height: 300,
                scrollable: true
            });
        });
    </script>
</body>
</html>

上述代码会生成一个带有20个选项卡的控件，因为scrollable属性为true，所以控件会自动加入横向滚动条，使得多余的选项卡可以被滚动查看。

示例2：scrollable属性为false

在该示例中，我们将展示如何使用scrollable属性来禁用选项卡面板的滚动，直接平铺所有选项卡。下面是示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>scrollable Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/modules/jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/modules/jqxtabs.js"></script>
</head>
<body>
    <div id="jqxTabs">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 4</li>
            <li>Tab 5</li>
            <li>Tab 6</li>
            <li>Tab 7</li>
            <li>Tab 8</li>
            <li>Tab 9</li>
            <li>Tab 10</li>
            <li>Tab 11</li>
            <li>Tab 12</li>
            <li>Tab 13</li>
            <li>Tab 14</li>
            <li>Tab 15</li>
            <li>Tab 16</li>
            <li>Tab 17</li>
            <li>Tab 18</li>
            <li>Tab 19</li>
            <li>Tab 20</li>
        </ul>
        <div>
            <p>This is tab 1</p>
        </div>
        <div>
            <p>This is tab 2</p>
        </div>
        <!-- ... 将剩余div省略 ... -->
    </div>

    <script>
        $(document).ready(function () {
            $('#jqxTabs').jqxTabs({
                width: 500,
                height: 300,
                scrollable: false
            });
        });
    </script>
</body>
</html>

上述代码会生成与前一个示例相同的控件，但是由于scrollable属性为false，所以选项卡不再可滚动，而是直接平铺在一行中显示。这适用于选项卡的数量不多的情况下，可以更加直观清晰地展示所有选项卡。

Tags: