2、jQuery Mobile 列表

 jQuery Mobile 列表

      1.1   jQuery Mobile列表视图, 是标准的Html列表。分为<ol>  和 <ul>。给其添加属性：data-role='listview'。就可使用jQuery Mobile列表。

       data-inset='true' 取消显示的圆角效果。

<h2>不带有 data-inset="true" 属性的列表：</h2>
    <ul data-role="listview" >
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
    </ul><br>
    <h2>带有 data-inset="true" 属性的列表：</h2>
    <ul data-role="listview" data-inset="true">
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
    </ul>

    <li>的属性 data-role='list-divider' 为分隔符。
   

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

   <ul>和<ol>属性： data-autodividers='true'  自动分隔符。通过对列表项文本的首字母进行大写来创建分隔符。

   <ul>和<ol>属性：data-filter = 'true' .在列表上添加搜索框。

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

    1.2 jQuery Mobile 列表内容。

           列表中可以使用图标，大于16X16的图片，直接使用<img>标签；小于16*16px的图片，向<img>标签中添加class = 'ui-li-icon'。

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
    </a>
  </li>
   <li>
      <a href="#">
          <img src="us.png" alt="USA" class="ui-li-icon">USA
     </a>
   </li>
</ul>

         拆分按钮。在<li> 标签中添加两个<a>标签，会自动拆分为两个分隔栏，并为第二个添加箭头，如果有文字，在鼠标放上去时，就会显示出来。

<li data-role="divider">Browsers</li>
      <li>
        <a href="#">       
        <h2>Google Chrome</h2>
        </a>
        <a href="#download" data-rel="dialog" data-transition="pop">Download Browser</a>
      </li>
      <li>
        <a href="#">
        <h2>Mozilla Firefox</h2>
        </a>
        <a href="#download" data-rel="dialog" data-transition="pop">Download Browser</a>
      </li>
    </ul>

         列表计数泡沫。在<a>标签中添加 <span class='ui-li-count'> 

<ul data-role="listview" data-inset="true">
      <li><a href="#">收件箱<span class="ui-li-count">25</span></a></li>
      <li><a href="#">发件箱<span class="ui-li-count">432</span></a></li>
      <li><a href="#">垃圾箱<span class="ui-li-count">7</span></a></li>
    </ul>

         更换默认箭头图标。<li  data-icon="plus">

        可折叠列表。

<div data-role="collapsible">
    <h4>A</h4>
    <ul data-role="listview">
      <li><a href="#">Adam</a></li>
      <li><a href="#">Angela</a></li>
    </ul>
    </div>

        class = 'ui-li-aside' 将内容显示在右边。

<li><a href="#"><p class="ui-li-aside">Re: Appointment</p> <a></li>