dojox/layout/ContentPane (part II)

簡介

dojox/layout/ContentPane 在下載新內容以更換窗格的內容時，還提供了五個回呼函式，對應五種觸發事件。這五個函式分別是：

onDownloadStart()
onUnload()
onLoad()
onDownloadEnd()
onDownloadError()

當設定 "content" 屬性直接改變內容時，只會觸發並執行 onUnload() 及 onLoad() 兩個函式。而在引入外部的網頁時，則會觸發並依序執行 onDownloadStart()、onUnload()、onLoad() 及 onDownloadEnd() 四個函式，onDownloadError() 只有在下載外部網頁發生錯誤時才會觸發和執行。

其中，onDownloadStart() 這個函式要特別注意，它一定要回傳 (return) 一個字串，根據 dojo 的說明文件，這個字串是用來做為下載訊息之用，如果沒有回傳一個字串，會引發錯誤。切記！切記！

範例

這個範例也是建立兩個按鈕及一個窗格，第一個按鈕直接改變內容，第二個按鈕則從外部引入網頁。執行時會用彈出視窗顯示正在執行的步驟，請同時注意窗格中內容的變化，藉以瞭解函式執行的時機。

CSS

<style>
html{
  width:100%;
  height:100%;
}
 body {
  margin:0 auto;
  width:1000px;
  height:100%;
  padding:0;
  overflow:hidden;
}
#mainCP {
  width:400px;
  height:400px;
  border: 1px solid gray;
}
</style>

CSS 的主要目的只是在把按鈕和窗格移到中間，比較容易觀看及操作。

HTML

<body class="claro">
  
  
  
  
</body>

Script

onUnload() 會在原始內容被清除前執行，此時原始內容的節點 (node) 和 dijit 都還在，如果要針對這些節點和 dijit 做一些事，包括清除事件監聽的機制等等，都可以在此時完成，隨後節點和 dijit 就被清除了。

dojox/layout/ContentPane (part I)

簡介

dojox/layout/ContentPane 是 dijit/layout/ContentPane 的子類別 (subclass) 但實在比 dijit/layout/contentPane 好用多了。內容窗格 (ContentPane) 主要的作用是在流覽器的螢幕上畫分一塊區域，在這區域中可以依實務需要改變窗格的內容。窗格的內容可以是一段純文字、一段 HTML 碼，甚至可以是另一個網頁。

在這一篇先展示如何將一段 HTML 碼，放到窗格中。以改變窗格的內容。如果窗格要引入另一個網頁時，因為 Chrome 的預設會阻擋流覽器讀取本地 (local) 的檔案，所以得先把 Chrome 關掉，在 OS X 的主控台下 "open /Applications/Browser/Google\ Chrome.app --args --allow-file-access-from-files" 指令，在 windows 的主控台下 "Chrome.exe --allow-file-access-from-files"，記得在下指令前，一定要把所有的開啟的 Chrome 流覽器都關掉，不然指令會不起作用。

範例

範例中建立兩個按鈕，及一個大小為 400px * 400px 的窗格，按下其中一個按鈕便會改變窗格的內容。

CSS

<style>
html {
 width:100%;
 height:100%;
} 
body {
 margin:0 auto;
 width:1000px;
 height:100%;
 padding:20px;
}
#mainCP {
 width:400px;
 height:400px;
 border: 1px solid gray;
}
</style>

CSS 的設定主要在把按鈕和窗格移到螢幕中間。窗格也設定了邊框，好看見窗格的大小。

HTML

<body class="claro">
 
 
 
 
</body>

第 4 行用宣告法宣告了一個窗格，其樣式在 CSS 中用 #mainCP{} 設定好了。

設定窗格 "content" 屬性的值，便可以改變窗格內容，傳入函式的第二個參數，便是所要顯示在窗格中的內容，在第 18 行，傳入的是一段純文字。在第 21 行，則傳入一段 HTML 碼。

如果窗格要改變的內容來自另外一個檔案，或是網頁，則要多設定幾個窗格的屬性，將 HTML 碼修改如下：

<body class="claro">
    
    
    
    
</body>

adjustPath:true 設定要修正檔案路徑，有時被引入的網頁和含有窗格的網頁並不在同一個目錄下，在被引入的網頁中，所果含有相對路徑的參考值時，會找不到路徑，設定這個屬性會修正相對路徑的參考值，變成都是以窗格所在的目錄作為相對路徑的起始目錄。所以在被引入的網頁中，要以窗格的所在目錄做為相對路徑參考值的起始目錄。如果被引入的網頁中，採取的是絕對路徑的參考值，就不會受到影響了。

cleanContent:true 設定，只有在引入的網頁是個完整的網頁，包含有<!DOCTYPE html>、 <html>、<head> 等標記時有作用，其作用是將上述的標記去除，免得造成網頁的混亂。

renderStyle:true 設定會讀取被引入網頁中的 <style> 標記，並將其中的樣式套用到整個網頁中。因此，在要被引用的網頁中設定樣式時，要很小心。盡可能不要改變標記的樣式，否則會造成非預期的效果，可能會改變到窗格外的其它元件。套用樣式時，最好能盡可能詳細指定要套用樣式的元件。

Script

要引入外部網頁時，所要改變的窗格屬性是 "href"，第二個參數要傳入網頁的所在目錄位置和檔名。在範例中，假設被引入的網頁和含有窗格的網頁處在相同的目錄下。

熊伯的外接硬碟

2015年10月3日星期六