学习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"
            οnclick="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的内容已经学习完了！希望大家可以举一返三，熟练的使用它们！

 

转载于:https://www.cnblogs.com/penny/archive/2008/09/19/1293952.html