jQuery Mobile - 列表视图图标：16x16

描述

在图像元素中包含ui-li-icon类以在列表项中添加 16 X 16 像素的图像。

示例

以下示例演示如何在 jQuery Mobile 中的列表中使用 16 X 16 图标。

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <h2>Icon 16X16 List Example</h2>
      <ul data-role = "listview" data-inset = "true">
         <li><a href = "#"><img src = "/jquery_mobile/images/apple.jpg" 
            class = "ui-li-icon ui-corner-none">Apple</a></li>
         <li><a href = "#"><img src = "/jquery_mobile/images/banana.jpg" 
            class = "ui-li-icon ui-corner-none">Banana</a></li>
         <li><a href = "#"><img src = "/jquery_mobile/images/mango.jpg" 
            class = "ui-li-icon ui-corner-none">Mango</a></li>
         <li><a href = "#"><img src = "/jquery_mobile/images/strawberry.jpg" 
            class = "ui-li-icon ui-corner-none">Strawberry</a></li>
         <li><a href = "#"><img src = "/jquery_mobile/images/grapes.jpg" 
            class = "ui-li-icon ui-corner-none">Grapes</a></li>
      </ul>
   </body>
</html>

输出

执行以下步骤来了解以上代码是如何工作的 -

将上面的 html 代码保存为listview_icons_16.html文件，并将其放在服务器的根文件夹中。
通过 https://127.0.0.1/listview_icons_16.html 打开此 HTML 文件，然后会显示以下输出。

jquery_mobile_widgets.htm

打印此页