artDialogv6和jQuery 2.x以及RequireJS配合使用
artDialog代码已经从google code转移到了github，最新版本的文档在：http://aui.github.io/artDialog/doc/index.html
artDialog文档中用RequireJS加载的方式是：
var dialog = require('./artDialog/src/dialog');
但是我这里所采用的是RequireJS模块加载方法。首先有一个cppPage,js，对应与某个html页面。
在html页面中加载该cppPage.js的标记为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script data-main="/script/app/cppPage" src="/thirdParty/require.js"></script>
</head>
Nginx已经配置好静态文件路径，使得/script/app/cppPage和/thirdParty/require.js都是有效路径。
在cppPage.js文件中如下配置：
require.config({
paths: {
"jquery": "../../thirdParty/jquery-2.1.0.min",
"jqueryTool": "../util/jqueryTool",
"artDialog": "../../thirdParty/artDialog/src/dialog",
"popup": "../../thirdParty/artDialog/src/popup",
"dialog-config": "../../thirdParty/artDialog/src/dialog-config",
"myDialog": "../util/myDialog",
"ajaxUtility": "../util/ajaxUtility",
"cpp": "./cpp"
},
shim: {
"artDialog": {
deps: ["jquery", "popup", "dialog-config"]
},
"myDialog": {
deps: ["artDialog"]
},
"jqueryTool": {
deps: ["jquery"]
},
"ajaxUtility": {
deps: ["jquery", "myDialog"]
}
}
});
define(["jquery", "ajaxUtility", "jqueryTool", "artDialog", "myDialog", "cpp"],
function ($, ajaxUtility, jqueryTool, artDialog, myDialog, cpp) {
'use strict';
$(document).ready(function () {
var locale = "en";
myDialog.init(locale, artDialog);
ajaxUtility.init(locale);
cpp.init(ajaxUtility, jqueryTool, myDialog);
});
});
shim配置很重要，它指出了我有一个myDialog.js文件依赖artDialog.js，而artDialog.js又依赖一起发布的几个文件：popup.js和dialog-config.js.
同时也依赖于jquery.
注意，dialog-config.js中引用了一个css文件，在相对路径下无法找到，我将之修改成我的Nginx下能够找到的路径
// css 文件路径，留空则不会使用 js 自动加载样式
// 注意：css 只允许加载一个
// cssUri: '../css/ui-dialog.css',
cssUri: '/thirdParty/artDialog/css/ui-dialog.css',
define([],
function () {
'use strict';
return {
// language should be either 'cn' or 'en'
init: function (locale, dialog) {
this.locale = locale;
this.dialog = dialog;
if (locale === "cn") {
this.cancelText = "取消";
this.okText = "确定";
this.errorTitleText = "错误";
this.okTitleText = "信息";
this.questionTitle = "确认";
} else {
this.cancelText = "Cancel";
this.okText = "OK";
this.errorTitleText = "Error";
this.okTitleText = "Info";
this.questionTitle = "Conform";
}
},
error: function (message) {
var d = this.dialog({
title: this.errorTitleText,
icon: "error",
content: message,
okVal: this.cancelText,
ok: function () {
this.close();
}
});
d.show();
},
done: function (message) {
var d = this.dialog({
title: this.okTitleText,
icon: "ok",
content: message,
okVal: this.okText,
ok: function () {
this.close();
}
});
d.show();
},
defaultHandler2: function () {
},
question: function (message, ob, hdl1, hdl2) {
var b;
if (hdl2) {
b = hdl2;
} else {
b = this.defaultHandler2;
}
var d = this.dialog({
title: this.questionTitle,
icon: "question",
content: message,
okVal: this.okText,
cancelVal: this.cancelText,
lock: true,
ok: (function (ob, hdl) {
return function () {
hdl1(ob);
};
}(ob)),
cancel: b
});
d.show();
}
};
});