我如何使用缩略图创建可折叠列表？ [英] How can I create a collapsible list with thumbnails?
问题描述
我想将可折叠列表与缩略图列表（ 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>
何处放置图片的代码？
查看文件如何获取自定义图标
自定义图标
要使用自定义图标，请指定具有唯一名称（如myapp-email）的数据图标值
，并且按钮插件将
通过在数据图标值前添加ui-icon-前缀来生成类，并且
将其应用于按钮：ui-icon-myapp-email。
然后，您可以在样式表中编写
a CSS规则，以定位ui-icon-myapp-email
类指定图标背景源。为了保持视觉
与其他图标的一致性，请创建一个18x18 b $ b像素的白色图标，以alpha透明度保存为PNG-8。 在这个例子中，我们只是指向一个独立的图标图像，但
您可以轻松使用图标精灵并指定
定位，就像我们在$ b中使用的图标精灵一样
.ui-icon-myapp-email {
background-image：url（app-图标-email.png）;
示例
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =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>测试< / title>
< / head>
< body>
< div data-role =page>
< div data-role =content>
< div data-role =collapsibledata-collapsed-icon =taifundata-expanded-icon =taifundata-inset =false>
< h2>< img src =favicon.ico>宠物与LT; / H2>
< ul data-role =listview>
< li>< a href =index.html>金丝雀< / a>< / li>
< li>< a href =index.html>猫< / a>< / li>
< li>< a href =index.html>狗< / a>< / li>
< / ul>
< / div><！ - / collapsible - >
< div data-role =collapsibledata-collapsed-icon =taifundata-expanded-icon =taifundata-inset =false>
< h2>< img src =favicon.ico>农场动物< / h2>
< ul data-role =listview>
< li>< a href =index.html>鸡< / 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>
截图：
I want to combine the collapsible-list with thumbnails-list (http://jquerymobile.com/demos/1.2.0/docs/lists/lists-thumbnails.html) Thats the code for the collapsible list, but there are only bullets as symbols.
<div data-role="collapsible">
<h3>Bangarang</h3>
<h3>Skrillex</h3>
<ul data-role="listview">
<li>Right In</li>
<li>Bangarang</li>
</div>
Where to put the code for the image?
Take a look at the docu how to get custom icons
Custom Icons
To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button: ui-icon-myapp-email.
You can then write a CSS rule in your stylesheet that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.In this example, we're just pointing to a standalone icon image, but you could just as easily use an icon sprite and specify the positioning instead, just like the icon sprite we use in the framework.
.ui-icon-myapp-email { background-image: url("app-icon-email.png"); }
example
<!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:
这篇关于我如何使用缩略图创建可折叠列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
