列表大概是APP中用的最多的组件了,这一章介绍一下列表。
列表(data-role='listview')就是页面中的一个有序(ol元素)或无序(ul元素)列表,其中至少包含一个列表项(li元素)。
如果不用jQuery Mobile(JM)的列表,只要不添加data-role=“listview”就可以了。(样式使用data-theme即可,可以对ul,也可以对li指定)
1.整页列表
无序列表(ul)
<body>
<div data-role="page" id="main">
<div data-role="header">
<h1>HTML5 and APIs</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Offline Access
<li>Geolocation API
<li>Canvas
<li>Offline Storage
<li>New semantic tags
</ul>
</div>
</div>
</body>
<body>
<div data-role="page" id="main">
<div data-role="header">
<h1>Chapters</h1>
</div>
<div data-role="content">
<ol data-role="listview">
<li>The Mobile Jungle
<li>Mobile Browsing
<li>Architecture and Design
<li>Setting up your environment
<li>Markups and Standards
<li>Coding Markup
<li>CSS for Mobile Browsers
<li>JavaScript Mobile
<li>Ajax, RIA and HTML5
<li>Server-Side Browser Detection
<li>Geolocation and Maps
<li>Widgets and Offline webapps
<li>Testing, Debugging and Performance
<li>Distribution and Social Web 2.0
</ol>
</div>
</div>
</body>
2.内联列表(列表是页面的一部分)
<ol data-role="listview" <span style="background-color: rgb(51, 204, 255);">data-inset="true"</span>>
<!-- item rows -->
</ol>
<body>
<div data-role="page" id="main">
<div data-role="header">
<h1>World Cup</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Group A
<li>Argentina
<li>Nigeria
<li>England
<li>Japan
<li data-role="list-divider">Group B
<li>United States
<li>Mexico
<li>Korea
<li>Greece
<li data-role="list-divider">Group C
<li>Germany
<li>Finland
<li>Chile
<li>South Africa
</ul>
</div>
</div>
</body>
</html>
列表的文字应该剪短(26个字符),否则会以省略号显示。
<body>
<div data-role="page" id="main">
<div data-role="header">
<h1>Interactive</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">Internal Page link</a>
<li><a href="other.html">External Page link</a>
<li><a href="http://www.mobilexweb.com">Absolute external link</a>
<li><a href="tel:+13051010200">Call to a phone number using a link</a>
<li><a href="javascript:alert('Hi!')">JavaScript link</a>
</ul>
</div>
</div>
</body>
改变交互行的默认图标:
<li data-icon="info"><a href="#moreinfo">More information</a></li>
不要交互行图标:
<li data-icon="false"><a href="#page2">No icon interactive row</a></li>
5.内嵌列表(继承结构或导航,列表点击后还是列表,看起来像有不同的页面)
如果层级及列表项很多,最好使用不同的页面,以便减少DOM和初始化加载的时间,所以不要把整个站点都放在一个内嵌列表里。所以,创建这样的列表使其中一些列表项指向其它文档或页面,另一些列表项则包含内嵌列表。
<body>
<div data-role="page" id="main">
<div data-role="header">
<h1>Training</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="order.html">Order Now!</a>
<li>Cities available
<ul data-role="listview">
<li>Boston
<li>New York
<li>Miami
<li>San Francisco
<li>San Jose
</ul>
<li>Topics
<ul data-role="listview">
<li>Intro to Mobile Web
<ul data-role="listview">
<li>WML and other oldies
<li>XHTML MP
<li>HTML 4.01
<li>HTML5
</ul>
<li>Mobile Browsers
<ul data-role="listview">
<li>Safari for iOS
<li>Android Browser
<li>Firefox for Mobile
<li>Opera
</ul>
<li>Tablet Browsers
<li>Using jQuery
</ul>
<li>Promotions
<ul data-role="listview">
<li>10% off before May
<li><a href="promo3x2.html">3x2</a>
<li>10% off to subscribers
</ul>
</ul>
</div>
</div>
</body>
内嵌表中,JM会自动使用行中的文本作为新创建的页面的标题,所以还要注意文本简短,以免超出标题区域。
6.分隔按钮的列表(同一行包含两个交互操作,文字和图标。常见的是一个是详情操作和一个编辑操作,当然可以自己定义)
<body>
<div data-role="page" id="main">
<div data-role="header">
<h1>Your Friends</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="details/bill">Bill Gates</a>
<span style="background-color: rgb(51, 204, 255);"><a href="edit/bill"></a></span>
<li><a href="details/steve">Steve Jobs</a>
<a href="edit/steve"></a>
<li><a href="details/mark">Mark Zuckerberg</a>
<a href="edit/mark"></a>
<li><a href="details/larry">Larry Page</a>
<a href="edit/larry"></a>
</ul>
</div>
</div>
</body>
在
ul标签通过data-split-theme来定义右边图标定义不同的主题,data-split-icon来修改第二个操作的图标。
如果让某些行显得比普通行更重要,可以将对应行的标题包含在h2、h3等标签内,这样行高会增加一些。
7.使用图片(微信样式)
小图标(右侧):
<li>
<img src="/icons/email.png" class="ul-li-icon">
Send by e-mail
大图标(左侧缩略图):
<li>
<img src="/thumb/washington.png">
George Washington
8.附加内容(除了标题之外还有其它文字内容)
<body>
<div data-role="header">
<h1>Order online</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="buy.html">Soda</a>
<span class="ui-li-aside">$1.00</span>
<li><a href="buy.html">Sandwich</a>
<span class="ui-li-aside">$3.20</span>
<li><a href="buy.html">Ice cream</a>
<span class="ui-li-aside">$1.50</span>
</ul>
</div>
</div>
</body>
<body>
<div data-role="header">
<h1>Order online</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="buy.html"><span style="font-family: Arial, Helvetica, sans-serif;"><h2></span>Soda</h2></a>
<p>Choose your favorite</p>
<li><a href="buy.html"><h2>Sandwich</h2></a>
<p>Ham & Cheese</p>
<li><a href="buy.html"><h2>Ice cream</h2></a>
<p>Chocolate,Vanilla</p>
</ul>
</div>
</div>
</body>
<li><a href="inbox.html">Inbox</a>
<span class="ui-li-count">86</span>
ul中用data-count-theme定义count样式
11.搜索过滤数据(百度搜索效果,很强大)
<ul data-role="listview" data-filter="true" data-filter-placeholder=
"Search contacts...">
<!-- list rows -->
</ul>
ul中data-filter-theme定义搜索栏样式