以下是关于 jQWidgets jqxScheduler 组件中 contextMenu 属性的详细攻略。
jQWidgets jqxScheduler contextMenu 属性
jQWidgets jqxScheduler 组件的 contextMenu用于设置日程表的上下文菜单。
语法
// 设置上下文菜单
$('#scheduler').jqxScheduler({
contextMenu: $('#schedulerMenu')
});
示例
以下两个示例演示如何使用 contextMenu 属性。
示例 1
// 设置上下文菜单
$('#scheduler').jqxScheduler({
contextMenu: $('#schedulerMenu')
});
在示例 1 中，我们使用 contextMenu 属性设置了日程表的上下文菜单。
示例 2
<!DOCTYPE html>
>
<head>
<meta charset="-">
<title>jQ jqxScheduler Context Menu Property</title>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/jqx.scheduler.css" type="text/css" />
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxcore.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxmenu.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxscheduler.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// 创建上下文菜单
var contextMenu = $('<div><ul><li id="newAppointment">New Appointment</li><li id="editAppointment">Edit Appointment</li><li id="deleteAppointment">Delete Appointment</li></ul></div>');
contextMenu.jqxMenu({ width: '120px', autoOpenPopup: false, mode: 'popup' });
// 设置上下文菜单
$('#scheduler').jqxScheduler({
date: new $.jqx.date(2023, 5, 11),
width: 800,
height: 600,
contextMenu: contextMenu,
source: new $.jqx.scheduler.source({
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'status', type: 'string' },
{ name: 'text', type: 'string' },
{ name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' },
{ name: 'resourceId', type: 'string' }
],
id: 'id',
url: 'data.php'
}),
resources:
{
colorScheme: 'scheme05',
dataField: 'resourceId',
source: new $.jqx.dataAdapter({
dataType: 'json',
url: 'resources.php',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'image', type: 'string' }
]
}),
label: 'name'
},
appointmentDataFields:
{
from: 'start',
to: 'end',
id: 'id',
description: 'text',
resourceId: 'resourceId',
status: 'status'
},
views:
[
'dayView',
'weekView',
'monthView'
]
});
// 绑定上下文菜单事件
$('#newAppointment').on('click', function () {
$('#scheduler').jqxScheduler('openAddAppointmentDialog');
});
$('#editAppointment').on('click', function () {
$('#scheduler').jqxScheduler('openEditAppointmentDialog', $('#scheduler').jqxScheduler('getSelection').range.from);
});
$('#deleteAppointment').on('click', function () {
$('#scheduler').jqxScheduler('deleteAppointment', $('#scheduler').jqxScheduler('getSelection').range.from);
});
});
</script>
</head>
<body>
<div id="scheduler"></div>
</body>
</html>
在示例 2 中，我们创建了一个日程表，并创建了一个上下文菜单。我们使用 contextMenu 属性将上下文菜单设置为日程表的上下文菜单。我们还绑定了上下文菜单的单击事件以便在单菜单项时执行相应的操作。
注意事项
- contextMenu 属性用于设置日程表的上下文菜单。
- contextMenu 属性可以是一个 jQuery 对象或一个选择器字符串。
- contextMenu 属性可以与 jqxScheduler 方法一起使用。
总之，contextMenu 属性用于设置日程表的上下文菜单。以上两个示例演示了如使用 contextMenu 属性。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQWidgets jqxScheduler contextMenu属性 - Python技术站
微信扫一扫 
支付宝扫一扫 