博客

jQWidgets jqxWindow closeAll()方法

  • Post category:jquery

jQWidgets jqxWindow closeAll()方法

jqxWindow 是 jQWidgets 提供的一个窗口组件，用于显示弹出框、对话框等页面元素。closeAll() 方法可以关闭所有已打开的jqxWindow 窗口。

语法

$('#id').jqxWindow('closeAll');

其中，'#id' 是指定的 jqxWindow 窗口的 DOM ID。

示例 1

以下示例演示如何使用 closeAll() 方法关闭所有已打开的 jqxWindow 窗口。点击按钮时采用jqxWindow打开两个窗口，再点击按钮将这两个窗口关闭。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jqxWindow closeAll() Demo</title>
    <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet">
    <script src="jquery/jquery-3.5.1.min.js"></script>
    <script src="jqwidgets/jqxcore.js"></script>
    <script src="jqwidgets/jqxbuttons.js"></script>
    <script src="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // 创建两个 jqxWindow
            $("#jqxwindow1").jqxWindow({
                height: 200,
                width: 400,
                autoOpen: false,
                theme: 'energyblue',
            });

            $("#jqxwindow2").jqxWindow({
                height: 200,
                width: 400,
                autoOpen: false,
                theme: 'energyblue',
            });

            // 显示第一个窗口
            $('#openWindow').click(function() {
                $("#jqxwindow1").jqxWindow('open');
            });

            // 显示第二个窗口
            $('#openWindow2').click(function() {
                $("#jqxwindow2").jqxWindow('open');
            });

            // 关闭所有窗口
            $('#closeAll').click(function() {
                $("#jqxwindow1").jqxWindow('closeAll');
            });
        });
    </script>
</head>

<body>
    <h2>jqxWindow closeAll() Demo</h2>

    <button id="openWindow">Open Window1</button>
    <button id="openWindow2">Open Window2</button>
    <button id="closeAll">Close All Windows</button>

    <!-- 第一个jqxWindow -->
    <div id="jqxwindow1">
        <div>Window1</div>
        <div>Content1</div>
    </div>

    <!-- 第二个jqxWindow -->
    <div id="jqxwindow2">
        <div>Window2</div>
        <div>Content2</div>
    </div>
</body>

</html>

示例 2

以下示例演示如何使用 closeAll() 方法在一个 click 事件中关闭所有的 jqxWindow 窗口。在本示例中，单击关闭按钮后，将使用 closeAll() 方法关闭所有打开的窗口。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jqxWindow closeAll() Demo</title>
    <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet">
    <script src="jquery/jquery-3.5.1.min.js"></script>
    <script src="jqwidgets/jqxcore.js"></script>
    <script src="jqwidgets/jqxbuttons.js"></script>
    <script src="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#jqxwindow1").jqxWindow({
                height: 200,
                width: 400,
                autoOpen: false,
                theme: 'energyblue',
            });

            $("#jqxwindow2").jqxWindow({
                height: 200,
                width: 400,
                autoOpen: false,
                theme: 'energyblue',
            });

            $("#openWindow").jqxButton({
                theme: 'energyblue',
            });

            $("#openWindow").click(function() {
                $("#jqxwindow1").jqxWindow('open');
            });

            $("#openWindow2").jqxButton({
                theme: 'energyblue',
            });

            $("#openWindow2").click(function() {
                $("#jqxwindow2").jqxWindow('open');
            });

            $("#closeAll").jqxButton({
                theme: 'energyblue',
            });

            $("#closeAll").click(function() {
                $('.jqx-window').jqxWindow('closeAll');
            });
        });
    </script>
</head>

<body>
    <h2>jqxWindow closeAll() Demo</h2>

    <button id="openWindow">Open Window1</button>
    <button id="openWindow2">Open Window2</button>
    <button id="closeAll">Close All Windows</button>

    <div id="jqxwindow1">
        <div>Window1</div>
        <div>Content1</div>
    </div>

    <div id="jqxwindow2">
        <div>Window2</div>
        <div>Content2</div>
    </div>
</body>

</html>

以上代码将在页面上呈现出两个按钮，单击其中一个按钮将弹出一个 jqxWindow 窗口。单击另一个按钮将弹出一个不同的窗口。最后，单击“Close All”按钮将关闭所有打开的 jqxWindow 窗口。

希望这些示例能够帮助您更好地了解 jqxWindow closeAll() 方法的使用方法。

Tags: