學習Ajax架構之dojo：第十二節——Dojo的General Widget（下）（附原始碼）

接學習Ajax架構之dojo：第十一節——Dojo 的General Widget（上），現在來看一下其他的widget的用法。

 

1. Fisheye：“魚眼”動畫效果

Fisheye是一個比較特殊的動畫效果，當滑鼠靠近表徵圖時，表徵圖的尺寸會越來越大，最終達到如下的：

 

   

引入FisheyeList包：dojo.require("dojo.widget.FisheyeList")

接著，我們一起看一下範例程式碼：

<div dojoType="FisheyeList"
 itemWidth="40" itemHeight="40"
 itemMaxWidth="150" itemMaxHeight="150"
 orientation="horizontal"
 effectUnits="2"
 itemPadding="10"
 attachEdge="center"
 labelEdge="bottom"
 conservativeTrigger="true"
>

      <div dojoType="FisheyeListItem"
            id="item1b"
            onclick="alert('click on' + this.caption + '(from widget id ' + this.widgetId + ')!');"
            caption="Item 1"
            iconsrc="images/fisheye_1.png">
      </div>

      <div dojoType="FisheyeListItem" caption="Item 2" iconsrc="images/fisheye_2.png"></div>

      <div dojoType="FisheyeListItem" caption="Item 3" iconsrc="images/fisheye_3.png"></div>

      <div dojoType="FisheyeListItem" iconsrc="images/fisheye_4.png"></div>

      <div dojoType="FisheyeListItem" caption="Really Long Item Label" iconsrc="images/fisheye_3.png"></div>

      <div dojoType="FisheyeListItem" iconsrc="images/fisheye_2.png"></div>

      <div dojoType="FisheyeListItem" iconsrc="images/fisheye_1.png"></div>
</div>

如果我們需要自動添加FisheyeList，該如何編輯呢？比如，當點擊button時，會在Fisheye特校的表徵圖序列前面添加一個表徵圖。那麼，只需要添加一個function。

 var counter = 1;
 function addToFirstList(){
  var fl = dojo.widget.byType("FisheyeList")[0];
  var item = dojo.widget.createWidget("FisheyeListItem", {
    caption: "Dynamically Added "+counter,
    iconSrc: "images/fisheye_"+counter+".png"
   }
  );
  counter++;
  fl.addChild(item);
 }

 

2. InlineEditBox：本地編輯框

      InlineEditBox是可編輯文本的編輯框。使用方法：自訂一句話，當頁面載入時，會顯示自訂的內容，如：Edit me - I will trigger a custom onSave Handler。當點擊這句話時，會出現含有save和cancel的編輯框。：

下面，來看一下上面的實現過程。

方法一：

<h1 id="editable" dojoType="inlineEditBox">Edit me - I will trigger a custom onSave Handler</h1>

 dojo.require("dojo.widget.*");
 dojo.require("dojo.widget.InlineEditBox");
 dojo.require("dojo.event.*");

 function saveHandler(newValue, oldValue) {
       dojo.debug("New Value: " + newValue + " Old Value: " + oldValue);
 }

 function init() {
       var editable = dojo.widget.byId("editable");
       editable.onSave = saveHandler;
 }

 dojo.addOnLoad(init)

方法二：

<p dojoType="inlineEditBox" mode="textarea">Edit me - I will trigger a custom onSave Handler</p>

 

 

3. SortableTable/FilterTable：可排序表格

FilterTable是Dojo0.4版本中新增的widget，它是SortableTable的升級版本。

樣本效果：當點擊表單的標題列的一項時，如id，該列的資料會按照升序、降序交替顯示排序後的效果。其他的標題列功能一致，不再贅述。

引入包：dojo.require("dojo.widget.*");

範例程式碼：

