This recipe shows you how to format text in a list item. It also shows you how to use collapsible items and count bubbles within the list item.
Copy the full code of this recipe from the code/06/format-content sources folder. This code can be launched using the URL http://localhost:8080/06/format-content/main.html.
- In
main.html, add the following code to create a list of modes of transport:<div data-role='content'> <ul data-role='listview'> <li> <p class='ui-li-aside' style='font-size: 15px'> <strong>High Speed</strong></p> <div data-role='collapsible' data-theme='e'> <h2>Air</h2> <ul data-role='listview'> <li>Aeroplane</li><li>Helicopter</li> </ul> </div> <p class='ui-li-count'>2</p> </li> <li data-theme='e'> <p class='ui-li-aside' style='font-size: 15px'> <strong>Moderate Speed</strong></p> <div data-role='collapsible' data-theme='e'> <h2>Land</h2> <ul data-role='listview'> <li>Bus</li><li>Car</li><li>Bike</li><li>Train</li> </ul> </div> <p class='ui-li-count'>4</p> </li> <li> <p class='ui-li-aside' style='font-size: 15px'> <strong>Slow Speed</strong></p> <div data-role='collapsible' data-theme='e'> <h2>Water</h2> <ul data-role='listview'> <li>Ship</li><li>Submarine</li><li>Boat</li> </ul> </div> <p class='ui-li-count'>3</p> </li> </ul> </div> - Add the following script to the page to configure the list view options:
<script> $.mobile.listview.prototype.options.theme = 'e'; $.mobile.listview.prototype.options.countTheme = 'a'; $.mobile.listview.prototype.options.inset = true; </script>
Add the three modes of transport as list items as shown in the previous code. Add a collapsible block with data-role='collapsible' to each of the list items. Add a heading text to each of the collapsible block and create a list with different vehicle types as its content. Add a string with the style set to class='ui-li-aside'. This creates a string and positions it on the top right corner of the list item. Finally, add the number of vehicles listed and set its style to a count bubble by using class='ui-li-count'. Do this for each of the list items.
Add the script shown in the code to the page or the <head> tag of main.html to configure the default values for list options theme, inset, and countTheme. The list is now displayed as shown in the following screenshot:
The following image shows the list with one collapsible block expanded:
You can theme the count bubble using the option countTheme as already mentioned in this recipe. You can also set the attribute data-count-theme on the list as shown in the following code:
<ul data-role='listview' data-count-theme='a'>
This recipe shows you how to add a collapsible content with a list to a list item. You can also add any form control to a list item as shown in the following code. The framework enhances the form control by adding the required padding and margins within the list item and makes the form control tap friendly.
<li><input type='text' name='username' placeholder='Enter name'/></li>