This tutorial explains how to create a List view.

Create a empty list using,

<ol data-role=listview>

                <li> LIST 1 </li>

                <li> LIST 2 </li>           

</ol>

 

You can also add a link,

<ol data-role=listview>

                <li><a href=#pg2> LIST 1 </a></li>

                <li><a href=#pg3> LIST 2 </a></li>

</ol>

To add a text at the end of the button you just created use,

<span class=”ui-li-count”> TEXT </span>

 

To add a image for a list use,

<ol data-role=listview>

                <li> <img src=”<image_src>”</img> LIST 1 </li>

                <li><img src=”<image_src>”</img> LIST 2</li>

</ol>

Complete code is given below.

<!DOCTYPE html>
<html>
<head>
    <title>List</title>
    
    <link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css” />
    <script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
    <script src=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js”></script>
</head>

<body>
    <div data-role=”page” id=”pg1″>
        <div data-role=”header”>
            <h1>
                Page 1 </h1>
        </div>
        
        <div data-role=”content”>
            
            <ol data-role=listview>

                <li><a href=#win1> LIST 1 </a>

                    <span>(Display Count here)</span></li>

                <li><a href=#win2> LIST 2 </a>

                    <span>(Display Count here)</span></li>

            </ol>
            
        </div>
    </div>
</body>
</html>