如何向 AlloyUI 添加自定义按钮Scheduler http://alloyui.com/examples/scheduler/的事件弹出窗口?事件弹出窗口包括Save
, Cancel
, and Delete
按钮,但我想添加另一个(例如Edit
)。我已经浏览过SchedulerAPI文档 http://alloyui.com/api/classes/A.SchedulerBase.html,但我找不到有关向事件弹出窗口添加按钮的任何信息。
The SchedulerEventRecorder http://alloyui.com/api/classes/A.SchedulerEventRecorder.html类包含对popover http://alloyui.com/api/classes/A.SchedulerEventRecorder.html#attr_popover其中包含您要添加按钮的表单。但是,我尝试自定义包含按钮的工具栏页脚(在调度程序内的弹出窗口内的工具栏内),但这似乎不可能。因此,我怀疑是否存在用于自定义这些按钮的标准 API 方法,并且我也怀疑开发人员是否打算自定义这些按钮。因此我建议不要自定义按钮。
如果您确定要添加和自定义这些按钮,尽管存在潜在问题,那么我确实找到了一种方法来完成您想要的操作。每次Scheduler
弹出窗口,它只显示默认按钮。即使您在创建按钮后向其添加按钮,它也会忽略或删除它们,或者(很可能)被销毁,然后重新创建,并且永远不会显示自定义按钮。因此,必须在弹出窗口显示后添加任何按钮。为此,您可以在SchedulerEventRecorder.showPopover() http://alloyui.com/api/classes/A.SchedulerEventRecorder.html#method_showPopover方法使用Do.after() http://yuilibrary.com/yui/docs/api/classes/Do.html#method_after像这样:
var eventRecorder = new Y.SchedulerEventRecorder();
Y.Do.after(function() {
// Assuming that the boundingBox of your Scheduler has an id of "bb":
var toolbarBtnGroup = Y.one('#bb .toolbar .btn-group');
toolbarBtnGroup.appendChild('<button id="edit" type="button">Edit</button>');
}, eventRecorder, 'showPopover');
这是一个可运行的代码示例:
YUI().use('aui-button', 'aui-scheduler', 'event-custom-base', function (Y) {
var eventRecorder = new Y.SchedulerEventRecorder();
var weekView = new Y.SchedulerWeekView();
new Y.Scheduler({
boundingBox: '#bb',
date: new Date(2014, 8, 28),
eventRecorder: eventRecorder,
items: [],
views: [weekView]
}).render();
var editButton;
Y.Do.after(function() {
var toolbarBtnGroup = Y.one('#bb .toolbar .btn-group');
toolbarBtnGroup.appendChild('<button id="edit" type="button">Edit</button>');
editButton = new Y.Button({
label: 'Edit',
srcNode: '#edit',
}).render();
editButton.on('click', function(event) {
alert('Edit clicked!');
eventRecorder.hidePopover();
});
}, eventRecorder, 'showPopover');
Y.Do.after(function() {
// Make sure that the editButton is destroyed to avoid a memory leak.
if (editButton) {
editButton.destroy();
}
}, eventRecorder, 'hidePopover');
});
<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>
<!-- boundingBox of the scheduler -->
<div id="bb"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)