博客

jQWidgets jqxTabs selectedItem属性

  • Post category:jquery

jQWidgets jqxTabs selectedItem 属性

什么是 jQWidgets jqxTabs？

jQWidgets jqxTabs 是一个 jQuery UI 插件，可用于创建具有选项卡切换的标签页。它需要 jQuery 和 jQWidgets 库。

selectedItem 属性是什么？

selectedItem 属性是指当前活动选项卡的索引。它是 jqxTabs 插件的一个属性，并可以通过 getSelectedIndex() 或 setSelectedIndex() 方法来获取或设置。

使用 selectedItem 属性

可以通过以下步骤获取或设置 selectedItem 属性：

  1. 在 HTML 页面中创建 jqxTabs 组件。
<div id="jqxTabs">
    <ul>
        <li>选项卡1</li>
        <li>选项卡2</li>
        <li>选项卡3</li>
    </ul>
    <div>选项卡1的内容</div>
    <div>选项卡2的内容</div>
    <div>选项卡3的内容</div>
</div>
  1. 使用 jQuery 选择器选择 jqxTabs 对象，并将其转换为 jqxTabs 组件。
$(document).ready(function() {
    $("#jqxTabs").jqxTabs();
});
  1. 获取或设置 selectedItem 属性。
// 获取 selectedItem
var selectedItemIndex = $("#jqxTabs").jqxTabs("getSelectedIndex");

// 设置 selectedItem
$("#jqxTabs").jqxTabs("select", 1);

示例

示例1

本示例演示如何初始化 jqxTabs 组件并加载特定选项卡。

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxTabs 示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/styles/jqx.base.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxtabs.js"></script>
</head>
<body>
    <div id="jqxTabs">
        <ul>
            <li>选项卡1</li>
            <li>选项卡2</li>
            <li>选项卡3</li>
        </ul>
        <div>选项卡1的内容</div>
        <div>选项卡2的内容</div>
        <div>选项卡3的内容</div>
    </div>
    <script>
        $(document).ready(function() {
            // jqxTabs 初始化
            $("#jqxTabs").jqxTabs();

            // 加载第二个选项卡
            $("#jqxTabs").jqxTabs("select", 1);
        });
    </script>
</body>
</html>

示例2

本示例演示如何根据选项卡切换进行动作。

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxTabs 示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/styles/jqx.base.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxtabs.js"></script>
</head>
<body>
    <div id="jqxTabs">
        <ul>
            <li>选项卡1</li>
            <li>选项卡2</li>
            <li>选项卡3</li>
        </ul>
        <div>选项卡1的内容</div>
        <div>选项卡2的内容</div>
        <div>选项卡3的内容</div>
    </div>
    <script>
        $(document).ready(function() {
            // jqxTabs 初始化
            $("#jqxTabs").jqxTabs();

            // 选项卡切换时执行动作
            $("#jqxTabs").on("selected", function(event) {
                var selectedItemIndex = event.args.item;
                console.log("选项卡 " + selectedItemIndex + " 被选择。");
            });
        });
    </script>
</body>
</html>

以上就是 jQWidgets jqxTabs selectedItem 属性的攻略和两条示例说明。

Tags: