jQWidgets jqxDocking 完整参考

jQWidgets jqxDocking 是一款基于 jQuery 的插件，用于创建灵活的交互式布局。它提供了一个可嵌套的面板集合，允许用户调整大小和位置。在本文中，我们将探讨 jQWidgets jqxDocking 的各种功能和选项，以及如何使用它来创建自定义布局。

开始使用

安装

在使用 jQWidgets jqxDocking 之前，需要先引入必要的文件：

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

基本用法

要创建一个 jqxDocking 控件，我们需要一个包含面板空间的 DIV，并对其进行初始化：

<div id="dockingContainer">
    <div data-container="true" data-left="30%" data-top="20%" data-width="40%" data-height="50%">
        <div data-dock="top" data-size="50%">Panel 1</div>
        <div data-dock="bottom" data-size="50%">Panel 2</div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $("#dockingContainer").jqxDocking({ });
    });
</script>

配置选项

jQWidgets jqxDocking 包含许多配置选项，可以根据自己的需求进行自定义。以下是一些常见的选项及其用法示例：

$("#dockingContainer").jqxDocking({
    autoSave: true, // 自动保存布局
    cookies: true, // 使用 cookies 保存布局
    theme: "classic", // 指定主题
    panels: [{ // 配置面板
        text: "Panel 1",
        dock: "top",
        size: "50%"
    }, {
        text: "Panel 2",
        dock: "bottom",
        size: "50%"
    }]
});

方法

jQWidgets jqxDocking 可以使用以下方法来控制布局：

• addPanel(panel): 向面板集合中添加面板。panel 是一个包含面板属性的对象。
• disable(): 禁用控件。
• destroy(): 销毁控件，并解除所有事件绑定。
• enable(): 启用控件。
• hideAllCloseButtons(): 隐藏所有面板的关闭按钮。
• removePanel(index): 从面板集合中删除指定索引位置的面板。
• selectPanel(index): 选中指定索引位置的面板。
• showAllCloseButtons(): 显示所有面板的关闭按钮。

var docking = $("#dockingContainer").jqxDocking();

// 添加一个新面板
docking.addPanel({
    text: "Panel 3",
    content: $("<div>Panel 3 Content</div>"),
    dock: "left",
    size: "30%"
});

// 选中第一面板
docking.selectPanel(0);

// 隐藏所有关闭按钮
docking.hideAllCloseButtons();

高级用法

嵌套面板

jQWidgets jqxDocking 支持嵌套面板，可以创建更复杂的布局。在下面的示例中，我们创建了一个包含嵌套面板的根面板，并向其中添加了三个子面板：

<div id="dockingContainer">
    <div data-container="true" data-width="100%" data-height="100%">
        <div data-dock="left" data-width="30%">
            <div data-container="true" data-height="100%">
                <div data-dock="top" data-size="50%">Panel 1</div>
                <div data-dock="bottom" data-size="50%">Panel 2</div>
            </div>
        </div>
        <div data-dock="right" data-width="70%">Panel 3</div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $("#dockingContainer").jqxDocking({ });
    });
</script>

事件

jQWidgets jqxDocking 可以响应以下事件：

• dragStart: 开始拖拽面板时触发。
• dragEnd: 拖拽面板结束时触发。
• floatingChange: 面板的浮动状态发生改变时触发。
• layoutChange: 布局发生改变时触发。
• panelClick: 单击面板时触发。
• panelClose: 关闭面板时触发。
• panelCollapse: 折叠面板时触发。
• panelExpand: 展开面板时触发。
• panelMaximize: 最大化面板时触发。
• panelMinimize: 最小化面板时触发。
• panelPin: 固定面板时触发。
• panelUnpin: 取消固定面板时触发。

var docking = $("#dockingContainer").jqxDocking();

// 在拖拽开始时记录面板位置信息
docking.on("dragStart", function (e) {
    console.log("Start Position: " + e.args.position.x + ", " + e.args.position.y);
});

// 在拖拽结束时记录面板位置信息
docking.on("dragEnd", function (e) {
    console.log("End Position: " + e.args.position.x + ", " + e.args.position.y);
});

// 在面板展开时输出面板文本
docking.on("panelExpand", function (e) {
    console.log("Panel Expanded: " + e.args.title);
});

总结

jQWidgets jqxDocking 可以帮助我们轻松地创建灵活的交互式布局。它提供了许多选项和方法，使我们可以根据自己的需求进行自定义。这篇文章提供了一些基础用法和高级用法示例，以及如何处理事件。在实际开发中，如果您需要更高级的用法，可以查看 官方文档。