在本章中，我们将介绍：
- 使用插入和非插入列表
- 创建自定义编号列表
- 使用嵌套列表
- 使用只读嵌套列表
- 格式化列表中的内容
- 使用拆分按钮列表
- 使用图像图标
- 创建自定义搜索筛选器
- 使用 JavaScript 修改列表
jQuery Mobile 中的简单列表是使用以下代码创建的：
<ul data-role='listview'>
<li><a href='link1'>Item 1</a></li>
<li><a href='link2'>Item 2</a></li>
</ul>前面的代码是一个常规的 HTML 无序列表，您可以在其中添加属性data-role='listview'。框架现在对列表进行了增强，对其进行了样式化，并使其具有移动友好性。它为锚元素添加了一个右箭头，当您点击任何列表项时，链接中的页面将加载到 DOM 中，并在可能的情况下使用 AJAX 转换打开。
插入列表是嵌入在容器中的列表（页面或表单或其他列表）。本食谱向您展示了如何创建插入列表和非插入列表。该配方还强调了在与其他表单控件一起使用非插入列表时需要注意的事项。
从code/06/inset-list源文件夹复制此配方的完整代码。此代码可以使用 URLhttp://localhost:8080/06/inset-list/main.html启动。
-
创建具有三个列表和几个按钮的
main.html，如下代码所示：<div data-role='content'> <a href='#' data-role=button data-theme='b'>Button 1</a> <ul data-role='listview' data-inset='true'> <li data-theme='e'><a href='#'>Item 1</a></li> <li data-theme='e'><a href='#'>Item 2</a></li> </ul> <a href='#' data-role=button data-theme='b'>Button 2</a> <ul data-role='listview'> <li data-theme='e'><a href='#'>Item A</a></li> <li data-theme='e'><a href='#'>Item B</a></li> </ul> <a href='#' data-role=button data-theme='b'>Button 3</a> <ul data-role='listview' style='margin: 15px'> <li data-theme='e'><a href='#'>Item 3</a></li> <li data-theme='e'><a href='#'>Item 4</a></li> </ul> <a href='#' data-role=button data-theme='b'>Button 4</a> </div>
在代码中，第一个列表是插入列表，另外两个是非插入列表。您可以通过将属性data-inset='true'添加到列表中来创建插入列表。这使列表具有圆角的样式，并且在所有四个边上都有15px的良好边距。如果将按钮或任何其他表单控件放置在插入列表旁边，则会自动调整布局。
代码中的下一个列表是非插入列表，没有data-inset属性。框架在这个列表中添加了一个-15px填充，并将其拉伸以填充整个屏幕宽度。如果将按钮或任何其他表单控件放置在此列表旁边，则由于负数填充，这些控件将相互重叠。此列表有矩形角。
代码中的第三个列表也是非插入列表。但是这里通过使用属性style='margin: 15px'来处理控件的重叠。这会在列表中添加15px的边距，并否定默认的填充。三个列表显示如下屏幕截图所示：
将非插入列表与其他表单控件一起使用时，请添加额外的页边距，以避免控件重叠。
您可以将框架配置为默认情况下在应用中使用插入列表。您可以将listview插件的inset选项设置为true并将其绑定到mobileinit事件，如下代码所示：
$(document).bind('mobileinit',function(){
$.mobile.listview.prototype.options.inset = 'true';
});您可以使用的data-theme属性，将一个主题设置到列表中，如下代码所示。列表使用以下代码中的样例e：
<ul data-role='listview' data-theme='e'>您可以对每个列表项使用data-theme属性，并设置不同的主题。以下代码将样本e设置为列表项项 1，而列表项项 2将使用样本d。
<ul data-role='listview' data-theme='e'>
<li>Item 1</a>
<li data-theme='d'>Item 2</li>
</ul>默认的编号列表在 jQuery Mobile 中使用小数。框架使用 CSS 添加编号。JavaScript 用于不能使用 CSS 的地方。这个食谱向您展示了如何使用 JavaScript 将字母表编号添加到列表中。
从code/06/custom-numbered-list源文件夹复制此配方的完整代码。此代码可以使用 URLhttp://localhost:8080/06/custom-numbered-list/main.html启动。
-
在
main.html中，创建有序和无序列表，如下代码所示：<div data-role='content'> <ol data-role='listview' data-theme='e' data-inset='true'> <li>Soccer</li> <li>Basketball</li> <li>Hockey</li> <li>Tennis</li> </ol> <ul id='alphalist' data-role='listview' data-theme='e' data-inset='true'> <li>Soccer</li> <li>Basketball</li> <li>Hockey</li> <li>Tennis</li> </ul> </div>
-
添加以下脚本，将字母编号添加到无序列表中：
$('#main').live('pageinit', function(event) { var alph = 'a'; $('#alphalist').find('li').each(function() { var str = "<span style='font-weight: normal'>" + alph + '. </span>' + $(this).html(); $(this).html(str); alph = String.fromCharCode(alph.charCodeAt(0)+1); }); });
代码中的第一个列表是有序的列表，默认使用十进制数字。下一个带有id='alphalist'的列表是无序列表。将给定脚本添加到页面容器或main.html的<head>部分。
在脚本中，将pageinit事件绑定到注入字母编号的函数。在此函数中，调用 jQueryfind('li')方法获取列表中的所有列表项。使用 jQueryeach()方法遍历这些项中的每一项。在each()的回调函数中，使用$(this).html()获取列表项的当前文本，并在该文本前面加上字母（带有normal字重）。使用$(this).html(str)将此新字符串（str设置为列表项。最后使用charCodeAt()和fromCharCode()JavaScript 方法增加循环中的字母。显示页面时，两个列表现在显示如下屏幕截图所示：
您可以使用 JavaScript 创建任何类型的编号列表（如罗马数字、小写或大写字母、项目符号等）。但您必须确保使用这些列表处理所有场景（例如，处理嵌套列表的项目编号）。
嵌套列表是嵌入另一个列表的列表项中的列表。默认情况下，列表项上会显示一个右箭头图标，当您单击它时，框架将打开一个单独的子页面以显示嵌套列表。显示的子页面默认使用主题b作为页面标题。该框架可以处理 n 级嵌套。这个食谱向您展示了如何使用嵌套列表，以及如何使用 JavaScript 获取嵌套列表的子页面。
从code/06/nested-list源文件夹复制此配方的完整代码。此代码可以使用 URLhttp://localhost:8080/06/nested-list/main.html启动。
-
在
main.html中，添加以下代码以创建作者列表。向某些作者添加带有书名的嵌套列表。<div data-role='content'> <ul data-role='listview' data-theme='b' data-inset='true'> <li><a href='#'>H.G. Wells</a></li> <li><a href='#'>Rabindranath Tagore</a> <ul data-role='listview' data-theme='a' data-inset='true'> <li><a href='#'>The Gardener</a></li> <li><a href='#'>Gitanjali</a></li> </ul> </li> <li><a href='#'>William Shakespeare</a> <ul data-role='listview' data-theme='a' data-inset='true'> <li><a href='#'>Merchant of Venice</a></li> <li><a href='#'>Romeo and Juliet</a></li> </ul> </li> </ul> <div id='nestedlists'></div> </div>
-
添加以下脚本以获取嵌套列表的子页面：
$('#main').live('pageinit', function(event) { var str = ''; $('ul').listview('childPages').each(function() { str = $(this).find("div[class$='ui-title']").html() + ', ' + str; }); $('#nestedlists').html('Books available for authors : ' + str); });
在代码中，添加作者姓名作为带有锚链接的列表项。为作者拉宾德拉纳特·泰戈尔和威廉·莎士比亚添加带有书名的嵌套列表。作者H.G.Wells没有嵌套列表。
将给定脚本添加到页面容器或main.html中的<head>标记。在脚本中，将pageinit事件绑定到事件处理程序，调用listview 插件的childPages方法。使用 jQueryeach()方法遍历子页面数组。在each()的回调函数中，使用 jQueryfind()方法获取子页面的标题文本。查找具有属性class='ui-title'的标题 div。将此文本连接到一个字符串，在获取所有作者子页后，将此字符串设置为空'nestedlists'div 的内容。这将显示具有嵌套书籍列表的作者列表。作者H.G.Wells没有嵌套列表，因此未显示。
嵌套列表嵌入在列表中列表项<li>标记内的锚链<a>标记之后。单击此列表项时，将打开子页面，如以下屏幕截图所示。锚定链接文本设置为子页面的标题，默认标题使用主题b。
你会注意到子页面的主题与主页的不同。主页面使用主题a作为页面内容和页眉。它使用主题b作为列表。子页面标题默认设置为主题b。由于嵌套列表使用了data-theme='a'属性，因此整个子页面（包括嵌套列表）都以样例a为主题。在应用中使用嵌套列表时，这可能并不理想。参考第 10章主题框架中的嵌套列表主题化配方，了解如何正确设置嵌套列表的主题。
如本配方所示，默认情况下，嵌套列表子页面的标题设置为 swatchb。您可以使用如下代码所示的属性data-header-theme来设置子页面的标题主题：
<ul data-role='listview' data-theme='d' data-header-theme='a'>通过设置listview插件的headerTheme选项，您可以在应用中配置嵌套列表的默认标题主题。以下代码将其设置为主题a并将其绑定到mobileinit事件：
$(document).bind('mobileinit',function(){
$.mobile.listview.prototype.options.headerTheme = 'a';
});- 使用只读嵌套列表配方
- 第 10 章中的主题化嵌套列表配方主题框架
只读列表是包含非交互项或其中没有锚定链接的项的列表。与常规项相比，框架设置只读项的样式有所不同。只读项的主题颜色为浅色或浅色，并且它们的大小较小，因为用户不希望点击它们。
此方法向您展示了如何创建只读嵌套列表，以及如何使用选项配置列表视图。它还向您展示了如何将嵌套列表显示为插入列表。
从code/06/read-only-list源文件夹复制此配方的完整代码。此代码可以使用 URLhttp://localhost:8080/06/read-only-list/main.html启动。
-
在
main.html中，添加以下代码以创建作者列表。向某些作者添加带有书名的嵌套列表。<div data-role='content'> <ul data-role='listview'> <li>H.G. Wells</li> <li><a href='#'>Mark Twain</a></li> <li>Rabindranath Tagore <ul data-role='listview'> <li>The Gardener</li> <li>Gitanjali</li> </ul> </li> <li>William Shakespeare <div><ul data-role='listview'> <li>Merchant of Venice</li> <li>Romeo and Juliet</li> </ul></div> </li> </ul> </div>
-
将以下脚本添加到页面以配置列表视图选项：
<script> $.mobile.listview.prototype.options.theme = 'e'; $.mobile.listview.prototype.options.headerTheme = 'a'; $.mobile.listview.prototype.options.inset = true; </script>
在代码中，添加作者姓名作为列表项，没有任何锚链接。为作者拉宾德拉纳特·泰戈尔和威廉·莎士比亚添加书籍嵌套列表。作者H.G.Wells没有嵌套列表。作家马克·吐温有一个锚定链接。列表使用主题e，即黄色。没有嵌套列表或锚定链接的项目将以较浅的阴影和较小的字体显示。带有嵌套列表或锚定链接的项目以常规颜色显示，字体更大。
将上一个脚本添加到页面或main.html的<head>标记中，如代码所示。脚本配置listview插件的默认选项。在此配方中，配置了theme、headerTheme和inset选项。使用headerTheme选项将子页面标题的主题设置为a，如前一代码所示。现在，当您单击列表项Rabindranath Tagore时，将打开嵌套列表的子页面。标题主题为a的嵌套列表如下图所示：
当您希望将嵌套列表显示为插入列表时，可能存在实例。您可以通过将内部列表包装在一个<div>标记中来实现这一点。框架现在不会为嵌套列表创建子页。
在listview插件上调用childPages方法不会返回嵌入<div>标记的列表。
威廉·莎士比亚的书籍列表嵌入在该配方的<div>标记中，因此不会创建嵌套列表。
使用插入嵌套列表将垂直拉伸列表，用户必须滚动页面才能查看所有内容。所以有选择地使用它们。
- 使用嵌套列表配方
- 第 10 章中的主题化嵌套列表配方主题框架
本食谱向您展示如何格式化列表项中的文本。它还向您展示了如何使用可折叠项和列表项中的计数气泡。
从code/06/format-content源文件夹复制此配方的完整代码。此代码可以使用 URLhttp://localhost:8080/06/format-content/main.html启动。
-
在
main.html中，添加以下代码创建运输方式列表：<div data-role='content'> <ul data-role='listview'> <li> <p class='ui-li-aside' style='font-size: 15px'> <strong>High Speed</strong></p> <div data-role='collapsible' data-theme='e'> <h2>Air</h2> <ul data-role='listview'> <li>Aeroplane</li><li>Helicopter</li> </ul> </div> <p class='ui-li-count'>2</p> </li> <li data-theme='e'> <p class='ui-li-aside' style='font-size: 15px'> <strong>Moderate Speed</strong></p> <div data-role='collapsible' data-theme='e'> <h2>Land</h2> <ul data-role='listview'> <li>Bus</li><li>Car</li><li>Bike</li><li>Train</li> </ul> </div> <p class='ui-li-count'>4</p> </li> <li> <p class='ui-li-aside' style='font-size: 15px'> <strong>Slow Speed</strong></p> <div data-role='collapsible' data-theme='e'> <h2>Water</h2> <ul data-role='listview'> <li>Ship</li><li>Submarine</li><li>Boat</li> </ul> </div> <p class='ui-li-count'>3</p> </li> </ul> </div>
-
将以下脚本添加到页面以配置列表视图选项：
<script> $.mobile.listview.prototype.options.theme = 'e'; $.mobile.listview.prototype.options.countTheme = 'a'; $.mobile.listview.prototype.options.inset = true; </script>
添加三种运输方式作为列表项，如前一代码所示。将带有data-role='collapsible'的可折叠块添加到每个列表项中。向每个可折叠块添加标题文本，并创建一个包含不同车辆类型的列表作为其内容。添加样式设置为class='ui-li-aside'的字符串。这将创建一个字符串并将其放置在列表项的右上角。最后，添加列出的车辆数量，并使用class='ui-li-count'将其样式设置为计数气泡。对每个列表项执行此操作。
将代码中显示的脚本添加到页面或main.html的<head>标签，配置列表选项theme、inset、countTheme的默认值。该列表现在显示如下屏幕截图所示：
下图显示了展开了一个可折叠块的列表：
您可以使用本配方中已经提到的选项countTheme为计数气泡设定主题。您也可以在列表中设置data-count-theme属性，如下代码所示：
<ul data-role='listview' data-count-theme='a'>本食谱向您展示了如何将带有列表的可折叠内容添加到列表项中。您还可以向列表项添加任何表单控件，如以下代码所示。该框架通过在列表项中添加所需的填充和边距来增强表单控件，并使表单控件友好。
<li><input type='text' name='username' placeholder='Enter name'/></li>- 使用拆分按钮列表配方
拆分按钮列表是为同一列表项提供两种不同动作的列表。这是通过向列表项添加两个锚链接创建的。然后，框架会自动将列表项转换为拆分按钮。添加到第一个链接的任何图像都会缩小为大小为80 x 80px的缩略图。第二个链接替换为一个名为拆分图标的图标，位于拆分按钮的右角。此配方向您展示了如何创建拆分按钮列表以在列表中显示图像。
从code/06/split-button-list源文件夹复制此配方的完整代码。此代码可以使用 URLhttp://localhost:8080/06/split-button-list/main.html启动。
-
创建
main.html作为多页模板应用。在#main页面增加拆分按钮列表，如下代码所示：<div data-role='content'> <ul data-role='listview' data-inset='true' data-theme='b' data-split-theme='e' data-split-icon='arrow-d'> <li> <a href='#viewphoto' data-rel='dialog'> <img style='margin: 10px' src='../../resourcimg/img1.png' /> <h3>Lal Bagh</h3> <p>Bangalore, India</p> </a> <a href='#download' data-rel='dialog'>Lal Bagh, Bangalore</a> </li> <li> <a href='#viewphoto' data-rel='dialog'> <img style='margin: 10px' src='../../resourcimg/img2.png' /> <h3>Peacock</h3> <p>Mysore, India</p> </a> <a href='#download' data-rel='dialog'>Peacock, Mysore</a> </li> <li> <a href='#viewphoto' data-rel='dialog'> <img style='margin: 10px' height=75% src='../../resourcimg/img3.png' /> <h3>Ganesha</h3> <p>Bangalore, India</p> </a> <a href='#download' data-rel='dialog'>Ganesha, Bangalore</a> </li> </ul> </div>
-
添加点击拆分按钮左侧将打开的
#viewphoto页面。<div id='viewphoto' data-role='page' data-theme='e' > <div data-role='header' data-theme='e'> <h1>Photo View</h1> </div> <div data-role='content'> Showing photo here ... </div> </div>
-
添加点击拆分图标将打开的
#download页面。<div id='download' data-role='page' data-theme='e' > <div data-role='header' data-theme='e'> <h1>Download</h1> </div> <div data-role='content'> Downloading file ... </div> </div>
将列表项添加到#main页面的列表中，如前代码所示。每个列表项都有两个链接，通过设置data-rel='dialog'属性，两个链接都作为对话框打开。将第一个链接指向#viewphoto页面。添加指向照片的图像，并向锚定链接文本添加格式化描述。根据缩略图的大小，可以向图像添加填充，如前一代码所示。
将第二个链接指向#download页面。第二个链接将自动转换为拆分图标。默认情况下，拆分图标使用右箭头。您可以使用列表视图上的data-split-icon属性进行配置。使用data-split-theme属性设置分割图标的主题。拆分按钮列表显示如下屏幕截图所示：
点击照片图像或列表项中的左键打开照片视图对话框，如下图所示：
点击拆分图标打开下载对话框，如下图所示：
要在#viewphoto对话框中显示照片图像，您必须编写一些 JavaScript 代码来处理pagechange事件。这在第 9 章、方法和实用程序中使用 changePage（）更改页面的配方中有介绍。
您可以使用listview插件的splitTheme和splitIcon选项配置拆分图标和拆分图标主题的默认值，并将其绑定到mobileinit事件。以下代码将星形图标和主题e设置为列表视图选项的默认值：
$(document).bind('mobileinit',function(){
$.mobile.listview.prototype.options.splitIcon = 'star';
$.mobile.listview.prototype.options.splitTheme = 'e';
});- 列表配方中的格式化内容
- 使用图像图标配方
- 使用 changePage（）更改第 9 章中的配方方法和实用程序
jQueryMobile 框架在交互列表项（具有链接的列表项）的右侧添加一个图标。您还可以将图标添加到列表项文本中，框架将此图标调整为适合40 x 40px的大小。本食谱向您展示了如何显示带有列表项的图标。
从code/06/list-icons源文件夹复制此配方的完整代码。此代码可以使用 URLhttp://localhost:8080/06/list-icons/main.html启动。
-
在
main.html中增加一个列表，列表项如下代码所示：<div data-role='content'> <ul data-role='listview' data-theme='b' data-inset='true'> <li data-icon='star'> <a href='#'> <img src='../../resourcimg/img1.png' class='ui-li-icon' alt='Lal Bagh'/> <h3 style='margin-left: 25px'>Lal Bagh, Bangalore</h3> </a> </li> <li data-icon='star'> <a href='#'> <img src='../../resourcimg/img2.png' class='ui-li-icon' alt='Peacock'/> <h3 style='margin-left: 25px'>Peacock, Mysore</h3> </a> </li> <li data-icon='star'> <a href='#'> <img src='../../resourcimg/img3.png' class='ui-li-icon' alt='Ganesha'/> <h3 style='margin-left: 25px'>Ganesha, Bangalore</h3> </a> </li> </ul> </div>
在列表项的锚链接内，向列表中的每个列表项添加图像。将属性class='ui-li-icon'设置为此图像元素。这将指示框架将图像样式设置为图标，图像将自动缩小以适合列表项。您可以为文本设置所需的边距，以便在调整图像大小后正确显示文本。该列表显示如下屏幕截图所示：
对于交互式列表项，即带有链接的项，框架默认情况下会在列表项的右侧添加一个右箭头图标。这可以通过使用列表项上的data-icon属性进行更改。此配方中的代码使用列表项的star图标。
- 列表配方中的格式化内容
- 使用拆分按钮列表配方
当使用列表搜索筛选器时，框架将遍历列表项并显示与筛选器文本匹配的项。替代文本也可以与搜索筛选器一起使用。使用替代文本时，将忽略列表项文本。搜索是一般匹配，文本中出现的任何搜索值都会显示在结果中。
此配方向您展示了如何使用搜索过滤器来搜索列表项文本和备选文本。它还向您展示了如何配置搜索过滤器，以及如何实现使用自定义搜索逻辑的自定义搜索回调函数。
从code/06/custom-search源文件夹复制此配方的完整代码。此代码可以使用 URLhttp://localhost:8080/06/custom-search/main.html启动。
-
在
main.html中，创建以下移动平台列表。列表项还包含属性data-filtertext中的操作系统制造商名称。<div data-role='content' data-theme='e'> <ul id='oslist' data-role='listview'> <li data-role='list-divider'>Open Source</li> <li data-filtertext='Google'>Android</li> <li data-filtertext='HP'>WebOS</li> <li data-filtertext='Samsung Intel'>Tizen</li> <li data-filtertext='Linux Foundation'>LiMo</li> <li data-filtertext='Mozilla'>Boot2Gecko</li> <li data-role='list-divider'>Closed</li> <li data-filtertext='Apple'>iOS</li> <li data-filtertext='Nokia'>Symbian</li> <li data-filtertext='Nokia'>S40</li> <li data-filtertext='RIM'>Blackberry OS</li> <li data-filtertext='Microsoft'>Windows Phone</li> <li data-filtertext='Samsung'>Bada</li> </ul> </div>
-
将以下脚本添加到页面以配置默认列表选项：
$.mobile.listview.prototype.options.theme = 'e'; $.mobile.listview.prototype.options.inset = true; $.mobile.listview.prototype.options.dividerTheme = 'e'; $.mobile.listview.prototype.options.filter = true; $.mobile.listview.prototype.options.filterTheme = 'e'; $.mobile.listview.prototype.options.filterPlaceholder = 'Search for ...'; $.mobile.listview.prototype.options.filterCallback = customFilter;
-
以下代码片段包含搜索文本中的列表项文本：
$('#main').live('pageinit', function(event) { $('#oslist').find('li').each(function() { $(this).attr('data-filtertext', $(this).attr('data-filtertext') + ' ' + $(this).html()); }); });
-
自定义搜索回调定义如下代码所示：
function customFilter(text, searchValue) { var regx='\\b'+searchValue; return !(text.match(new RegExp(regx, 'i'))); }
在main.html中为各种移动操作系统平台创建一个id='oslist'.添加列表项的列表，如代码所示。创建属性为data-role='list-divider'的列表项，并将列表项分离为开源和关闭。使用data-filtertext属性将操作系统制造商名称添加为备用搜索文本。
将给定脚本添加到页面或main.html的<head>标记中。设置各种列表视图配置选项，如theme='e'和inset='true'。这是一个只读列表，列表项以浅黄色阴影显示。使用dividerTheme='e'选项设置列表分隔符项目的主题。列表分隔符项的样式由框架设置为较深的阴影。
接下来，添加filter='true'和filterTheme='e'选项，将搜索过滤器添加到列表中，并使用样例e为其设置主题。使用filterPlaceholder选项为搜索筛选器文本控件指定自定义文本（默认值为“【T4]”）。最后通过设置选项filterCallback=customFilter设置自定义搜索回拨功能。该列表显示如下屏幕截图所示：
列表中的默认搜索函数与文本中出现的搜索字符串匹配。要覆盖此选项，请定义自定义筛选器回调，如前面的代码所示。函数接受两个参数text和searchValue。创建一个正则表达式来搜索给定文本中单词开头出现的searchValue。将忽略单词之间搜索值的出现。使用match()方法将正则表达式与文本匹配。i参数使其不区分大小写。
如果filtertext属性与列表项一起使用，则默认搜索仅使用此文本并忽略列表项文本。要同时使用列表项文本和过滤器文本，请添加一个pageinit事件处理程序，如前面的代码所示。在此函数中，使用 jQueryfind('li).each()方法查找每个列表项，在each()的回调中，获取列表项文本并将其添加到过滤器文本中。这不会对列表项产生任何可见的影响。但是列表项文本现在是过滤器文本的一部分，因此可用于搜索过滤器。因此，搜索a将列出Android和iOS（filtertext 的值为Apple。但这不会列出包含a的Symbian或Bada，如以下截图所示：
如果您搜索Bo它只列出Boot2Gecko，如以下截图所示：
search callback 函数返回一个布尔值，指示文本是否应该被搜索过滤器隐藏。因此，对于所有匹配的元素，搜索过滤器回调应该返回false。不匹配的文本元素返回true并被搜索过滤器隐藏。
配方使用选项dividerTheme选项为列表分隔符项设置主题。您也可以使用data-divider-theme属性，如下代码所示：
<ul data-role='listview' data-theme='e' data-divider-theme='e'>配方显示您如何使用filter、filterTheme和filterPlaceholder选项配置列表视图。也可以使用data-filter、data-filter-theme和data-filter-placeholder属性进行设置，如下代码所示：
<ul data-role='listview' data-filter='true' data-filter-theme='e' data-filter-placeholder='Search for...'>您可以使用 JavaScript 动态修改列表及其内容。此配方向您展示了如何使用 JavaScript 在只读列表中添加或删除列表项。
从code/06/scripting-lists源文件夹复制此配方的完整代码。此代码可以使用 URLhttp://localhost:8080/06/scripting-lists/main.html启动。
-
在
main.html中，添加以下代码在布局网格中创建空列表：<div data-role='content'> <div data-role='fieldcontain'> <fieldset class='ui-grid-b'> <div class='ui-block-a' style='width: 65%'> <ul id='numlist' data-role='listview' data-theme='e' data-inset='true'> </ul> </div> <div class='ui-block-b'> <button data-theme='b' id='addBtn'>Add</button> <button data-theme='b' id='removeBtn'>Remove</button> </div> </fieldset> </div> </div>
-
添加以下脚本以动态添加或删除列表项：
var count = 0; $('#main').live('pagecreate', function(event) { $('#numlist').listview({create: function(event, ui) { $('#addBtn').bind('click', function(event, ui) { var str = "<li><a href='#'>Item " + (++count) + '</a></li>'; $('#numlist').append(str); $('#numlist').listview('refresh'); }); $('#removeBtn').bind('click', function(event, ui) { if (--count < 0) { count = 0; return; } $('#numlist').find('li').last().remove(); $('#numlist').listview('refresh'); }); }}); });
使用fieldset容器上的属性class='ui-grid-b'向main.html添加两列布局网格。在第一列添加一个带id='numlist'的空列表。在第二列添加两个 ID 为addBtn和removeBtn的按钮。单击这些按钮后，列表项将动态更新为第一列中的空列表。
将给定脚本添加到页面或main.html的<head>部分。在脚本中，为在页面完全初始化之前触发的pagecreate事件创建一个事件处理程序。在这里，为listview元素的create事件添加一个事件处理程序。创建listview元素时，将触发此事件。在其回调函数中，绑定addBtn和removeBtn按钮的click事件，如前面代码所示。
按下addBtn键时，会向列表中添加一个列表项。列表项文本保存在内存中，并在添加新元素时递增。按下removeBtn键时，获取通过调用 jQueryfind('li').last()方法添加的最新列表项元素。通过调用remove()方法删除最后一个元素。修改后调用listview 插件上的refresh()方法更新列表。
当应用启动时，显示如以下屏幕截图所示，其中有一个空列表：
按下添加按钮将新的列表项添加到列表中，如下图所示：
按删除按钮删除最近添加的列表项。
如本配方所述，在修改后，您必须调用listview 插件上的refresh()方法。在添加新列表项或删除列表项时，refresh()方法触发列表更新，并对列表项应用必要的样式和增强。
$('#numlist').listview('refresh');