EdgeToEdgeCategory 和 EdgeToEdgeListEdgeToEdgeList 与 RoundRectList 很相似。可以以完全相同的方式使用 EdgeToEdgeList，但是它创建的列表占据视图的全部宽度。图 8 给出一个示例。
图 8. EdgeToEdgeList  EdgeToEdgeList 的代码几乎与前一个示例完全相同，只是 RoundRect 的引用替换为 EdgeToEdge，参见清单 9。
清单 9. 创建 EdgeToEdge 小部件1
2
3
4
5
6
| <h2 dojoType="dojox.mobile.EdgeToEdgeCategory">List Heading</h2>
<ul dojoType="dojox.mobile.EdgeToEdgeList">
<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>
|
通常使用上面的列表显示人名列表，人名一般按姓氏的第一个字母分组。
IconContainer可以使用 IconContainer 小部件定义一系列图标，触碰图标时，每次都会打开一个单独的容器。IconItem 对象可以从嵌套在自身中的容器（在同一视图上）中滑出，也可以把当前活跃的 View 切换为具有给定 ID 的视图。图 9 显示一个包含三个图标的 IconContainer。
图 9. IconContainer 示例 使用清单 10 所示的代码创建上面的 IconContainer。
清单 10. 创建 IconContainer 小部件1
2
3
4
5
6
7
8
| <ul dojoType="dojox.mobile.IconContainer">
<li dojoType="dojox.mobile.IconItem" label="Icon 1"
icon="appicon.png" moveTo="view1"></li>
<li dojoType="dojox.mobile.IconItem" label="Icon 2"
icon="appicon.png" moveTo="view2"></li>
<li dojoType="dojox.mobile.IconItem" label="Icon 3"
icon="appicon.png" moveTo="view3"></li>
</ul>
|
_base.js 中不包含 IconContainer 类，所以需要用 dojo.require 显式地装载它。但是，IconItem 不是这样，所以不要人工装载它，否则在运行应用程序时会出现错误。
还有更多关于这些小部件的详细信息，但是它们超出了本文的范围。请通过 中的链接进一步了解 Dojo Mobile Showcase 和 API。
Button可以使用 Button 类创建简单的按钮对象。然后，可以使用 dojo.connect 在这个小部件上创建处理 "click" 等事件的代码。图 10 给出一个示例。
图 10. Button 小部件  创建这个按钮的代码很简单，参见清单 11。
清单 11. 创建 Button 小部件1
2
| <button dojoType="dojox.mobile.Button" btnClass="mblBlueButton"
style="width: 100px">Click me!</button>
|
可以使用 CSS 创建新的按钮风格并使用 btnClass 属性把类名分配给按钮。
SwitchSwitch 对象是一个开关控件，可以在两个值之间切换对象的值。在默认情况下，值是 ON 或 OFF。改变开关值的方法是，触碰希望切换到的值，或者把开关滑动到目标值。图 11 给出 Switch 小部件的示例，其中有两个开关：一个在 OFF 位置上，另一个在 ON 位置上。
图 11. Switch 示例 下面的代码创建一个 Switch 对象。
1
| <div dojoType="dojox.mobile.Switch" value="off"></div>
|
Switch 小部件还接受另外两个属性 leftLabel 和 rightLabel，它们分别定义在开和关状态下应该显示的值。在默认情况下，标签是 ON 和 OFF。当改变 Switch 的值时，会触发 onStateChanged 事件。可以使用 dojo.connect 处理这个事件。
TabBarTabBar 小部件用于在触碰 TabBarButton 时激活或取消激活视图，从而把 View 对象换入或换出应用程序。TabBar 小部件可以使用 iconBase 属性定义图像 sprite，在每个 TabBarButton 中显示不同的图标。当使用 TabBar 作为应用程序底部的导航组件时，这样做效果很好，参见图 12。
图 12. 包含图标的 TabBar 还可以使用 TabBar 组件和 segmentedControl 的 barType 属性。这样创建的标签栏通常适合放在应用程序顶部的主 Heading 小部件下面。图 13 给出这种 TabBar 的示例。
图 13.把 barType 设置为 segmentedControl 的 TabBar 清单 12 中显示了创建图 13 中的 TabBar 的代码。
清单 12. 创建 TabBar 小部件 1
2
3
4
5
6
| <ul dojoType="dojox.mobile.TabBar" barType="segmentedControl">
<li dojoType="dojox.mobile.TabBarButton" moveTo="view1"
selected="true">Albums</li>
<li dojoType="dojox.mobile.TabBarButton"
moveTo="view2">Events</li>
</ul>
|
TabBarButton 类有许多配置选项，可以用它们定制按钮的外观。可以指定图标的位置、应该使用的图标、改变视图时使用的渐变、完成渐变时触发的回调函数等等。更多信息见 。 |
