jQuery Mobile 列表
一、jQuery Mobile 列表视图：jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 (<ol>) 和无序列表 (<ul>)。
1、创建列表
向 <ol> 或 <ul> 元素添加 data-role="listview"。
如需使这些项目可点击，请在每个列表项（<li>）中规定链接：
<div data-role="page" id="pageone"> <div data-role="content"> <h1>有序列表：</h1> <ol data-role="listview"> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> </ol> <h1>无序列表</h1> <ul data-role="listview"> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> </ul> </div> </div>
如需为列表添加圆角和外边距，请使用 data-inset="true" 属性：
<div data-role="page" id="pageone"> <div data-role="content"> <h1>不带data-inset="true"属性</h1> <ol data-role="listview"> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> </ol> <h1>带data-inset="true"属性</h1> <ul data-role="listview" data-inset="true"> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> </ul> </div> </div>
给文字加上超链接默认地，列表中的列表项会自动转换为按钮（无需 data-role="button"）。如果没有加超链接那么是只读列表，就不是按钮，不可点击
2、列表分隔符
列表分隔符（List Dividers）用于把项目组织和组合为分类/节。
如需规定列表分隔符，请向 <li> 元素添加 data-role="list-divider" 属性：
<div data-role="page" id="pageone"> <div data-role="content"> <h1>列表分隔符</h1> <ul data-role="listview"> <li data-role="list-divider"><a href="#">广州</a></li> <li><a href="#">清远</a></li> <li data-role="list-divider">湛江</li> <li>深圳</li> <li data-role="list-divider">珠海</li> <li>中山</li> <li data-role="list-divider">东莞</li> <li>河源</li> <li data-role="list-divider">梅州</li> </ul> </div> </div>
如果您的列表是字母顺序的（比如通讯录），jQuery Mobile 自动添加恰当的分隔符，通过在 <ol> 或 <ul> 元素上设置 data-autodividers="true" 属性：
<div data-role="page" id="pageone"> <div data-role="content"> <h1>列表分隔符</h1> <ul data-role="listview" data-autodividers="true" data-inset="true"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Albert</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Cameron</a></li> <li><a href="#">Chloe</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Diana</a></li> <li><a href="#">Gabriel</a></li> <li><a href="#">Glen</a></li> <li><a href="#">Ralph</a></li> <li><a href="#">Valarie</a></li> </ul> </div> </div>
data-autodividers="true" 属性通过对列表项文本的首字母进行大写来创建分隔符。
3、搜索过滤器
如需在列表中添加搜索框，请使用 data-filter="true" 属性：
<div data-role="page" id="pageone"> <div data-role="content"> <h2>我的通讯录</h2> <ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Albert</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Cameron</a></li> <li><a href="#">Chloe</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Diana</a></li> <li><a href="#">Gabriel</a></li> <li><a href="#">Glen</a></li> <li><a href="#">Ralph</a></li> <li><a href="#">Valarie</a></li> </ul> </div> </div>
默认地，搜索框中的文本是 "Filter items..."。
如需修改默认文本，请使用 data-filter-placeholder 属性：
<div data-role="page" id="pageone"> <div data-role="content"> <h2>我的通讯录</h2> <ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true" data-filter-placeholder="搜索姓名 ..."> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Albert</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Cameron</a></li> <li><a href="#">Chloe</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Diana</a></li> <li><a href="#">Gabriel</a></li> <li><a href="#">Glen</a></li> <li><a href="#">Ralph</a></li> <li><a href="#">Valarie</a></li> </ul> </div> </div>
二、jQuery Mobile 列表内容
1、jQuery Mobile 列表缩略图
对于大于 16x16px 的图像，请在链接中添加 <img> 元素。
jQuery Mobile 将自动把图像调整至 80x80px：
并且还可以使用标准 HTML 来填充带有信息的列表：
.........
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" /> <title>无标题文档</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="content"> <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="搜索歌手"> <li data-role="list-divider">港台歌手</li> <li><a href="#"> <img src="image/1.png"> <h2>周杰伦</h2> <p>姓名：周杰伦 生日：1979.1.18(农历：腊月二十 简介：周杰伦（Jay Chou），华语流行男歌手、演员、词曲创作人、MV及电影导演、编剧及制作人。2000年被吴宗宪发掘并推出首张专辑《Jay》；2001年发行专辑《范特西》；2002</p></a> </li> <li><a href="#"> <img src="image/2.png"> <h2>周华健</h2> <p>姓名：周华健 生日：1979.1.18(农历：腊月二十 简介：周杰伦（Jay Chou），华语流行男歌手、演员、词曲创作人、MV及电影导演、编剧及制作人。2000年被吴宗宪发掘并推出首张专辑《Jay》；2001年发行专辑《范特西》；2002</p></a> </li> <li><a href="#"> <img src="image/3.png"> <h2>邓紫棋</h2> <p>姓名：邓紫棋 生日：1979.1.18(农历：腊月二十 简介：周杰伦（Jay Chou），华语流行男歌手、演员、词曲创作人、MV及电影导演、编剧及制作人。2000年被吴宗宪发掘并推出首张专辑《Jay》；2001年发行专辑《范特西》；2002</p></a> </li> <li data-role="list-divider">内地歌手</li> <li><a href="#"> <img src="image/4.png"> <h2>宋茜</h2> <p>姓名：宋茜 生日：1979.1.18(农历：腊月二十 简介：周杰伦（Jay Chou），华语流行男歌手、演员、词曲创作人、MV及电影导演、编剧及制作人。2000年被吴宗宪发掘并推出首张专辑《Jay》；2001年发行专辑《范特西》；2002</p></a> </li> <li><a href="#"> <img src="image/5.png"> <h2>孙艺珍</h2> <p>姓名：孙艺珍生日：1982年1月11日 简介：孙艺珍，1982年1月11日生于庆尚北道大邱市，韩国女演员。1999年刚刚升入大学的她便开始参与影视作品的拍摄。2002年主演电影《假如爱有天意》、《恋爱小说》。2003年主演《我脑... </p></a> </li> <li><a href="#"> <img src="image/3.png"> <h2>邓紫棋</h2> <p>姓名：邓紫棋 生日：1979.1.18(农历：腊月二十 简介：周杰伦（Jay Chou），华语流行男歌手、演员、词曲创作人、MV及电影导演、编剧及制作人。2000年被吴宗宪发掘并推出首张专辑《Jay》；2001年发行专辑《范特西》；2002</p></a> </li> </ul> </div> </div></body> </html>
2、jQuery Mobile 列表图标
如需向您的列表添加 16x16px 的图标，请向 <img> 元素添加 class="ui-li-icon" 属性：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" /> <title>无标题文档</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="#"><img src="image/us.png" width="16" height="11" class="ui-li-icon">USA</a></li> <li><a href="#"><img src="image/finland.png" width="16" height="11" class="ui-li-icon">Finland</a></li> <li><a href="#"><img src="image/france.png" width="16" height="11" class="ui-li-icon">France</a></li> <li><a href="#"><img src="image/gb.png" width="16" height="11" class="ui-li-icon">Great Britain</a></li> <li><a href="#"><img src="image/germany.png" width="16" height="11" class="ui-li-icon">Germany</a></li> </ul> </div> </div></body> </html>
3、拆分按钮
如需创建带有垂直分隔栏的拆分列表，请在 <li> 元素内放置两个链接（不可以放置第三个链接）。
jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的样式，链接中的文本（如有）将在用户划过该图标时显示：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" /> <title>无标题文档</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="content"> <ul data-role="listview"> <li> <a href="#"> <img src="image/chrome.png" width="80" height="80"> <h2>Google Chrome</h2> <p>Google Chrome is a free, open-source web browser. Released in 2008.</p> </a> <a href="#">Some Text</a> </li> <li> <a href="#"> <img src="image/firefox.png" width="128" height="128"> <h2>Mozilla Firefox</h2> <p>Firefox is a web browser from Mozilla. Released in 2004.</p> </a> <a href="#">Some Tex</a> </li> </ul> </div> </div> </body> </html>
通过添加页面和对话框，可使链接的功能更强：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" /> <title>无标题文档</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="content"> <ul data-role="listview"> <li> <a href="#"> <img src="image/chrome.png" width="80" height="80"> <h2>Google Chrome</h2> <p>Google Chrome is a free, open-source web browser. Released in 2008.</p> </a> <a href="#download" data-rel="dialog" data-transition="pop">Some Text</a> </li> <li> <a href="#"> <img src="image/firefox.png" width="128" height="128"> <h2>Mozilla Firefox</h2> <p>Firefox is a web browser from Mozilla. Released in 2004.</p> </a> <a href="#download" data-rel="dialog" data-transition="pop">Some Text</a> </li> </ul> </div> </div> <div data-role="page" id="download"> <div data-role="content"> <h3>拆分按钮实例</h3> <p>该按钮仅供演示。</p> <a href="#" data-role="button" data-rel="back" data-inline="true" data-icon="check" data-mini="true">下载</a> <a href="#" data-role="button" data-rel="back" data-inline="true" data-mini="true">取消</a> </div> </div> </body> </html>
4、计数泡沫
计数泡沫用于显示与列表项相关的数目，例如邮箱中的消息：
如需添加计数泡沫，请使用行内元素，比如 <span>，设置 class "ui-li-count" 属性并添加数字：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" /> <title>无标题文档</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="content"> <h1>My Email</h1> <ul data-role="listview" data-inset="true"> <li><a href="#">收件箱<span class="ui-li-count">3232</span></a></li> <li><a href="#">发件箱<span class="ui-li-count">324</span></a></li> <li><a href="#">垃圾箱<span class="ui-li-count">123123</span></a></li> </ul> </div> </div> </body> </html>
如需在计数泡泡中显示正确的数字，就必须进行程序化更新。
5、更改列表项的默认链接图标
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" /> <title>无标题文档</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="content"> <h1>My Email</h1> <ul data-role="listview" data-inset="true"> <li><a href="#">默认是右箭头</a></li> <li data-icon="plus"><a href="#">data-icon="plus"</a></li> <li data-icon="minus"><a href="#">data-icon="minus"</a></li> <li data-icon="delete"><a href="#">data-icon="delete"</a></li> <li data-icon="info"><a href="#">data-icon="info"</a></li> <li data-icon="false"><a href="#">data-icon="false"</a></li> </ul> </div> </div> </body> </html>
6、可折叠列表
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" /> <title>无标题文档</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="content"> <div data-role="collapsible"> <h4>A</h4> <ul data-role="listview"> <li><a href="#">Adam</a></li> <li><a href="#">Angela</a></li> </ul> </div> <div data-role="collapsible"> <h4>B</h4> <ul data-role="listview"> <li><a href="#">Bill</a></li> <li><a href="#">Bob</a></li> </ul> </div> <div data-role="collapsible"> <h4>C</h4> <ul data-role="listview"> <li><a href="#">Calvin</a></li> <li><a href="#">Cameron</a></li> <li><a href="#">Christina</a></li> </ul> </div> </div> </div> </body> </html>