jQWidgets jqxScheduler closeMenu() 方法(1)

📌 相关文章

📜 jQWidgets jqxScheduler closeMenu() 方法(1)

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

jQWidgets jqxScheduler closeMenu() 方法

closeMenu() 方法是 jQWidgets jqxScheduler 中的一个方法。它可以用来关闭 jqxScheduler 控件的右键菜单。

语法

$('#schedulerContainer').jqxScheduler('closeMenu');

参数列表

closeMenu 方法没有参数。

返回值

closeMenu 方法没有返回值。

使用示例

下面是一个使用 closeMenu 方法的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqxScheduler closeMenu Method Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/styles/jqx.base.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxbuttons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxscrollbar.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxmenu.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcalendar.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxdatetimeinput.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxtooltip.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxdata.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxscheduler.js"></script>    
</head>
<body>
    <div id="schedulerContainer"></div>
    <script>
        $(document).ready(function () {
            var appointments = [
                {
                    id: "appointment1",
                    description: "Test appointment 1",
                    location: "",
                    subject: "Appointment 1",
                    calendar: "",
                    start: new Date(2022, 1, 1, 8, 0, 0),
                    end: new Date(2022, 1, 1, 9, 0, 0)
                },
                {
                    id: "appointment2",
                    description: "Test appointment 2",
                    location: "",
                    subject: "Appointment 2",
                    calendar: "",
                    start: new Date(2022, 1, 1, 10, 0, 0),
                    end: new Date(2022, 1, 1, 11, 0, 0)
                }
            ];

            $("#schedulerContainer").jqxScheduler({
                date: new Date(2022, 1, 1),
                width: 850,
                height: 600,
                source: new $.jqx.dataAdapter({
                    datafields: [
                        { name: "id", type: "string" },
                        { name: "description", type: "string" },
                        { name: "location", type: "string" },
                        { name: "subject", type: "string" },
                        { name: "calendar", type: "string" },
                        { name: "start", type: "date" },
                        { name: "end", type: "date" }
                    ],
                    dataType: "array",
                    localData: appointments
                }),
                view: "weekView",
                showToolbar: true,
                enableSchedulerMenu: true,
                contextMenu: $("#schedulerMenu"),
                ready: function () {
                    $("#schedulerContainer").jqxScheduler("scrollTo", new Date(2022, 1, 1, 8));
                }
            });

            $("#schedulerContainer").on("contextmenu", function (event) {
                event.preventDefault();
            });

            $("#btnCloseMenu").click(function (event) {
                $("#schedulerContainer").jqxScheduler("closeMenu");
            });
        });
    </script>

    <div id="schedulerMenu">
        <ul>
            <li><span>Cut</span></li>
            <li><span>Copy</span></li>
            <li><span>Paste</span></li>
        </ul>
    </div>

    <button id="btnCloseMenu">Close menu</button>
</body>
</html>

这个示例演示了如何使用 closeMenu 方法关闭 jqxScheduler 控件的右键菜单。特别要注意的是，为了让右键菜单不自动弹出，我们需要将 contextmenu 事件的默认行为（即弹出菜单）取消掉。

总结

closeMenu() 方法可以关闭 jQWidgets jqxScheduler 控件的右键菜单，是 jqxScheduler 控件的一个比较常用的方法之一。在使用 closeMenu() 方法的时候，需要注意该方法没有参数，也没有返回值。