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月2日星期五