How Can I Create A Collapsible List With Thumbnails?
Solution 1:
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 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><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /><scriptsrc="jquery-1.8.0.min.js"></script><scriptsrc="jquery.mobile-1.2.0.min.js"></script><style>.ui-icon-taifun { background-image: url("taifun.png"); }
</style><title>Test</title></head><body><divdata-role="page"><divdata-role="content"><divdata-role="collapsible"data-collapsed-icon="taifun"data-expanded-icon="taifun"data-inset="false"><h2><imgsrc="favicon.ico"> Pets</h2><uldata-role="listview"><li><ahref="index.html">Canary</a></li><li><ahref="index.html">Cat</a></li><li><ahref="index.html">Dog</a></li></ul></div><!-- /collapsible --><divdata-role="collapsible"data-collapsed-icon="taifun"data-expanded-icon="taifun"data-inset="false"><h2><imgsrc="favicon.ico"> Farm animals</h2><uldata-role="listview"><li><ahref="index.html">Chicken</a></li><li><ahref="index.html">Cow</a></li><li><ahref="index.html">Duck</a></li></ul></div><!-- /collapsible --></div></div></body></html>screenshot:
Post a Comment for "How Can I Create A Collapsible List With Thumbnails?"