小部件Dojo Mobile 附带很多小部件，它们是专门针对移动设备设计和优化的，比如智能手机和平板电脑。这些小部件包括布局组件（视图）、列表、导航栏、标签栏、按钮和表单。本节讲解许多小部件的作用并提供基本代码示例。本节中的屏幕图取自使用 iPhone 主题的 iOS 设备；如果使用 Android 主题，屏幕会有差异。
ViewView 是一个容器小部件，它占据设备屏幕上的所有可用空间。应用程序的页面可以包含多个 View 对象，但是只有其中的一个是在任何时候都处于活跃状态的。用户通常可以使用工具栏按钮和标签栏按钮在不同的视图之间切换，在视图之间移动时可以获得各种渐变效果。图 2 给出一个空的 View 示例。
图 2. 空的 View 对象 使用 Dojo 基本 SDK 中的 dojox.mobile.View 类创建 View 对象。不需要使用 dojo.require 显式地装载它。在使用 View 对象时，使用 selected 属性决定在启动应用程序时是否应该显示这个视图（启动视图）。以声明方式创建以上 View 需要以下代码。
1
| <div dojoType="dojox.mobile.View" selected="true"></div>
|
也可以使用 JavaScript 以程序方式创建 View。清单 4 给出使用这种方法创建图 2 中的 View 的代码。
清单 4. 创建 View1
2
3
4
| var myView = new dojox.mobile.View({
selected: true
}, "myView");
myView.startup();
|
清单 4 假设在 HTML 中有一个块元素，其 id 属性值是 myView。它在 DOM 中把一个 View 对象绑定到这个元素。
后面对小部件的讨论涉及如何仅以声明方式使用它们。关于如何用程序语法使用 Dojo Mobile 小部件的更多信息，请查阅 。
ScrollableViewScrollableView 小部件与 View 小部件相似：它作为放置其他小部件的容器。主要差异是，对于 ScrollableView，如果内容超过屏幕的高度，用户可以通过触摸屏幕并上下移动滚动内容（如果使用水平滚动，就是左右移动），而页眉和页脚对象保持不动。如果使用标准的 View 对象，会滚动整个屏幕，页眉和页脚不会留在固定的位置。图 3 给出一个示例。
图 3. 空的 ScrollableView 对象 创建空的 ScrollableView 对象与创建空的 View 对象（）非常相似。创建空的 ScrollableView 的代码是：
1
| <div dojoType="dojox.mobile.ScrollableView" selected="true"></div>
|
建议只在希望在视图中添加固定的页眉或页脚时使用 ScrollableView。否则，应该使用常规的 View 类。
与常规的 View 类不同，基本类中不包含 ScrollableView，所以需要用 dojo.require 显式地装载它。
FlippableViewFlippableView 小部件（在 1.7 版中将变成 SwapView）可以创建一个容器对象，可以通过触碰屏幕左边或右边切换为其他 FlippableView 对象。视图的次序取决于它们在代码中的次序。图 4 显示一个 FlippableView 小部件。
图 4. FlippableView 小部件  如果希望创建包含两个视图的 FlippableView，可以使用清单 5 中的代码。如果使用 Dojo 1.7，要把 FlippableView 改为 SwapView。
清单 5. 创建包含两个视图的 FlippableView1
2
| <div dojoType="dojox.mobile.FlippableView" selected="true">View 1</div>
<div dojoType="dojox.mobile.FlippableView">View 2</div>
|
基本类中不包含 FlippableView，所以需要用 dojo.require 人工装载它。
HeadingHeading 小部件可以创建导航栏，导航栏出现在应用程序的顶部。Heading 对象常常包含标题。还可以在其中添加导航元素（比如 Back 按钮）或工具栏按钮，从而提供简便的应用程序导航方法。
如果在 ScrollableView 容器中使用 Heading，Heading 小部件会固定在应用程序的顶部，而应用程序的其余部分会滚动。这让用户一直可以使用导航元素。图 5 给出一个 Heading 对象示例，它包括标题、Back 按钮和工具栏按钮。
图 5. Heading 小部件示例 创建图 5 中的 Heading 小部件的代码见清单 6。
清单 6. 创建 Heading 小部件1
2
3
4
5
6
| <h1 dojoType="dojox.mobile.Heading" label="My App" back="Back"
moveTo="back">
<div dojoType="dojox.mobile.ToolBarButton" label="Edit"
class="mblColorBlue" style="width:25px;float:right">
</div>
</h1>
|
您可能会注意到，Back 按钮实际上是在 Heading 元素内定义的。back 属性定义在按钮中应该显示的文本。moveTo 属性应该包含当用户按 Back 按钮时应该激活的 View 对象的 ID。还可以使用 transition 属性定义在以这种方式导航到另一个视图时应该使用的渐变效果。默认设置是 slide，其他选项包括 fade、flip 和 none。
可以使用 ToolBarButton 小部件定义其他导航按钮。如果希望获得与左边的 Back 按钮样式不同的按钮，或者希望在右边显示按钮，只需在 Heading 元素中添加 ToolBarButton 对象。
RoundRectRoundRect 类可以创建简单的圆角容器，可以在其中放置静态 HTML 或其他 Dojo Mobile 小部件。RoundRect 小部件的示例见图 6。
图 6. 使用 RoundRect 容器 要想创建图 6 中的 RoundRect 对象，可以使用清单 7 所示的语法。
清单 7. 创建 RoundRect 对象1
2
3
| <div dojoType="dojox.mobile.RoundRect" shadow="true">
This is a simple RoundRect object with some content in it.
</div>
|
RoundRect 类非常简单。它只接受一个属性 shadow，在默认情况下设置为 false。这个属性只定义容器是否应该有阴影。
RoundRectCategory 和 RoundRectList在移动设备上显示数据时，列表非常重要。可以使用垂直的表格结构显示一系列列表项。可以使用列表项显示用于导航或其他用途的信息。Dojo Mobile 允许创建两种列表，它们都有相关联的类别小部件。RoundRectList 创建的列表的两边有间隙，在第一个和最后一个列表项上有圆角。图 7 显示在 iPhone 上看到的 RoundRectCategory 和 RoundRectList。
图 7. RoundRectList  这个示例定义一个 RoundRectCategory，其中包含标签 "List Heading" 和一个包含三个 ListItem 对象的 RoundRectList 对象。清单 8 给出创建这些小部件的代码。
清单 8. 创建 RoundRectCategory 和 RoundRectList 小部件1
2
3
4
5
6
| <h2 dojoType="dojox.mobile.RoundRectCategory">List Heading</h2>
<ul dojoType="dojox.mobile.RoundRectList">
<li dojoType="dojox.mobile.ListItem">List Item 1</li>
<li dojoType="dojox.mobile.ListItem">List Item 2</li>
<li dojoType="dojox.mobile.ListItem">List Item 3</li>
</ul>
|
|
