學習Ajax架構之dojo：第九節——詳談FloatingPane widget （附原始碼）

      前面的第八節，講述了Dojo widget的 用於頁面配置的layout widget。其中，layout widget包括九種widget。 第八節只是舉例說明了這九種widget的用法，並沒有深入。隨著，不斷的學習和應用，對每一種widget都有了更深入的瞭解。在本小節，通過執行個體重點說明一下FloatingPane widget 的用法。

 

第一部分，FloatingPane widget 的概念

FloatingPane widget 是浮動面板，可以類比windows視窗的效果。

浮動：意指可以在頁面上隨意拖拽；

類比windows視窗的效果：意指它具有windows視窗的特性，比如，它具有最基本的最小化、還原、最大化、關閉按鈕等，可以改變大小，可以嵌套內部視窗，可以開啟其他頁面等等。

 

 

第二部分，引入FloatingPane widget

說明：引入dojo.js包，根據自己建立的路徑書寫src ; 引入FloatingPane ，仍然使用dojo.require。樣本如下：

        <script type="text/javascript">
            var djConfig = {
                isDebug: true
            };
        </script>
        <script type="text/javascript" src="dojo-0.3.1-ajax/dojo.js">
        </script>
        <script language="JavaScript" type="text/javascript">
            dojo.require("dojo.widget.FloatingPane");

        </script>

 

 

第三部分，FloatingPane widget 類比windows視窗的基本屬性

說明：請注意用到的參數，運行樣本後可以看出每個參數的作用。

 

case 1 ：頁面直接載入一個FloatingPane

當運行頁面的時候，將FloatingPane 直接顯示在頁面上方，相當於onload。那麼，在這裡應該如何應用FloatingPane 呢？樣本如下：

<div id="floatingpane" dojoType="FloatingPane" title="Outer window" constrainToContainer="true" " style="width: 300px; height: 200px; left: 200px">
      This is the first FloatingPane .

      main panel with <a href="http://www.dojotoolkit.org/%22%3Ea link</a>
</div>

 

case 2 ：頁面直接載入一個FloatingPane，標題列含有圖片表徵圖

當運行頁面的時候，將FloatingPane 直接顯示在頁面上方，同時，使得標題列含有圖片表徵圖。關鍵屬性值是iconSrc。樣本如下：

<div id="floatingpane2" dojoType="FloatingPane" title="Outer window" constrainToContainer="true" iconSrc="images/check.gif" style="width: 300px; height: 200px; left: 200px">
      This is the second FloatingPane . 

      main panel with <a href="http://www.dojotoolkit.org/%22%3Ea link</a>
</div>

說明：iconSrc的路徑根據自己建立的路徑而定。

 

case 3 ：頁面直接載入一個FloatingPane，標題列含有圖片表徵圖，具有最小化、還原、最大化、關閉功能

當運行頁面的時候，滿足case2的基礎上增加FloatingPane最小化、還原、最大化、關閉的功能。關鍵的屬性值是什麼呢，請看下面的樣本：

<div id="floatingpane3"

  dojoType="FloatingPane"
  title="Resizable window w/shadow"
  constrainToContainer="true"
  displayMinimizeAction="true"
  displayMaximizeAction="true"
  displayCloseAction="true"
  iconSrc="images/note.gif"
  style="width: 300px; height: 200px; left: 600px;"
>
     This is the third FloatingPane .

</div>

 

case 4 ：頁面直接載入一個FloatingPane，標題列含有圖片表徵圖，具有最小化、還原、最大化、關閉功能，同時，可以改變FloatingPane大小

當運行頁面的時候，滿足case3的基礎上增加任意改變FloatingPane大小的功能。關鍵的屬性值是什麼呢，請看下面的樣本：

<div id="floatingpane4"

  dojoType="FloatingPane"
  title="Resizable window w/shadow"
  constrainToContainer="true"
  hasShadow="true"
  resizable="true"
  displayMinimizeAction="true"
  displayMaximizeAction="true"
  displayCloseAction="true"
  iconSrc="images/note.gif"
  style="width: 300px; height: 200px; left: 600px;"
>
     This is the forth FloatingPane .

</div>

 

 

