[英]Dojo Dialog with confirmation button
我想添加一个通用对话框,其中“Ok”和“Cancel”按钮支持回调函数。
如何使用Dojo AMD实现这一目标?
例如:
myDialog = new Dialog ({
title: "My Dialog",
content: "Are you sure, you want to delete the selected Record?",
style: "width: 300px",
onExecute:function(){ //Callback function
console.log("Record Deleted")
},
onCancel:function(){
console.log("Event Cancelled") }
});
// create a button to clear the cart
new Button({ label:"Ok"
onClick: myDialog.onExecute()
}
new Button({ label:"Cancel"
onClick: function(){ myDialog.onCancel() }
}
这是我遇到同样问题时提出的解决方案。 它不是完全程序化的,但使用模板使代码更易读,更灵活。
最好只看一次,而不是听100次,所以看下面的所有代码住在jsFiddle: http : //jsfiddle.net/phusick/wkydY/
我使用的主要原则是dijit.Dialog::content
不仅可以是字符串,还可以是小部件实例。 所以我将dijit.Dialog
子类dijit.Dialog
声明ConfirmDialog
类。 在ConfirmDialog::constuctor()
我从模板声明并实例化一个小部件,并将其设置为对话框的内容。 然后我在ConfirmDialog::postCreate()
方法中连接onClick
动作:
var ConfirmDialog = declare(Dialog, {
title: "Confirm",
message: "Are you sure?",
constructor: function(/*Object*/ kwArgs) {
lang.mixin(this, kwArgs);
var message = this.message;
var contentWidget = new (declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: template, //get template via dojo loader or so
message: message
}));
contentWidget.startup();
this.content = contentWidget;
},
postCreate: function() {
this.inherited(arguments);
this.connect(this.content.cancelButton, "onClick", "onCancel");
}
})
模板标记:
<div style="width:300px;">
<div class="dijitDialogPaneContentArea">
<div data-dojo-attach-point="contentNode">
${message}
</div>
</div>
<div class="dijitDialogPaneActionBar">
<button
data-dojo-type="dijit.form.Button"
data-dojo-attach-point="submitButton"
type="submit"
>
OK
</button>
<button
data-dojo-type="dijit.form.Button"
data-dojo-attach-point="cancelButton"
>
Cancel
</button>
</div>
</div>
现在使用ConfirmDialog
而不是dijit.Dialog
:
var confirmDialog = new ConfirmDialog({ message: "Your message..."});
confirmDialog.show();
重要提示:关闭时不要忘记断开对话框回调和销毁对话框的任何连接。
如果您经常在代码的多个位置使用ConfirmDialog
,请考虑以下事项:
var MessageBox = {};
MessageBox.confirm = function(kwArgs) {
var confirmDialog = new ConfirmDialog(kwArgs);
confirmDialog.startup();
var deferred = new Deferred();
var signal, signals = [];
var destroyDialog = function() {
array.forEach(signals, function(signal) {
signal.remove();
});
delete signals;
confirmDialog.destroyRecursive();
}
signal = aspect.after(confirmDialog, "onExecute", function() {
destroyDialog();
deferred.resolve('MessageBox.OK');
});
signals.push(signal);
signal = aspect.after(confirmDialog, "onCancel", function() {
destroyDialog();
deferred.reject('MessageBox.Cancel');
});
signals.push(signal);
confirmDialog.show();
return deferred;
}
您的代码将更具可读性,您无需处理清理:
MessageBox.confirm().then(function() {
console.log("MessageBox.OK")
});
以下是如何使用dijit/ConfirmDialog
并配置其按钮。
require(["dijit/ConfirmDialog"], function(ConfirmDialog){
// create instance
var dialog = new ConfirmDialog({
title: "Session Expiration",
content: "the test. Your session is about to expire. Do you want to continue?",
style: "width: 300px"
});
// change button labels
dialog.set("buttonOk","Yes");
dialog.set("buttonCancel","No");
// register events
dialog.on('execute', function() { /*do something*/ });
dialog.on('cancel', function() { /*do something*/ });
// show
dialog.show();
});
Dojo 1.10包含一个带有内置OK和Cancel按钮的新dijit / ConfirmTooltipDialog 。
Dojo Confirm Dialog非常简单且有用。
http://dojotoolkit.org/reference-guide/1.10/dijit/ConfirmDialog.html
require(["dijit/ConfirmDialog", "dojo/domReady!"], function(ConfirmDialog){
myDialog = new ConfirmDialog({
title: "My ConfirmDialog",
content: "Test content.",
buttonCancel: "Label of cancel button",
buttonOk: "Label of OK button",
style: "width: 300px",
onCancel: function(){
//Called when user has pressed the Dialog's cancel button, to notify container.
},
onExecute: function(){
//Called when user has pressed the dialog's OK button, to notify container.
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.