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

最後更新：2014-02-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More