jQuery Mobile 列表内容

jQuery Mobile 列表图标

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

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>列表图标:</h2>
    <ul data-role="listview" data-inset="true">    
      <li><a href="#">默认是右箭头</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>
  </div>
</div>

</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

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

更完整的 jQuery Mobile 按钮图标，请访问我们的 jQuery Mobile 图标参考手册。

16x16 图标

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

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>列表图标:</h2>
    <ul data-role="listview" data-inset="true">
      <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
      <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li>
      <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li>
      <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li>
      <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li>
    </ul>
  </div>
</div> 

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

jQuery Mobile 列表缩略图

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

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

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>列表图标:</h2>
    <ul data-role="listview" data-inset="true">
      <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
      <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li>
      <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li>
      <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li>
      <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li>
    </ul>
  </div>
</div> 

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

使用标准的HTML添加列表信息：

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>包含缩略图的列表:</h2>
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="#"><img src="chrome.png"></a>
      </li>
      <li>
        <a href="#"><img src="firefox.png"></a>
      </li>
    </ul>
  </div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

jQuery Mobile 列表图标

在列表 <img> 元素使用 class="ui-li-icon" 添加 16x16px 图标：

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>列表图标:</h2>
    <ul data-role="listview" data-inset="true">
      <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
      <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li>
      <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li>
      <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li>
      <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li>
    </ul>
  </div>
</div> 

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

分割按钮

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

jQuery Mobile 会自动设置第二个链接为蓝色箭头的图标，图标的链接文字（如果有的话）将在用户将鼠标悬停在图标时显示:

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>拆分按钮</h2>
    <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>
      </li>
    </ul>
  </div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

添加一些页面和对话框使链接功能更加丰富：

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>请点击齿轮图标！</h2>
    <ul data-role="listview" data-inset="true">
      <li data-role="divider">浏览器</li>
      <li>
        <a href="#">
        <img src="chrome.png">
        <h2>Google Chrome</h2>
        <p>Google Chrome 是免费的开源 web 浏览器。发布于 2008 年。</p>
        </a>
        <a href="#download" data-transition="pop" data-icon="gear">下载浏览器</a>
      </li>
      <li>
        <a href="#">
        <img src="firefox.png">
        <h2>Mozilla Firefox</h2>
        <p>Firefox 是来自 Mozilla 的 web 浏览器。发布于 2004 年。</p>
        </a>
        <a href="#download" data-transition="pop" data-icon="gear">下载浏览器</a>
      </li>
    </ul>
  </div>
</div> 

<div data-role="page" id="download" data-dialog="true">
  <div data-role="main" class="ui-content">
   <h3>拆分按钮实例</h3>
    <p>该按钮仅供演示。</p>
    <a href="#" class="ui-btn ui-btn-inline ui-btn-b ui-shadow ui-corner-all ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini" data-rel="back">下载</a>
    <a href="#" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-inline ui-mini" data-rel="back">取消</a>
  </div>
</div> 

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

气泡数字

气泡数字是用来显示列表项相关的数字，如在一个邮箱的邮件：

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

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-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>
</div> 

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

注意：显示一个正确的气泡数字，必须修改编程方式。这将在以后的章节解释。

jQuery Mobile 列表内容

jQuery Mobile 列表图标

实例

16x16 图标

实例

jQuery Mobile 列表缩略图

实例

实例

jQuery Mobile 列表图标

实例

分割按钮

实例

实例

气泡数字

实例

更多实例

Chinesische PHP-Website