jQWidgets jqxWindow collapse() 方法(1)

📌 相关文章

📜 jQWidgets jqxWindow collapse() 方法(1)

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

jQWidgets jqxWindow collapse() 方法

简介

jQWidgets jqxWindow 是一个基于 jQuery 的弹窗插件，可用于创建自适应大小、各种样式的窗口。collapse() 方法是其中的一个成员方法，用于在单击窗口标题时折叠窗口内容。

语法

$(selector).jqxWindow('collapse');

参数

该方法无需传递任何参数。

返回值

该方法不返回任何值。

示例

以下是使用 jQWidgets jqxWindow collapse() 方法的示例代码片段：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jqxWindow Collapse Demo</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.0.0/jqx-all.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.0.0/jqx.base.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="window">
    <div>我是窗口内容</div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#window').jqxWindow({
            width: 350,
            height: 200,
            resizable: false,
            draggable: false,
            isModal: true,
            autoOpen: true,
            collapsed: true,
            initContent: function () {
                $('#window').jqxWindow('collapse');
            }
        });
    });
</script>
</body>
</html>

在该示例中，我们创建了一个简单的窗口，并将窗口的 collapsed 属性设置为 true，这意味着默认情况下窗口内容将被折叠。在 initContent 回调中，我们使用 collapse() 方法，在窗口初始化时将窗口内容折叠起来。

以上代码在页面加载时自动弹出一个宽 350、高 200 ，内容被折叠起来的模态窗口，单击窗口标题即可展开窗口内容。

注意事项

该方法只对已初始化的 jQWidgets jqxWindow 生效，如果试图在未初始化的 jqxWindow 上调用该方法将会抛出错误。
如果不希望在初始化时就将窗口内容折叠起来，可以将 collapsed 属性设置为 false，并在需要时手动调用 collapse() 方法。