Question

我想将collapsible-list与缩略图列表（http://jquerymobile.com/demos/1.2.0/docs/lists/lists-thumbnails.html）结合起来这是可折叠列表的代码，但只有子弹作为符号。

<div data-role="collapsible">
   <h3>Bangarang</h3>
   <h3>Skrillex</h3>
   <ul data-role="listview">
      <li>Right In</li>
      <li>Bangarang</li>
</div>

在何处放置图像代码？

Answer 1

查看docu如何获取自定义图标

自定义图标

  要使用自定义图标，请指定数据图标值   它有一个独特的名称，如myapp-email和按钮插件   通过在数据图标值和前缀ui-icon-生成一个类   将它应用于按钮：ui-icon-myapp-email。

然后你可以写   样式表中的CSS规则以ui-icon-myapp-email为目标   用于指定图标背景源的类。保持视觉   与其余图标保持一致，创建一个18x18的白色图标   像素保存为具有Alpha透明度的PNG-8。

在这个例子中，我们只是指向一个独立的图标图像，但是   您可以轻松使用图标精灵并指定   相反，定位，就像我们在中使用的图标精灵   框架。
.ui-icon-myapp-email {
    background-image: url("app-icon-email.png"); 
}

例如

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
 <script src="jquery-1.8.0.min.js"></script>
 <script src="jquery.mobile-1.2.0.min.js"></script>

 <style>
  .ui-icon-taifun { background-image: url("taifun.png"); }
 </style>

 <title>Test</title>
</head>

<body>
  <div data-role="page">
    <div data-role="content">
      <div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
        <h2><img src="favicon.ico"> Pets</h2>
        <ul data-role="listview">
          <li><a href="index.html">Canary</a></li>
          <li><a href="index.html">Cat</a></li>
          <li><a href="index.html">Dog</a></li>
        </ul>
       </div><!-- /collapsible -->
       <div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
         <h2><img src="favicon.ico"> Farm animals</h2>
         <ul data-role="listview">
           <li><a href="index.html">Chicken</a></li>
           <li><a href="index.html">Cow</a></li>
           <li><a href="index.html">Duck</a></li>
         </ul>
      </div><!-- /collapsible -->
    </div>
  </div>

</body>
</html>

截图：
screenshot

如何使用缩略图创建可折叠列表？

1 个答案: