【JQuery Mobile】列表

　　列表用来展示数据，导航，结果列表以及数据条目，所以Jquery Mobile提供了多种的列表类型以适应大多数的设计模式。

1、基本的带连接的列表

　　列表的代码为一个含 data-role="listview" 属性无序列表ul。Jquery Mobile会把所有必要的样式(列表项右出现一个向右箭头，并使列表与屏幕同宽等)应用在列表上，使其成为易于触摸的控件。当你点击列表项时，Jquery Mobile 会触发该列表项里的第一个链接，通过ajax请求链接的URL地址，在DOM中创建一个新的页面并产生页面转场效果。

如：

<ul data-role="listview">
　　<li><a href="index.html">Acura</a></li>
　　<li><a href="index.html">Audi</a></li>
</ul>

2、嵌套的列表

　　通过“ul”， “ol”的li中嵌套子 ul ，ol。你可以创建嵌套列表。当一个拥有子列表的列表项被点击时，Jquery Mobile框架会生成一个新的ul列表页面充满屏幕，并自动生成一个为父列表项名称为标题的header,以及一个子列表。这个动态生成的嵌套的列表默认的主题样式“b"(蓝色)，提示你是在二级菜单里。列表可以嵌套多层，Jquery Mobile会自动处理这些链接和页面。

如：

<ul>
　<li>Pets
　　 <ul>
　　　<li><a href="index.html">Canary</a></li>
　　　 <li><a href="index.html">Cat</a></li>
　　 </ul>
　 </li>
　 <li>Farm animals
　　 <ul>
　　　 <li><a href="index.html">Chicken</a></li>
　　　 <li><a href="index.html">Cow</a></li>
　　 </ul>
　 </li>
</ul>

3、数字排序的列表　　

　　通过有序列表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>

4、只读列表

　　列表也可以用来展示没有交互的条目，通常会是一个内嵌的列表。通过有序或者无序列表都可以创建只读列表，列表项内没有链接即可，Jqmobil默认将他们的主题样式为“c”白色无渐变色，并把字号设为比可点击的列表项的小，以节省空间。

如：

<ul data-role="listview" data-theme="d" data-inset="true"> 
   <li>Acura</li> 
   <li>Audi</li> 
   <li>BMW</li> 
   <li>Cadillac</li> 
   <li>Chrysler</li>        
   <li>Lexus</li> 
   <li>Mini</li> 
   <li>Nissan</li> 
   <li>Porsche</li> 
   <li>Subaru</li> 
   <li>Toyota</li> 
   <li>Volkswagon</li> 
   <li>Volvo</li> 
</ul>

5、拆分的按钮列表　　

　　有时每个列表项会有多于一个操作，这时拆分按钮用来提供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>

6、列表分割项

　　列表项也可以转化为列表分割项，用来组织列表，使列表项成组。给任意列表项添加data-role="list-divider" 属性即可。默认情况下列表项的主题样式为“b“浅灰，但给列表（ul或ol）添加 data-dividertheme 属性可以设置列表分割项的主题样式。

如：

<ul data-role="listview">
　<li data-role="list-divider">A</li>
　 <li><a href="index.html">Adam Kinkaid</a></li>
　 <li><a href="index.html">Alex Wickerham</a></li>
　 <li><a href="index.html">Avery Johnson</a></li>
　 <li data-role="list-divider">B</li>
　 <li><a href="index.html">Bob Cabot</a></li> 
</ul>

7、搜索过滤框　　

　　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> 

8、文本格式和计数气泡　　

　　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>

9、列表项的缩略图与图标

　　要在列表项左侧添加缩略图，只需在列表项中添加一幅图片作为第一个子元素即可。Jquery Mobile会自动缩放图片为大小80px的正方形，而要使用标准的6*16的图标作为缩略图的话，为图片元素添加ui-li-icon class即可。

如：

<ul data-role="listview">
　<li>
　　 <img src="images/album-bb.jpg" />
　　 <h3><a href="index.html">Broken Bells</a></h3>
　　 <p>Broken Bells</p>
　 </li>
　 <li>
　　 <img src="images/album-hc.jpg" />
　　<h3><a href="index.html">Warning</a></h3>
　　 <p>Hot Chip</p>
　 </li>
</ul>

<ul data-role="listview">
　<li><img src="images/gf.png" alt="France" class="ui-li-icon"><a href="index.html">France</a> <span class="ui-li-count">4</span></li>
　 <li><img src="images/de.png" alt="Germany" class="ui-li-icon"><a href="index.html">Germany</a> <span class="ui-li-count">4</span></li>
</ul>

10、内嵌的列表

　　如果列表需要嵌入在有其他内容的页面中，内嵌列表会将列表设为边缘圆角，周围留有magin的块级元素。给列表（ul或ol）添加 data-inset="true"属性 即可。

如：

<ul data-role="listview" data-inset="true" >
　　<li><a href="index.html">Acura</a></li>
            <ul data-role="listview"  >
　　            <li><a href="index.html">Acura</a></li>
　　            <li><a href="index.html">Audi</a></li>
            </ul> 
　　<li><a href="index.html">Audi</a></li>
</ul> 
        

11、更新列表

　　如果你给列表项添加了列表项，你需要调用refresh()方法将列表的样式更新并且将添加进的列表项生成嵌套列表。例如： $('ul').listview('refresh');