第四部分，FloatingPane widget 的嵌套

        FloatingPane的嵌套方式，類似於以往的嵌套模式。比如，在Dojo widget的layout widget中，可以使用嵌套，用來承載頁面的CotentPane，一般情況下，它會被加入到LayoutContainer、SplitContainer、TabContainer和AccordionContainer中的某一種容器裡。FloatingPane也不例外，可以將許多widget作為子組件形成嵌套。

        需要注意的一點：嵌套其他widget時，需要引入相應的widget，方法見本節的第二部分。

case 1 ：頁面載入一個FloatingPane，在其內部載入另一個FloatingPane

當頁面運行時，載入一個內嵌FloatingPane的FloatingPane

<div dojoType="FloatingPane"
 title="inner window w/shadow"
 constrainToContainer="true"
 hasShadow="true"
 resizable="true"
 displayMinimizeAction="true"
 displayMaximizeAction="true"
 displayCloseAction="true"
 iconSrc="images/note.gif"
 style="width: 300px; height: 200px; left: 600px;"
>
  outer floatingpane。

   <div dojoType="FloatingPane"
     title="Inner window"
     constrainToContainer="1"
     style="left: 20px; top: 60px; width: 120px; height: 80px;"
   >
     inner floatingpane。
   </div>

</div>

 

case 2 ：頁面載入一個FloatingPane，在其內部載入TabContainer

當頁面運行時，載入一個內嵌含有兩個標籤頁的TabContainer的FloatingPane

<div dojoType="FloatingPane" id="tfp" title="Tabbed Floating Pane" hasShadow="true" resizable="true" style="width: 300px; height: 300px;">
 <div dojoType="TabContainer" id="tabs" layoutAlign="client">
  <div dojoType="ContentPane" label="tab1">Tab1 Content</div>
  <div dojoType="ContentPane" label="tab2">Tab2 Content</div>
 </div>
</div>

 

case 3 ：頁面載入一個FloatingPane，在其內部載入LayoutContainer

當頁面運行時，載入一個內嵌LayoutContainer的FloatingPane

<div dojoType="FloatingPane"
 title="Layout window w/shadow"
 constrainToContainer="true"
 hasShadow="true"
 resizable="true"
 displayMinimizeAction="true"
 displayMaximizeAction="true"
 iconSrc="images/save.gif"
 style="width: 300px; height: 200px; top: 600px; left: 400px;"
>
 <div dojoType="ContentPane" layoutAlign="top" style="border: solid white;">TOP</div>
 <div dojoType="ContentPane" layoutAlign="bottom" style="border: solid white;">BOTTOM</div>
 <div dojoType="ContentPane" layoutAlign="left" style="border: solid white;">LEFT</div>
 <div dojoType="ContentPane" layoutAlign="right" style="border: solid white;">RIGHT</div>
 <div dojoType="ContentPane" layoutAlign="client" style="border: solid white;">CENTER</div>
</div>

case 4 ：頁面載入一個FloatingPane，在其內部載入Tree

當頁面運行時，載入一個內嵌Tree的FloatingPane

<div dojoType="FloatingPane"
 title="Content pane is tree"
 constrainToContainer="true"
 hasShadow="true"
 resizable="true"
 displayMinimizeAction="true"
 displayMaximizeAction="true"
 contentWrapper="none"
 style="width: 300px; height: 200px; top: 100px; left: 400px;"
>
 <div dojoType="Tree" publishSelectionTopic="treeSelected" toggle="fade" widgetId="firstTree">
     <div dojoType="TreeNode" title="Item 1">
         <div dojoType="TreeNode" title="Item 1.1"><br/></div>
         <div dojoType="TreeNode" title="Item 1.2">
             <div dojoType="TreeNode" title="Item 1.2.1"></div>
             <div dojoType="TreeNode" title="Item 1.2.2"></div>
         </div>
         <div dojoType="TreeNode" title="Item 1.3">
             <div dojoType="TreeNode" title="Item 1.3.1"></div>
             <div dojoType="TreeNode" title="Item 1.3.2"></div>
         </div>
         <div dojoType="TreeNode" title="Item 1.4">
             <div dojoType="TreeNode" title="Item 1.4.1"></div>
         </div>
     </div>
 </div>
</div>

 

case 5 ：頁面載入一個FloatingPane，在其內部載入另一個頁面

當頁面運行時，載入一個內嵌另一個頁面內容的FloatingPane

