8、列表
8.1 列表基础
（1）<li> 标签定义列表项目。 <ol> 标签定义有序列表。 <ul> 标签定义无序列表。 <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
（2）为列表元素添加data-role="listview"属性后，jQuery Mobile将本地HTML列表增强为移动视图，默认占据整个屏幕；如果列表包含链接，以触摸按钮方式显示，带有右侧对齐的箭头图标；
|
无序 |
有序 |
|
<ul data-role="listview" data-theme="c"> <li><a href="#">Action</a></li> <li><a href="#">Adventure</a></li> </ul> |
<ol data-role="listview" data-theme="c"> <li><a href="#">Action</a></li> <li><a href="#">Adventure</a></li> </ol> |
|
|
|
8.2 内置列表
（1）data-inset="true"不占据整个屏幕，在一个圆角区域内
（2）data-role="list-divider"一组列表条目的页眉 ；data-divider-theme="a"主题样式
（3）默认文本显示时是左对齐，使用一个包含class="ui-li-aside"类的元素进行包装右对齐
<ul data-role="listview" data-inset="true">
<li data-role="list-divider" data-divider-theme="a">Contact Options</li>
<li><a href="#"><img src="../images/75-phone.png" alt="Call" class="ui-li-icon">Call</a></li>
<li><a href="#"><img src="../images/18-envelope.png" alt="Email" class="ui-li-icon">Email</a></li>
<li><a href="#"><p><strong>6</strong> PM<span class="ui-li-aside"><strong>Birthday Party</strong></span></p></a></li>
<li data-role="list-divider">Wed <p class="ui-li-aside"><strong>Feb 8 2012</strong></p></li>
</ul>
8.3 带有缩略图和图标的列表
(1)缩略图，将图片缩放为80象素正方形
<ul data-role="listview">
<li>
<a href="#">
<img src="../images/kungfupanda2.jpg" />
<h3>Kung Fu Panda</h3>
<p>Rated: PG</p>
<p>Runtime: 95 min.</p>
</a>
</li>
</ul>
（2）图标 16×16 使用class="ui-li-icon"
<ul data-role="listview" data-inset="true" data-theme="d">
<li data-role="list-divider">User Reviews</li>
<li>
<a href="#">
<img src="../images/111-user.png" class="ui-li-icon">
<p><strong>Go See It!</strong></p>
<p>This movie had a strong script and powerful performances from its well-rounded cast. X-Men is a welcome return to form for the franchise.</p>
</a>
</li>
<ul>
8.4 拆分按钮列表
创建主按钮和附属按钮，支持多个动作
<ul data-role="listview" data-split-icon="star" data-split-theme="d">
<li>
<a href="#">
<img src="../images/kungfupanda2.jpg" />
<h3>Kung Fu Panda</h3>
<p>Rated: PG</p>
<p>Runtime: 95 min.</p>
</a>
<a href="#">Buy Tickets</a>
</li>
</ul>
8.5 只读列表——移除锚标签
<ul data-role="listview" >
<li>
<img src="../images/kungfupanda2.jpg" />
<h3>Kung Fu Panda</h3>
<p>Rated: PG</p>
<p>Runtime: 95 min.</p>
</li>
</ul>
8.6 列表徽章（list badge）
<ul data-role="listview" data-inset="true" data-theme="e" data-count-theme="e">
<li data-role="list-divider">Comments</p></li>
<li>
<img src="../images/111-user.png" class="ui-li-icon">
<p>Thanks for the review. I plan to check it out this weekend.</p>
<span class="ui-li-count">1 day</span>
</li>
</ul>
8.7 使用搜索栏过滤列表
<div data-role="content">
<ul data-role="listview" id="calendar-list" data-filter="true" data-filter-placeholder="Search...">
<li data-role="list-divider">Mon <p class="ui-li-aside"><strong>Feb 6 2012</strong></p></li>
<li><a href="#"><p><strong>6</strong> PM<span class="ui-li-aside"><strong>Birthday Party</strong></span></p></a></li>
<li data-role="list-divider">Wed <p class="ui-li-aside"><strong>Feb 8 2012</strong></p></li>
<li><a href="#"><p><strong>6</strong> PM<span class="ui-li-aside"><strong>User Group Meeting</strong></span></p></a></li>
<li data-role="list-divider">Fri <p class="ui-li-aside"><strong>Feb 10 2012</strong></p></li>
<li><a href="#"><p><strong>2</strong> PM<span class="ui-li-aside"><strong>Skiing Lessons</strong></span></p></a></li>
<li><a href="#"><p><strong>5</strong> PM<span class="ui-li-aside"><strong>Team Celebration!</strong></span></p></a></li>
</ul>
</div>
修改默认搜索函数，有两种方法用于从写过滤的回调函数
（1）绑定mobileinit事件，并将filterCallback选项设置为任何自定义的搜索函数
$(document).bind('mobileinit',function(){
// Globally configure search filter placeholder text
$.mobile.listview.prototype.options.filterPlaceholder = "Search me...";
// Configure a "starts with" search instead of the default
$.mobile.listview.prototype.options.filterCallback = function( text, searchValue ){
// New "Starts With" search, return false when there's a match
return !(text.toLowerCase().indexOf( searchValue ) === 0);
};
});
Callback函数提供两个参数：text和searchValue。Text参数包含列表条目的文本，而searchValue参数包含搜索过滤器的值。
用于通配符搜索的默认行为是 return text.toLowerCase().indexOf(searchValue) === -1
（2）创建列表后动态配置搜索函数
$('#calendar-page').live("pagebeforeshow", function(){
$("#calendar-list").listview('option', 'filterCallback',
function( text, searchValue ){
// New "Starts With" search, return false when there's a match
return !(text.toLowerCase().indexOf( searchValue ) === 0);
}
);
});
8.8 List总结
9、表格
9.1 表格模板
<div data-role="content">
<div class="<grid-css-attribute>">
<div class="<block-css-attribute>">Block A</div>
<div class="<block-css-attribute>">Block B</div>
</div>
</div>
(1)表格容器
|
列的数量 |
表格CSS属性 |
|
2 |
ui-grid-a |
|
3 |
ui-grid-b |
|
4 |
ui-grid-c |
|
5 |
ui-grid-d |
(2）块
|
第X列 |
块CSS属性 |
|
1 |
ui-block-a |
|
2 |
ui-block-b |
|
3 |
ui-block-c |
|
4 |
ui-block-d |
|
5 |
ui-block-e |
9.2举例：
9.2.1两列表格
<div data-role="content" >
<div class="ui-grid-a">
<div class="ui-block-a"><strong>Block A</strong><br>The text will wrap within the grid.</div>
<div class="ui-block-b"><strong>Block B</strong><br>More text.</div>
</div>
</div>
9.2.2 三列表格
添加style
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="height:100px;">Block A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e" style="height:100px;">Block B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e" style="height:100px;">Block C</div>
</div>
</div>
</div>
9.2.3四列表格
带图标
<div data-role="content">
<div class="ui-grid-c" style="text-align: center;">
<div class="ui-block-a">
<img src="../images/cloud-default.png" height="57" width="57">
</div>
<div class="ui-block-b">
<img src="../images/cloud-bright.png" height="57" width="57">
</div>
<div class="ui-block-c">
<img src="../images/cloud-ripple.png" height="57" width="57">
</div>
<div class="ui-block-d">
<img src="../images/cloud-sparkle.png" height="57" width="57">
</div>
</div>
</div>
9.3不规则表格
<style>
/* Set 2-column grid to 25/75% */
.ui-grid-a .ui-block-a {
25%;
}
.ui-grid-a .ui-block-b {
75%;
}
/* Set 3-column grid to 25/50/25% */
.ui-grid-b .ui-block-a {
25%;
}
.ui-grid-b .ui-block-b {
50%;
}
.ui-grid-b .ui-block-c {
25%;
}
</style>
<div data-role="content" >
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">25%</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">75%</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">25%</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">50%</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">25%</div>
</div>
</div>
</div>
