Dojo框架简单应用
Dojo框架是一个具有许多功能的丰富库，包括：处理html、字符串、样式、DOM、正则表达式和若干其他实用工具的通用库；包括字典、ArraryLists、队列、SortedList、设置和堆栈的数据结构；用于添加动画效果、验证、拖放和若干其他功能的可视化Web实用工具；数学和加密库、存储组件和XML解析等类库。
其中对于创建美观的HTML页面，Dojo框架为开发Web胖客户端程序提供了一套完整的Widget和一些特效操作。Dojo提供了可以用于构建页面的一组丰富的标记。Dojo的众多优点之一是允许使用标准的HTML标记。Dojo框架UI组件的特点是通过给html标签增加tag的方式进行扩展，而不是通过写JS来生成。这样，HTML开发人员就可以方便地使用Dojo。
Dojo 0.9框架具有标记有下面几个：
1．文本框的扩展
首先看下对文本框这个表单元素的扩展。在Dojo框架中，文本框的使用方式如下所示：
<FORM>
姓: <input type="text" length="20" name="first"  dojoType="dijit.form.Textbox"
trim="true" ucfirst="true" /><br/>
名: <input type="text" length="20" name="last"  dojoType="dijit.form.Textbox"
trim="true" ucfirst="true"  /><br/>
邮件地址: <input type="text" length="20" name="email"  dojoType="dijit.form.Textbox"
lowercase="true"/><br/>
在上述代码中，使用Dojo框架标记扩展了文本框的功能。其中，把trim设为“true”使得dijit.form.Textbox在数据前后去除空格，当文本框失去焦点，dojo自动的修改内容，并放回文本框中。去除空格对数据库操作常常非常有用，因为首尾的空格经常导致查询失效。ucfirst和lowercase属性非常的相近。分别是让输入的字母大写和输入小写，当文本框失去
焦点，ucfirst只改变小写的字母，所有大小的字母都保持不变。同样lowercase只改变大小字母。
2．内嵌编辑框
当不在编辑状态的时候，这个部件表现的像一个<div> 标签，当被包含的文字被单击的时候，部件就进入了编辑状态。在这个状态下，之前显示的文字被隐藏，另外一个编辑部件在同一位置显示出来。
该部件所具有的其他属性标记，如表9-3所示：
表9-3  内嵌编辑框属性
名称
返回类型
说明
editing
Boolean
判断节点是否处于编辑状态
saveButton
String
保存按钮的标签
cancelButton
String
取消按钮的标签
该编辑框的使用示例如下所示：
<script type="text/javascript">
        quire("dojo.parser");
        quire("dijit.form.Textarea");
        quire("dijit.form.InlineEditBox");
</script>
<span dojoType="dijit.form.InlineEditBox"> 
  <textarea dojoType="dijit.form.Textarea">edit me</textarea>
</span>
在上述代码中，可变大小文本域部件是可编辑的部件。缺省显示的文字（edit me）在单击后可以被修改。
可编辑部件可以是实现了接口（setTextValue(String value);String value = getTextValue();void focus();）的任何部件。可编辑部件的setTextValue()方法被之前显示的文字所调用。当保存按钮按下，可编辑部件的getTextValue()方法被调用来获得新的文字。之后，可编辑部件被隐藏，返回的文字被显示。 focus 方法允许编辑中的部件把焦点设置在合适的节点上。
3．工具提示
工具提示类似于传统html中的title=“”属性，但是要更加灵活。可以控制显示的时间，还可以以任意的html方式来显示文本内容。Style="display:none"在工具提示中总是使用，否则在鼠标移动到要显示提示的地方之前就会显示提示。
该组件属性如表9-4所示：
表9-4  工具提示属性
名称
说明
caption
工具提示显示的文本，也可以指定为innerHTML
connectId
需要显示工具提示的Id
hideDelay
当鼠标移出对象的时候，等待一定时间后（毫秒）工具提示消失
showDelay
在提示显示之前等待的时间（毫秒）
工具提示的使用示例如下所示：
<script>...quire("dijit.Tooltip");</script>
quire("dojo.parser");
...
<span id="wordOfTheDay">longanimity</span>
<span dojoType="dijit.Tooltip"        js文字动画特效
  connectId="wordOfTheDay"       
  >"a disposition to bear injuries patiently : forbearance"</span>
4．调板
可以在html页面用表格来显示不同的颜，用户可以自己选择。
调板所具有属性如表9-5所示：
表9-5  调板属性标记
属性/事件
说明
palette
7x10 3x4 7x10 表格的尺寸，用行和列来表示
selectedColor
用HTML的16进制表示选中的演示，例如"ffffff"和，"#ffffff"或者 or color="white"一样表示白。
onColorSelect
事件，当一种颜被单击或者用键盘选中时调用
其使用示例如下所示：
<script language="JavaScript" type="text/javascript">...
    quire("dijit.ColorPalette");
    quire("dijit.util.parser");
</script>
...
<form name="easterForm">
<div dojoType="dijit.ColorPalette"
    onColorSelect="Color.value=this.selectedColor);"></div>
<input type="hidden" name="eggColor" value="" />
当然Dojo除了上面提供的这些标记之外，还有很多功能强大和外观漂亮的标记，如菜单，标题栏等。这里就不再介绍，有兴趣的读者可以登录Dojo框架的查阅和学习。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。