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的标记为:



  
    
  

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配合使用)