artDialogv6和jQuery 2.x以及RequireJS配合使用

浏览数：27 / 时间：2015年06月09日

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‘,

我的myDialog.js是一个简单的封装，提供了常用的弹出对话框的函数。和之前的artDialog版本不一样，$.dialog函数已经不可用。

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();
	       }

	   };
       });

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

artDialogv6和jQuery 2.x以及RequireJS配合使用