jQuery Mobile list contents

jQuery Mobile List Icons

By default each list item will contain an arrow icon "carat-r" (right arrow). If you want to modify this icon, you can use the data-icon attribute:

Instance

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

Run instance»

Click "Run" Example" button to view online examples

##data-icon="false" will remove the icon.

For more complete jQuery Mobile button icons, please visit our jQuery Mobile Icon Reference Manual.

16x16 icon

If you want to add a standard 16x16px icon to your list, you can add the <img> element to the list item and use "ui-li- icon" Class:

Instance

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

Run Instance»

Click the "Run Instance" button to view the online instance

jQuery Mobile List Thumbnails

For images larger than 16x16px, please add an <img> element to the link.

jQuery Mobile will automatically scale the image to 80x80px:

Instance

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

Running Example»

Click the "Run Instance" button to view the online instance

Use standard HTML to add list information:

Instance

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

Run Example»

Click the "Run Example" button to view the online example

jQuery Mobile list icon

Used in the list <img> element class="ui-li-icon" Add 16x16px icon:

Instance

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

Run instance»

Click" Run instance" button to view the online instance

Split button

In the JQuery Mobile list, sometimes you need to perform two different operations on the option content. In this case, you need Split link buttons in options. The way to achieve segmentation is to add another <a> element to the <li> element, so that the segmentation effect can be achieved on the page.

jQuery Mobile will automatically set the second link to a blue arrow icon, and the link text of the icon (if any) will be displayed when the user hovers the mouse. The icon displays:

Instance

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

Run Instance»

Click the "Run Instance" button to view the online instance

Add some pages and dialog boxes to make the link function richer:

Example

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

Run instance»

Click the "Run instance" button to view the online instance

Bubble numbers

Bubble numbers are used to display numbers related to list items, such as emails in a mailbox:

If you need to add bubble numbers, please use inline elements, For example <span>, set the class "ui-li-count" attribute and add the number:

Instance

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

Run instance»

Click the "Run Instance" button to view the online instance

Note: To display a correct bubble number, the programming method must be modified. This will be explained in a later chapter.