📌  相关文章
📜  jQWidgets jqxWindow collapsed 属性(1)

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

jQWidgets jqxWindow collapsed 属性

在 jQWidgets jqxWindow 控件中，collapsed 属性用于控制窗口的折叠状态，即窗口是否已折叠。如果 collapsed 属性设置为 true，那么窗口就被折叠收起来，只有标题栏可见；如果设置为 false，则窗口显示为正常状态。

代码演示

下面是一个简单的 jQWidgets jqxWindow 控件示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqx-all.js"></script>
    <link href="jqx.base.css" rel="stylesheet" />
</head>
<body>
    <div id="windowContainer">
        <div>
            <div>窗口标题</div>
            <div>窗口内容</div>
        </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function () {
        //创建jqxWindow控件
        $("#windowContainer").jqxWindow({
            width: 250,
            height: 200,
            collapsed: true,
            resizable: false
        });

        //为窗口标题栏绑定点击事件
        $(".jqx-window-header .jqx-window-header-title").on("click", function () {
            $("#windowContainer").jqxWindow({collapsed: !$("#windowContainer").jqxWindow("collapsed")}); 
        });
    });
    </script>
</body>
</html>

在本示例中，我们创建了一个宽度为250，高度为200的窗口，collapsed 属性被设置为 true，即默认折叠状态。通过为窗口标题栏绑定点击事件，我们可以动态地改变窗口的折叠状态。

API 文档

以下是 jQWidgets jqxWindow 控件 collapsed 属性的 API 文档：

获取 collapsed 属性值：
BOOL jqxWindow('collapsed');

返回值：

  • BOOL，当前 collapsed 属性的值
设置 collapsed 属性值：
void jqxWindow('collapsed', BOOL collapsed);

参数：

  • collapsed，布尔值类型，用于设置 collapsed 属性的值

返回值：

  • void，没有返回值。
参考链接
总结

在 jQWidgets jqxWindow 控件中，collapsed 属性用于控制窗口的折叠状态。本文通过示例代码和 API 文档的介绍，帮助开发者了解了该属性的用法。