Home/ Questions/Q 8753561
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T13:27:03+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 18×18
    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:
    screenshot

    • 0