jQuery Mobile 列表

jQuery Mobile 列表视图
1.如需创建列表，请向 <ol> 或 <ul> 元素添加 data-role=”listview“。如需使这些项目可点击，请在每个列表项（<li>）中规定链接。

提示：默认地，列表中的列表项会自动转换为按钮（无需 data-role=”button”）

2.列表分隔符
列表分隔符（List Dividers）用于把项目组织和组合为分类/节, 如需规定列表分隔符，请向

• 元素添加 data-role=”list-divider” 属性

•  <ol data-role="listview" data-inset="true">
      <li data-role="list-divider">广东</li>
      <li><a href="#">广州</a></li>
      <li><a href="#">深圳</a></li>
   </ol> 

  
  3.给列表添加搜索框功能: data-filter=”true”

  <ol data-role="listview" data-filter="true" data-filter-placeholder="请输入姓名" data-inset="true">
      <li data-role="list-divider">广东</li>
      <li><a href="#">广州</a></li>
      <li><a href="#">深圳</a></li>
      <li><a href="#">珠海</a></li>
  </ol>

  
  jQuery Mobile 列表内容
  1.列表缩略图
  对于大于 16x16px 的图像，请在链接中添加 <img> 元素, jQuery Mobile 将自动把图像调整至 80x80px。

  <ul data-role="listview">
    <li>
      <a href="#">
      <img src="images/luffy.jpg">
      <h2>Google Chrome</h2>
      <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
      </a>
    </li>
  </ul>

  
  2.计数泡沫:请使用行内元素，比如 <span>设置 class=”ui-li-count” 属性并添加数字

  <div data-role="content">
      <h2>我的邮箱</h2>
      <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>
    </div>

  
  注释：如需在计数泡泡中显示正确的数字，就必须进行程序化更新

  根据下面博客，对知识内容进行整理。
  原文地址：http://www.cnblogs.com/jxyedu/p/5099447.html