jQuery Mobile 列表内容

默认情况下每个列表项都会包含一个箭头图标 "carat-r" (右箭头)。如果要修改这个图标可以使用 data-icon 属性:

<ul data-role="listview"> 
  <li><a href="#">Default is right arrow</a></li>
  <li data-icon="plus"><a href="#">data-icon="plus"</a></li>
  <li data-icon="minus"><a href="#">data-icon="minus"</a></li>
  <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
  <li data-icon="location"><a href="#">data-icon="location"</a></li> 
  <li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>

data-icon="false" 将会移除图标。

更多图标百度搜索，哈哈哈

如果你想在你的列表添加标准的 16x16px 的图标, 可以在列表项中添加 <img> 元素，并使用 "ui-li-icon" 类:

<ul data-role="listview">
  <li><a href="#"><img src="000.png" alt="USA" class="ui-li-icon">USA</a></li>
</ul>

大于 16x16px 的图像，请在链接中添加 <img> 元素。

jQuery Mobile 将自动缩放图像到 80x80px:

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

在JQuery Mobile的列表中，有时需要对选项内容做两个不同的操作，这时，需要对选项中的链接按钮进行分割。实现分割的方法是在<li>元素中再增加一个<a>元素，便可以在页面实现分割效果。

<ul data-role="listview" data-inset="true">
      <li>
        <a href="#">
        <img src="chrome.png">
        <h2>Google Chrome</h2>
        <p>Google Chrome 是免费的开源 web 浏览器。发布于 2008 年。</p>
        </a>
        <a href="#">文本信息</a>
      </li>
      <li>
        <a href="#">
        <img src="firefox.png">
        <h2>Mozilla Firefox</h2>
        <p>Firefox 是来自 Mozilla 的 web 浏览器。发布于 2004 年。</p>
        </a>
        <a href="#">文本信息</a>   <!-- 只显示图标，鼠标hover时显示文字 -->
      </li>
    </ul>

如需添加气泡数字，请使用行内元素，比如 <span>，设置 class "ui-li-count" 属性并添加数字：

<ul data-role="listview" data-autodividers="true" data-inset="true">
      <li><a href="#" ><img src="http://static.runoob.com/images/icon/mobile-icon.png" alt="" />132125<i class="ui-li-count">33</i></a> </li>