jQuery Mobile 列表

1.基本列表(如果没有<a>标签就标示没有箭头)

<div data-role="page">
    <div data-role="header"><h1>头部栏</h1></div>
    <ul data-role="listview">
      <li>图书</li>
      <li><a href="#">音乐</a></li>
    </ul>
    <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>     
</div>

 2.有序列表（start属性在html5中指定开始的数值，但mobile里边不支持）

  <div data-role="page">
  <div data-role="header"><h1>头部栏</h1></div>
    <ol data-role="listview" start="5" type="a"> 
	  <li><a href="#">计算机</a></li> 
      <li><a href="#">文艺</a></li> 
      <li><a href="#">社科</a></li> 
	</ol> 
    <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>     
  </div>

 3.分割按钮列表

 data-split-icon="gear"指定分割按钮图标

ody>
  <div data-role="page"><div data-role="header"><h1>头部栏</h1></div>
    <ul data-role="listview" data-split-icon="gear" data-split-theme="d"> 
	  <li>
	    <a href="#"> 
		  <img src="Images/2011年作品.jpg" /> 
		  <h3>HTML 5实战</h3> 
		  <p>一本全面介绍HTML 5新增特征与API的原创图书。</p> 
		</a>
		<a href="#" data-rel="dialog" data-transition="slideup">
		  2011年作品
		</a>
	  </li> 
	  <li>
	    <a href="#"> 
		  <img src="Images/2010年作品.jpg" /> 
		  <h3>jQuery 权威指南</h3> 
		  <p>通过一个个精选的实例详细完整地介绍jQuery的方方面面。</p> 
		</a>
		<a href="#" data-rel="dialog" data-transition="slideup">
		  2010年作品
		</a>
	  </li>  
    </ul>
    <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>     
</div>

 4.分割列表项

data-role="list-divider"表示是列表分割项

在ul中添加data-divider-theme指定分割线样式

 

<div data-role="page">
    <div data-role="header"><h1>头部栏</h1></div>
    <ul data-role="listview"> 
	  <li data-role="list-divider">图书</li> 
	  <li><a href="#">计算机</a></li> 
	  <li><a href="#">社科</a></li> 
	  <li><a href="#">文艺</a></li> 
	  <li data-role="list-divider">音乐</li> 
	  <li><a href="#">流行</a></li> 
	  <li><a href="#">通俗</a></li> 
	</ul> 
    <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>     
</div>

 5.内容格式化与计数器

  <div data-role="page">
    <div data-role="header"><h1>头部栏</h1></div>
    <ul data-role="listview"> 
	  <li data-role="list-divider">2010年、2011年作品集
	      <span class="ui-li-count">2</span></li> 
	  <li>
	    <a href="#"><h3>2011年作品</h3> 
		  <p><strong>HTML 5实战</strong></p> 
		  <p>一本全面介绍HTML 5新增特征与API的原创图书。</p> 
		  <p class="ui-li-aside"><strong>2011.01</strong>出版</p> 
		</a></li> 
	  <li>
	    <a href="#"><h3>2010年作品</h3> 
		  <p><strong>jQuery 权威指南</strong></p> 
		  <p>通过一个个精选的实例详细完整地介绍jQuery的方方面面。</p> 
		  <p class="ui-li-aside"><strong>2010.01</strong>出版</p> 
		</a>
	  </li> 
    </ul> 
    <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>     
</div>

 js的刷新

$("ul").listview("refresh");