jQuery Mobile 列表圖標(biāo)

默認(rèn)情況下每個(gè)列表項(xiàng)都會(huì)包含一個(gè)箭頭圖標(biāo) "carat-r" (右箭頭)。如果要修改這個(gè)圖標(biāo)可以使用 data-icon 屬性:

實(shí)例

<!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>列表圖標(biāo):</h2>
    <ul data-role="listview" data-inset="true">    
      <li><a href="#">默認(rèn)是右箭頭</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

Notedata-icon="false" 將會(huì)移除圖標(biāo)。

更完整的 jQuery Mobile 按鈕圖標(biāo)，請(qǐng)?jiān)L問我們的 jQuery Mobile 圖標(biāo)參考手冊(cè)。

16x16 圖標(biāo)

如果你想在你的列表添加標(biāo)準(zhǔn)的 16x16px 的圖標(biāo), 可以在列表項(xiàng)中添加 <img> 元素，并使用 "ui-li-icon" 類:

實(shí)例

<!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>列表圖標(biāo):</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

jQuery Mobile 列表縮略圖

大于 16x16px 的圖像，請(qǐng)?jiān)阪溄又刑砑?<img> 元素。

jQuery Mobile 將自動(dòng)縮放圖像到 80x80px:

實(shí)例

<!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>列表圖標(biāo):</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

使用標(biāo)準(zhǔn)的HTML添加列表信息：

實(shí)例

<!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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

jQuery Mobile 列表圖標(biāo)

在列表 <img> 元素使用 class="ui-li-icon" 添加 16x16px 圖標(biāo)：

實(shí)例

<!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>列表圖標(biāo):</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

分割按鈕

在JQuery Mobile的列表中，有時(shí)需要對(duì)選項(xiàng)內(nèi)容做兩個(gè)不同的操作，這時(shí)，需要對(duì)選項(xiàng)中的鏈接按鈕進(jìn)行分割。實(shí)現(xiàn)分割的方法是在<li>元素中再增加一個(gè)<a>元素，便可以在頁面實(shí)現(xiàn)分割效果。

jQuery Mobile 會(huì)自動(dòng)設(shè)置第二個(gè)鏈接為藍(lán)色箭頭的圖標(biāo)，圖標(biāo)的鏈接文字（如果有的話）將在用戶將鼠標(biāo)懸停在 圖標(biāo)時(shí)顯示:

實(shí)例

<!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 是免費(fèi)的開源 web 瀏覽器。發(fā)布于 2008 年。</p>
        </a>
        <a href="#">文本信息</a>
      </li>
      <li>
        <a href="#">
        <img src="firefox.png">
        <h2>Mozilla Firefox</h2>
        <p>Firefox 是來自 Mozilla 的 web 瀏覽器。發(fā)布于 2004 年。</p>
        </a>
        <a href="#">文本信息</a>
      </li>
    </ul>
  </div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


添加一些頁面和對(duì)話框使鏈接功能更加豐富：

實(shí)例

<!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>請(qǐng)點(diǎn)擊齒輪圖標(biāo)！</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 是免費(fèi)的開源 web 瀏覽器。發(fā)布于 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 瀏覽器。發(fā)布于 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>拆分按鈕實(shí)例</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

氣泡數(shù)字

氣泡數(shù)字是用來顯示列表項(xiàng)相關(guān)的數(shù)字，如在一個(gè)郵箱的郵件：

如需添加氣泡數(shù)字，請(qǐng)使用行內(nèi)元素，比如 <span>，設(shè)置 class "ui-li-count" 屬性并添加數(shù)字：

實(shí)例

<!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="#">發(fā)件箱<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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

注意：顯示一個(gè)正確的氣泡數(shù)字，必須修改編程方式。 這將在以后的章節(jié)解釋。

實(shí)例

更多實(shí)例

彈窗列表
如何創(chuàng)建彈窗列表

改變列表項(xiàng)的默認(rèn)鏈接圖標(biāo)
如何設(shè)置列表項(xiàng)的默認(rèn)鏈接圖標(biāo)(默認(rèn)是右箭頭).

可折疊彈窗列表
如何創(chuàng)建可折疊彈窗列表。

可折疊的列表
如何創(chuàng)建顯示/隱藏的列表。

更多內(nèi)容格式
如何制作一個(gè)日歷。