1. 程式人生 > >DWZ中如何整合第三方jQuery外掛

DWZ中如何整合第三方jQuery外掛

jQuery外掛一般是$(document).ready()中初始化

複製程式碼
$(document).ready(function(){
    // 文件就緒,初始化jQuery外掛});
// 或者或縮寫形式$(function(){
    // 文件就緒,初始化jQuery外掛});
複製程式碼

因為DWZ RIA是富客戶端思路,第一次開啟時載入介面到瀏覽器端,之後和伺服器的互動是存資料互動,不佔用介面相關的網路流量。
也就是說,只需要在一個完整的頁面(通常是起始頁,如index.aspx/index.php/index.jsp等),只有這個頁面包含完整的html結構(<head><body>),<head>中引入全部css、js 。其它的頁面只需要頁面碎片,就是<body></body>中的部分。

因為ajax載入基本原理是:ajax載入一段html程式碼片段放到當前頁面的某個容器中(通常是一個div)。當然也可以是xml結構、json結構,只是在插入到當前頁面之前也要轉化成html程式碼片段。如果你ajax載入一個完整的頁面(就是包括<head><body>標籤的),插入的當前document就有問題了,因為一個document不可能有多個<head><body>標籤。


理解了富客戶端思路也就明白了為什麼DWZ框架中整合第三方jQuery外掛不能在<head>中通過$(document).ready()初始化。
DWZ初始化ajax載入的頁面中的第三方jQuery元件:

  • 一般外掛初始化dwz.ui.js 中的initUI 裡面處理,initUI()方法DWZ框架封裝的$.fn.loadUrl()自動呼叫。如果是jQuery原生load方法需要手動呼叫$.fn.initUI()外掛。主意initUI()中初始化是要注意作用域,裡面有一個$p代表當前ajax載入的容器,只要初始化當前容器新載入的內容就可以了
    if ($.fn.ajaxTodo) $("a[target=ajaxTodo]", $p).ajaxTodo();
    if ($.fn.dwzExport) $("a[target=dwzExport]", $p).dwzExport();
  • 如果一些特殊的ajax互動,自己寫回調函式處理