<div class="tableContainer">
     <table dojoType="SortableTable" widgetId="testTable" headClass="fixedHeader" tbodyClass="scrollContent" enableMultipleSelect="true" enableAlternateRows="true" rowAlternateClass="alternateRow" cellpadding="0" cellspacing="0" border="0">
          <thead>
                 <tr>
                      <th field="Id" dataType="Number">Id</th>
                      <th field="Name" dataType="String">Name</th>
                      <th field="DateAdded" dataType="Date" sort="asc">Date Added</th>
                      <th field="DateModified" dataType="Date" format="%b %d, %Y">Date Modified</th>
                      <th dataType="html">Label</th>
                 </tr>
          </thead>
          <tbody>
               表單資料省略……
          </tbody>
     </table>
</div>

屬性說明：

headClass和tbodyClass是CSS樣式；enableMultipleSelect是否允許多選；enableAlternateRows是否使用交替顯示方式；rowAlternateClass交替顯示時使用的CSS樣式

擷取被選中的行號：

  function showSelected(){
        var w=dojo.widget.byId("testTable");
        if(w){
              var s=w.getValue();
              if(s.length>0) alert(s);
              else alert("No rows are selected.");
        }
  }

 

 

4. Clock：時鐘

引入包：dojo.require("dojo.widget.Clock")

情況一：直接載入時鐘
<div id="clock1" dojoType="clock"></div>

情況二：載入時差為-8小時的時鐘

 function init(){
      //動態建立時鐘
      dojo.widget.createWidget(
            "dojo:clock",
            //時差為-8小時
            {timeZoneOffset:-8,label:"-8 HR"},
            dojo.byId("clock2")
      );
 }
 dojo.addOnLoad(init);

<div id="clock2"></div>

 

 

5. Chart：圖表

引入包：dojo.require("dojo.widget.Chart")

chart的使用方法：

<div dojoType="chart">
     <table padding="12 12 20 30" axisAt="0 xmin" rangeX="0 100" rangeY="-100 100">
          <thead>
               <tr>
               <th>X</th>
               <th plotType="line">Series A</th>
               </tr>
          </thead>
          <tbody>
                表格式資料省略……
          </tbody>
     </table>
</div>

 

 

6. Tooltip：工具提示

引入包：dojo.require("dojo.widget.Tooltip")

首先，看一下頁面載入時的。

 

當滑鼠靠近text時，會發生什麼變化呢？如所示：

 

接下來，介紹Tooltip的使用方法。如何?上面的效果？關鍵的屬性是什麼呢？

  <span id="test">text</span>
  <span dojoType="tooltip" connectId="test" caption="how to use Tooltip?"></span>

tooltip小結：經過其他的小測試（這裡省略給出）發現，只要使用connectId綁定id，即使使用href載入html也可以實現同樣的效果。

 

 

7. SlideShow：投影片播放

引入包：dojo.require("dojo.widget.SlideShow")

SlideShow的使用方法：

<img dojoType="SlideShow" imgUrls="images/1.jpg;images/2.jpg" transitionInterval="700" delay="7000" src="images/1.jpg"

    imgWidth="400" imgHeight="300" />

運行效果：imgUrls所指定的圖片（images目錄下的1.jpg和2.jpg）每隔7s切換一次，切換過程的期間是700ms。

 

 

8. GoogleMap：調用Google地圖服務

引入包：dojo.require("dojo.widget.GoogleMap")

GoogleMap的使用方法：

<div dojoType="googlemap" id="mapTest" datasrc="mapData"></div>
說明：Google地圖，資料來自於mapData表格

 

 

9. YahooMap：調用Yahoo地圖服務

引入包：dojo.require("dojo.widget.YahooMap")

YahooMap的使用方法：

<div dojoType="yahoomap" id="mapTest" datasrc="mapData"></div>
說明：Yahoo地圖，資料來自於mapData表格

 

 

General Widget小結：

到目前為止，Dojo的General Widget的內容已經學習完了！希望大家可以舉一返三，熟練的使用它們！