使用dojo的dialog自定义confirm效果

最新推荐文章于 2017-01-29 19:13:53 发布

最新推荐文章于 2017-01-29 19:13:53 发布 · 268 阅读

Dojo 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用Dojo工具包创建一个自定义的确认对话框，该对话框模仿了浏览器内置的confirm功能，但提供了更多的定制选项，并且允许通过回调函数直接执行确认后的操作。

/**
 * 使用dojo dialog模拟confirm<br>
 * 返回true/false<br>
 * 前提是已经引用了相应的dojo.js<br>
 * @author: DFH<br>
 * @since: 2012-05-16
 */
function dojoConfirm(content,callback){
	require([ "dijit/Dialog","dijit/form/Button"], function(Dialog) {
		content=content+
			"<br/><button dojoType='dijit.form.Button' id='yesButton'>确定</button>" +
			"<button dojoType='dijit.form.Button' id='noButton'>取消</button>";
		
		var confirmDialog = new Dialog({
			id:"confirmDialog",
			title : '确认',
			content : content,
			onHide : function() {
				this.destroyRecursive();
			}
		});
		confirmDialog.startup();
		
		var yesButton = dijit.byId('yesButton');
        var noButton = dijit.byId('noButton');
        //如果点击确定按钮
        dojo.connect(yesButton, 'onClick', function(mouseEvent) {
        confirmDialog.hide();
        callback();
        });
        //如果点击取消按钮
        dojo.connect(noButton, 'onClick', function(mouseEvent) {
        confirmDialog.hide();});
        
        confirmDialog.show();
	});
}

使用时要注意，代码中定义的三个id值在项目中不要重复。

调用方式

dojoConfirm("确认要删除?",function(){
			//删除功能...
});

与普通confirm不同的是，直接传函数给方法让其在确认后调用，而不是使用if判断