Creating Standard and Inset Lists

While you may already be familiar with standard list behavior in HTML, jQuery Mobile brings some new options to list behavior and display. Whether you want to create a list that takes up the entire screen or create a list that appears to jump off the page, you can do it with jQuery Mobile.

Standard lists behave similar to buttons; they take up the full amount of space available to them. Inset lists still take up the full amount of space, but add rounded corners and a shadow to make the list appear to jump off the page.

Creating a Standard List

Using HTML, you can make a standard list by creating a ul element and placing li elements inside it. To make a standard list in jQuery Mobile you follow the same setup only you need to add an attribute of data-role="listview" to the ul element. Listing 11.1 shows the creation of a standard list.