博客

jQWidgets jqxTabs reorder属性

  • Post category:jquery

当 reorder 属性被设为 true 时，jqxTabs 插件允许用户拖动已经打开的标签页并重新排列它们的顺序。在这个攻略中，我们将详细讨论 jqxTabs 的 reorder 属性以及如何在使用该属性时处理相关事件。

设置jqxTabs reorder属性

要使用 reorder 属性，需要在 jqxTabs 初始化过程中将其设置为 true，代码示例如下：

$("#jqxTabs").jqxTabs({
    height: "350px",
    reorder: true
});

这个代码片段会实例化一个 jqxTabs，并启用 reorder 属性来允许用户拖拉标签页。 height 选项用于定义标签页的高度。

处理 reorder 事件

当用户拖拉标签页时，会发生 reorder 事件。reorder 事件包含的数据有当前拖动标签页的index，以及标签页的新位置index。我们可以通过下面的代码片段捕获 reorder 事件：

$("#jqxTabs").on('reorder', function (event) {
    var item = event.args.item;
    var newIndex = event.args.newIndex;
    console.log("Moved item with index " + item + " to position " + newIndex);
});

这个代码片段监听 jqxTabs 的 reorder 事件并捕获它的数据。在控制台里输出拖动标签页的 item 和新位置 newIndex，从而实现拖动标签页后位置变化的实时展示。

示例

下面提供两个示例。第一个示例可以通过点击按钮添加新的标签页，同时启用拖动重新排序。第二个示例展示了如何监测标签页的位置调整，并更新拖动标签页后的导航窗口的外观。

示例 1

<!DOCTYPE html>
<html>
<head>
    <title>jqxTabs reorder property example</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
    <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/globalization/globalize.js"></script>
    <script>
        $(document).ready(function () {
            $("#add-tab").click(function () {
                var date = new Date().toISOString().substr(0, 10);
                var index = $("#jqxTabs").jqxTabs('length');
                var title = "Tab #" + index + " (" + date + ")";
                var content = "<div>Content for " + title + "</div>";
                $("#jqxTabs").jqxTabs('addLast', title, content);
            });

            $("#jqxTabs").jqxTabs({
                height: '350',
                reorder: true
            });
        });
    </script>
</head>
<body>
<button id="add-tab">Add Tab</button>
<div id='jqxTabs'>  
    <ul>
        <li>Tab #0</li>
    </ul>
    <div><div>Content for Tab #0</div></div>
</div> 
</body>
</html>

示例 2

<!DOCTYPE html>
<html>
<head>
    <title>jqxTabs reorder property example</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
    <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/globalization/globalize.js"></script>
    <script>
        $(document).ready(function () {
            $("#jqxTabs").jqxTabs({
                height: '350',
                reorder: true
            });

            $("#jqxTabs").on('reorder', function (event) {
                var item = event.args.item;
                var newIndex = event.args.newIndex;
                var $tabContent = $($(".jqx-tabs-content-element")[item]);
                var $listItem = $($(".jqx-tabs-title-element")[item]);
                if (newIndex < item) {
                    $listItem.insertBefore($($(".jqx-tabs-title-element")[newIndex]));
                    $tabContent.insertBefore($($(".jqx-tabs-content-element")[newIndex]));
                }
                else {
                    $listItem.insertAfter($($(".jqx-tabs-title-element")[newIndex]));
                    $tabContent.insertAfter($($(".jqx-tabs-content-element")[newIndex]));
                }
            });
        });
    </script>
</head>
<body>
<div id='jqxTabs'>  
    <ul>
        <li>Tab #0</li>
        <li>Tab #1</li>
        <li>Tab #2</li>
    </ul>
    <div><div>Content for Tab #0</div></div>
    <div><div>Content for Tab #1</div></div>
    <div><div>Content for Tab #2</div></div>
</div> 
</body>
</html>

以上两个示例提供了使用 jqxTabs 以及 reorder 属性的入门级教程。通过这些示例，读者可以进一步研究如何在实际项目中使用 jqxTabs，以及如何对 reorder 事件进行自定义处理。

Tags: