Jquery Mobile中提供了制作列表的组建，它的data-view为listview。下面是一个典型的Jquery Mobile列表，代码如下：

 <div data-role="page"id="pageone">  
  <div data-role="content">  
    <h2>有序列表：</h2>  
    <ol data-role="listview">  
     <li><a href="#">列表项</a></li>  
      <li><a href="#">列表项</a></li>  
      <li><a href="#">列表项</a></li>  
    </ol>  
    <h2>无序列表：</h2>  
    <ul data-role="listview">  
      <li><a href="#">列表项</a></li>  
      <li><a href="#">列表项</a></li>  
      <li><a href="#">列表项</a></li>  
    </ul>  
  </div>  
 </div>

上面我们定义了两种类型的列表，一个是有序列表(ul)，另一个是无序列表(ol)。这两种列表的定义和HTML相同，只要在相应的标签中添加data-role="listview"属性即可。

在这些最基本的功能之上，我们可以继续添加Jquery Mobile中为我们提供定制好的样式或者功能。下面的代码中我们利用data-inset属性为列表添加圆角和外边距：

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

我们经常看到一种列表，它们对内容进行了分组，即相同列表的选项放在同一个大标题下。Jquery Mobile中也为我们提供了实现这种功能的简单组建，list-divider：

 <ul data-role="listview">  
  <li data-role="list-divider">欧洲</li>  
  <li><a href="#">法国</a></li>  
  <li><a href="#">德国</a></li>  
 </ul>

可以设定自动排序，比如所有的都是字母通过autodividers可以自动按首字母排序,代码如下：

 <ul data-role="listview"data-autodividers="true">  
  <li><a href="#">Adam</a></li>  
  <li><a href="#">Angela</a></li>  
  <li><a href="#">Bill</a></li>  
  <li><a href="#">Calvin</a></li>  
   ...  
 </ul>

如果我们想为列表添加搜索功能，可以将data-filter属性设置为true，这样列表就会自动根据用户输入的信息显示删选后的结果。与此配套的data-filter-placeholder可以设定搜索框默认占位符：

<ul data-role="listview"data-filter="true" data-filter-placeholder="搜索姓名">

在jquery Mobile中，我们为列表添加图片的时候，图片会自动适应列表的大小，变成80*80像素，代码如下：

 <ul data-role="listview">  
  <li><a href="#"><img src="chrome.png"></a></li>  
 </ul>

如果想想使用16*16px的小图标，在img的class上添加ui-li-icon即可：

 <li><a href="#"><imgsrcimgsrc="us.png" alt="USA"class="ui-li-icon">USA</a></li>

最后，现在手机上比较流行的列表数量提示效果，也可以通过Jquery Mobile实现，代码如下：

 <ul data-role="listview">  
  <li><a href="#">Inbox<spanclassspanclass="ui-li-count">335</span></a></li>  
  <li><a href="#">Sent<spanclassspanclass="ui-li-count">123</span></a></li>  
  <li><a href="#">Trash<spanclassspanclass="ui-li-count">7</span></a></li>  
 </ul>

 本文由职坐标整理发布，学习更多的HTML5/CSS3相关知识，请关注职坐标WEB前端HTML5/CSS3频道！