jQWidgets jqxScheduler closeMenu()方法

jQWidgets是一个基于jQuery的UI库，内置了许多实用的组件和工具，其中jqxScheduler是一款功能非常丰富的日程表组件。closeMenu()方法是jqxScheduler中的一种方法，用于隐藏预约菜单。

方法说明

closeMenu()

closeMenu()方法隐藏预约菜单，即隐藏当用户点击“+”按钮时弹出的菜单。

• 语法

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

• 参数

该方法不接受任何参数。

• 返回值

该方法不返回任何值。

示例说明

下面是closeMenu()方法的两个示例，分别介绍如何使用该方法。

示例1

在该示例中，我们创建了一个jqxScheduler实例，并且在每次用户从“+”按钮展开预约菜单时隐藏菜单。

$(document).ready(function () {
    //初始化jqxScheduler实例
    var appointments = new Array();
    var now = new Date();
    var appointment1 = {
        id: "id1",
        description: "Meeting",
        location: "",
        subject: "Website Re-Design Plan",
        calendar: "",
        start: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 9, 0, 0),
        end: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 16, 0, 0)
    };
    appointments.push(appointment1);
    var source = {
        dataType: "array",
        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" }
        ],
        id: "id",
        localData: appointments
    };
    var adapter = new $.jqx.dataAdapter(source);
    $("#jqxScheduler").jqxScheduler({
        date: new $.jqx.date(2016, 11, 23),
        appointmentsReorder: true,
        showToolbar: true,
        views: ['dayView', 'weekView', 'monthView'],
        appointmentDataFields: {
            from: "start",
            to: "end",
            id: "id",
            description: "description",
            location: "place",
            subject: "about",
            resourceId: "calendar"
        },
        resources:
        {
            colorScheme: "scheme05",
            dataField: "calendar",
            orientation: "horizontal",
            source: new $.jqx.dataAdapter({
                dataType: "json",
                url: "../sampledata/resources.txt"
            })
        },
        source: adapter,
        ready: function () {
            $("#jqxScheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
        }
    });

    //在每次菜单打开时隐藏菜单
    $("#jqxScheduler").on('appointmentMenuOpening', function () {
        $("#jqxScheduler").jqxScheduler('closeMenu');
    });
});

示例2

在该示例中，我们添加了一个“隐藏菜单”按钮，每当用户点击该按钮时隐藏预约菜单。

$(document).ready(function () {
    //初始化jqxScheduler实例
    var appointments = new Array();
    var now = new Date();
    var appointment1 = {
        id: "id1",
        description: "Meeting",
        location: "",
        subject: "Website Re-Design Plan",
        calendar: "",
        start: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 9, 0, 0),
        end: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 16, 0, 0)
    };
    appointments.push(appointment1);
    var source = {
        dataType: "array",
        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" }
        ],
        id: "id",
        localData: appointments
    };
    var adapter = new $.jqx.dataAdapter(source);
    $("#jqxScheduler").jqxScheduler({
        date: new $.jqx.date(2016, 11, 23),
        appointmentsReorder: true,
        showToolbar: true,
        views: ['dayView', 'weekView', 'monthView'],
        appointmentDataFields: {
            from: "start",
            to: "end",
            id: "id",
            description: "description",
            location: "place",
            subject: "about",
            resourceId: "calendar"
        },
        resources:
        {
            colorScheme: "scheme05",
            dataField: "calendar",
            orientation: "horizontal",
            source: new $.jqx.dataAdapter({
                dataType: "json",
                url: "../sampledata/resources.txt"
            })
        },
        source: adapter,
        ready: function () {
            $("#jqxScheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
        }
    });

    //添加“隐藏菜单”按钮
    $("#btnHideMenu").click(function() {
        $("#jqxScheduler").jqxScheduler('closeMenu');
    });
});

<!-- 示例2的HTML代码 -->
<button id="btnHideMenu">隐藏菜单</button>
<div id="jqxScheduler"></div>

通过上述两个示例，我们可以看出closeMenu()方法的灵活性和实用性，可供开发者们进行自由的设计和使用。