<div dojoType="FloatingPane" style="width: 300px; height: 300px; left: 100px; top: 100px;" href="doc0.html" executeScripts="true" title="externally loaded">

</div>

 

case 6 ：頁面載入一個FloatingPane，在其內部載入Button

當頁面運行時，載入一個內嵌button的FloatingPane

<div dojoType="FloatingPane" style="width: 300px; height: 300px; left: 100px; top: 100px;" href="doc0.html" executeScripts="true" title="externally loaded">

     <div id="modify" dojoType="Button" style="width:70px; height:25px" >  OK  </div>

</div>

       …………………………

以上列出的僅僅是幾種情況，大家可以根據實際需求，應用更多的情況。

 

 

第五部分，FloatingPane widget 的綜合應用執行個體

實現的功能：當首頁面載入時，頁面顯示一個button，當點擊button時觸發隱藏的FloatingPane。

分析頁面內容：首頁面——button（顯示）——單擊事件——JavaScript

                   首頁面——引入包——FloatingPane（隱藏）——button觸發

範例程式碼：

1. 引入包的方法及內容：詳見本小節的第二部分。

<script language="JavaScript" type="text/javascript">
 dojo.require("dojo.widget.FloatingPane");

 dojo.require("dojo.widget.Button");
 dojo.require("dojo.widget.TabContainer");
</script>

2. 單擊事件JavaScript：

<script language="JavaScript" type="text/javascript">
 var fp;
 function init(e){
  fp=dojo.widget.byId("floatpane");  
 }
 dojo.addOnLoad(init);
</script>

3. 首頁面的button

<input id="dd" type="button" value="點擊觸發浮動視窗" onClick="javascript:fp.show();"/>

4. 首頁面的floatingpane

        <div id="floatpane" dojoType="FloatingPane" title=" Widget Settings" constrainToContainer="true" iconSrc="images/edit.gif" hasShadow="true" resizable="true" displayMinimizeAction="true" displayMaximizeAction="true" displayCloseAction="true" style="width: 530px; height: 400px; left: 200px; display:none">
            <div id="mainTabContainer" dojoType="TabContainer" style="width: 500px; height: 300px" selectedTab="tab1">
                <div id="tab1" dojoType="ContentPane" label="Settings">
                    <table width="400" border="0" cellspacing="0" cellpadding="0">
                        <tr height="20px">
                            <td>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td width="35">
                            </td>
                            <td width="350">
                                <span class="STYLE3">
                                    <label id="color" title="color">
                                        Color: Widget Border Color
                                    </label>
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td>
                                <table width="350" border="0" height="25px">
                                    <tr>
                                        <td>
                                            <input type="text" value="" id="nowColor" style="width:400px; height:25px"/>
                                        </td>
                                        <td>
                                            <div id="pageColorViews" style="background:#000; width:50px; height:30px;">
                                            </div>
                                        </td>
                                        <td>
                                        </td>
                                        <td>
                                            <img id="bordercolor" src="images/edit.gif"/>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="tab2" dojoType="ContentPane" label="Advanced">
                    <table width="400" border="0" cellspacing="0" cellpadding="0">
                        <tr height="20px">
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td width="35">
                            </td>
                            <td width="350">
                                <span class="STYLE3">
                                    <label id="title" title="title">
                                        Title: Title of widget
                                    </label>
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="text" id="texttitle" style="width:350px; height:25px"/>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <span class="STYLE3">
                                    <label id="version" title="version">
                                        Version: Version of widget(1.0.0)
                                    </label>
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="text" id="textversion" style="width:350px; height:25px" value="1.2.0"/>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <table width="400" border="0" cellspacing="0" cellpadding="0">
                <tr height="20px" style="width:200px">
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td style="width:100px">
                    </td>
                    <td align="center">
                        <div id="modify" dojoType="Button" style="width:70px; height:25px" onClick="javascript:modifyTitle();">
                            OK
                        </div>
                    </td>
                    <td align="center">
                        <div id="cancel" dojoType="Button" style="width:70px; height:25px" onClick="javascript:modifyTitle();">
                            cancel
                        </div>
                    </td>
                </tr>
            </table>
        </div>
     </div>

 

小結：

       囉裡囉嗦的寫了上面那麼多，希望大家能夠明白，希望對學習者有所協助。