本文是由三部分组成的系列文章的第 2 部分，通过丰富的代码示例来探索这些新功能。在第 2 部分中，将了解现有 Dojo Mobile 小部件和模块中的功能。
本系列的 第 1 部分 介绍了 Dojo Mobile 1.8 中许多可用于移动 Web 应用程序的新小部件和模块。Dojo Mobile 1.8 还包含对现有 Dojo Mobile 特性的许多新增强。本文将详细分析这些增强。
列表
可编辑列表
如果一个列表小部件（EdgeToEdgeList 或 RoundRectList）的 editable 属性为 true，那么用户可以重新排序列表中的项目。要进入编辑模式，可以获取列表小部件的引用并调用 startEdit() 方法。然后，对于每一项，左侧都会出现一个删除图标，右侧都会出现一个移动手柄图标。
用户可通过拖动移动手柄来移动一个项目，如 图 1 中间的屏幕截图所示：
图 1. 可编辑列表小部件
Autoscrolling 尚未实现。因此无法在您拖动一个项目时滚动列表。
当用户触摸删除图标时，除了发布 /dojox/mobile/deleteListItem 主题，列表小部件不会执行任何操作。应用程序必须订阅该主题，然后才能触摸该图标来执行相应的操作，比如显示一个删除按钮，以便确认（如 图 1 中右侧的屏幕截图所示）或删除选定的项目。请参见 Dojo Mobile 每日构建版测试中的 tests/test_RoundRectList-editable.html，获取完整的示例。
清单 1 显示了如何在标记中实例化一个可编辑的 RoundRectList：
清单 1. 一个可编辑 RoundRectList 的示例
<ul data-dojo-type="dojox.mobile.RoundRectList" data-dojo-props='editable:true'> <li data-dojo-type="dojox.mobile.ListItem"> ...</ul>
类别标题
无需使用 EdgeToEdge">Category 小部件，您可为 ListItem 指定 header:true，以创建类别标题，如 清单 2 中所示：
清单 2. 类别标题的示例
<ul data-dojo-type="dojox.mobile.EdgeToEdgeList"> <li data-dojo-type="dojox.mobile.ListItem">Item 1</li> <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='header:true'>Category</li> <li data-dojo-type="dojox.mobile.ListItem">Item 2</li> <li data-dojo-type="dojox.mobile.ListItem">Item 3</li></ul>
清单 2 实现了 图 2 中所示的类别标题：
图 2. 类别标题
在通过一个数据存储向列表小部件提供数据时，此功能特别有用。清单 3 显示了一个 JSON（JavaScript Object Notation，JavaScript 对象表示法）数据的示例，其中包含具有 header:true 的项：
清单 3. 包含类别标题的 JSON 数据
[ { label: "Category 1", header: true }, { label: "Wi-Fi", icon: "i-icon-1.png", moveTo: "wifi" }, { label: "Brightness & Wallpaper", icon: "i-icon-2.png", moveTo: "bright" }, { label: "Picture Frame", icon: "i-icon-3.png", moveTo: "picture" }, { label: "General", icon: "i-icon-4.png", moveTo: "general", "selected": "true" }, { label: "Mail, Contacts, Calendars", icon: "i-icon-5.png", moveTo: "wifi" }, { label: "Safari", icon: "i-icon-6.png", moveTo: "bright" }, { label: "
iPod", icon: "i-icon-7.png", moveTo: "picture" }, { label: "Category 2", header: true }, { label: "Video", icon: "i-icon-8.png", moveTo: "general" }, { label: "Photos", icon: "i-icon-9.png", moveTo: "wifi" }, { label: "Store", icon: "i-icon-10.png", moveTo: "bright" }];
清单 3 实现了 图 3 中所示的列表：
图 3. 包含类别标题的列表