掌握Dojo工具包，第5部分:Dojo的UI组件库 - Dijit

掌握Dojo工具包，第5部分:Dojo的UI组件库 - Dijit2010-07-04 IBM 蒋贤礼牟磊谢福生Dijit 简介

从 Dojo 0.9 开始，Dojo 把 Widget 从 Dojo 的核心包中分离出来，组成 Dijit 。Dojo 在 Dijit 中为 Widget 家族添加了多位成员，增强了 Widget 的实力的同时也加快了其在页面中的加载速度。

为改善 Widget 的外观，Dijit 提供了多套样式主题，比如默认绑定的样式主题 Tundra，提高页面可访问性的样式主题 A11y，以及其它两种可供选择的主题 Soria 和 Nihilo 。并且开发人员还可以根据自身项目的需求开发个性化的主题。同时 Dijit 对国际化和针对残障人士的可访问性的支持成度很高。可以说 Dijit 已成为 Dojo 工具包中三辆马车之一。

本文将会详细介绍 Dijit 中的 Widget 的使用。由于 Dojo Widget 数量众多，不能一一介绍。为此从功能的角度把 Widget 分为三类：表单 Widget，布局 Widget，高级 Widget 。在每个类别中选择代表性的 Widget 结合示例加以介绍。

表单 Widget 的使用

在有用户概念的 Web 应用中，注册是一项必不可少的功能，同时注册也是有点枯燥的任务。有个不争的事实就是：没人喜欢填表单——无论是网上还是网下。所以设计有效的页面表单不是件容易的事情。如果不能改变注册表单存在的事实，那么就要改变表单枯燥令人生厌的现状，让表单或整个注册过程变得轻松省力。为实现这个目标，Web 开发人员会把较长的注册表单设计成标签的形式；当用户填错信息时，利用 Javascript 和正则表达式的结合给用户一些提示信息；设计方便的日期选择组件等等。可是这些提高用户友好性的努力往往会给开发人员增加很大的工作量，并且确保这些组件的浏览器无关性也不是一件容易的事情。

有没有更简便的方法来开发 Web 表单呢？当然有！Dijit 为 Web 开发人员提供了一系列的表单 Widgets，利用这些表单 Widgets，Web 开发人员可以轻松的设计出功能强大、用户友好性高的表单。

表单 Widget 简介

可以说每一个 HTML 表单控件都可以在 Dijit 找到与其对应的表单 widgets 。下面列表列出了目前 Dijit 提供的 Form Widgets：

Form – 类似于 HTML 的 [form] 控件，同时提供了一些有用的方法和扩展点；

Button – 类似于 HTML 的 [button] 风格的控件，同时增加了一些高级的特性；

CheckBox

RadioButton

ToggleButton

ComboBox – 类似于 HTML 的 [select] 组合框和 [text] 域控件的结合体。可以像 [select] 组合框那样提供一列可选值；同时允许用户忽略这些可选值，而像在 [text] 域控件里那样输入自己想要输入的任何值；

FilteringSelect – 类似于 HTML 的 [select] 控件，可以动态填充可选项，并且可以按需设置加载选项的数量；

Textbox – 类似于 HTML 的 [text] 控件，同时提供一系列很酷的功能：可以裁空，改变大小写，设置必填，验证输入合法性，日期组件等；

Validation

Currency

Date, Time

Integer