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

问题描述：

我想将可折叠列表与缩略图列表（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>

在哪里把图像的代码？

答

看看在docu如何获得自定义图标

自定义图标

要使用自定义图标，指定具有类似的myapp电子邮件唯一名称的数据图标值和按钮插件将通过在数据图标值前缀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

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

相关推荐