jQueryMobile的(十二) 列表

1..基本的带连接的列表

列表的代码为一个含 data-role="listview" 属性无序列表ul。

Jquery Mobile会把所有必要的样式(列表项右出现一个向右箭头，并使列表与屏幕同宽等)应用在列表上:

<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>

2.数字排序的列表

通过有序列表ol可以创建数字排序的列表用来表现顺序序列比如说搜索结果或者电影排行榜时非常有用。

当增强效果应用到列表时，Jquery Mobile优先使用css的方式给列表添加编号，

当浏览器不支持这种方式时，框架会采用JavaScript将编号写入列表中：

<ol data-role="listview">
　 <li><a href="index.html">The Godfather</a></li>
　 <li><a href="index.html">Inception</a></li>
</ol>

3.只读列表

列表也可以用来展示没有交互的条目，通常会是一个内嵌的列表。通过有序或者无序列表都可以创建只读列表，列表项内没有链接即可，

Jqmobil默认将他们的主题样式为“c”白色无渐变色，并把字号设为比可点击的列表项的小，以节省空间。

<ul data-role="listview" data-inset="true">
　 <li>Acura</li>
　 <li>Audi</li>
</ul>

4..拆分的按钮列表

有时每个列表项会有多于一个操作，这时拆分按钮用来提供2个独立的可点击的部分：

列表项本身和列表项右边的小icon。

要创建这种拆分按钮，在li 插入第二个链接即可，框架会创建一个竖直的分割线，

并把链接样式化为一个只有icon的按钮，记得设置title属性以保证可访问性。

你可以通过指定data-split-icon属性来设置位于右边的分隔项的图标（图标详情参见 图标分隔项的主题样式可以通过 data-split-theme属性来设置。

<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
　<li>
　　<img src="images/album-bb.jpg" />
　　<h3><a href="index.html">Broken Bells</a></h3>
　　<p>Broken Bells</p>
　　<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
　</li>
　<li>
　　<img src="images/album-hc.jpg" />
　　<h3><a href="index.html">Warning</a></h3>
　　<p>Hot Chip</p>
　　<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
　</li>
</ul>

5..列表分割项

列表项也可以转化为列表分割项，用来组织列表，使列表项成组。给任意列表项添加data-role="list-divider" 属性即可。

默认情况下列表项的主题样式为“b“浅灰)，但给列表（ul或ol）

添加 data-divider-theme 属性可以设置列表分割项的主题样式。



6 搜索过滤框

Jquery Mobile提供了一种非常方便的方式通过在客户端进行的搜索机制过滤列表。

要使一个列表可过滤，只需为列表设置data-filter="true" 属性即可。

框架会在列表上方增加一个搜索框，当用户在搜索输入框中输入时，

Jquery Mobile会自动过滤掉不含输入字符的列表项。

搜索输入框默认的字符为 "Filter items...".通过设置mobileinit事件的绑定程序或者给 $.mobile.listview.prototype.options.filterPlaceholder 选项设置一个字符串，或者给列表设置data-filter-placeholder属性，

可以设置搜索输入框的默认字符。

<ul data-role="listview" data-filter="true" >

　　<li><a href="index.html">Acura</a></li>

　　<li><a href="index.html">Audi</a></li>

</ul>



7.文本格式和计数气泡

Jquery Mobile支持通过HTML语义化的标签来显示列表项中所需常见的文本格式（比如 标题/描述，二级信息，计数等）

• 将数字用一个元素包裹，并添加ui-li-count的class,放置于列表项内，可以给列表项右侧增加一个计数气泡

;

• 要添加有层次关系的文本可以使用标题来强调，用段落文本来减少强调

;

• 补充信息（比如日期）可以通过包裹在class="ui-li-aside"的容器中来添加到列表项的右侧

<ul data-role="listview">
　<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
　<li>
　　 <h3><a href="index.html">Stephen Weber</a></h3>
　 　<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
　　 <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the Jquery team.</p>
　　 <p class="ui-li-aside"><strong>6:24</strong>PM</p>
　 </li>
　 <li>
　　 <h3><a href="index.html">Jquery Team</a></h3>
　　 <p><strong>Boston Conference Planning</strong></p>
　　 <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
　　 <p class="ui-li-aside"><strong>9:18</strong>AM</p>
　 </li>
</ul>

<ul data-role="listview">
　<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
　 <li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
</ul>

8 更新列表 Updating lists

如果你给列表项添加了列表项，你需要调用refresh()方法将列表的样式更新并且将添加进的列表项生成嵌套列表

$('#mylist').listview('refresh');