Small Town Coder

sharing code samples for desktop, web, and mobile

Using jQuery Mobile Nested List

jQuery Mobile's nested list can be used in may different ways including simplified data entry, structured auditing or surveys, and product selection with options.

When jQuery Mobile encounters a nested list in your page, it automatically creates child pages for each child list. Clicking (tapping) on a list item that contains a UL or OL will generate a new page containing just the child list. This feature repeats until there are no other child lists found.

In this example, I have created a iPhone survey using a nested list. The survey prompts the user for the iPhone model they own followed by the storage option and finally the color. When the user clicks the color option, the result is returned back and displayed on the main page. Of couse, if this was a real survey, the selection would be posted back to the server and the survey results presented to the user.

There are a few extra tweaks in this example including:

  • setting global theme options for the page and listviews
  • binding to the pagebeforeshow event to override the nested listview title with a static title
  • a custom data attribute (data-productname) attached to leaf list items
  • multiple list dividers displaying the user's previous selections

So as not to over complicate the example, I've hard-coded the entire nested list. For such a short list of items, this may seem a bit overkill when a simple drop down list would suffice. However, if you consider expanding the survey to include every smartphone in the current market, I believe the structure and order of nested lists works best.

Live Example

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Nested List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.mobile.page.prototype.options.theme = "d";
            $.mobile.page.prototype.options.headerTheme = "a";
            $.mobile.listview.prototype.options.headerTheme = "a";
            $.mobile.listview.prototype.options.dividerTheme = "b";
            $.mobile.page.prototype.options.addBackBtn = true;
        });

        $("div[data-role='page']").live("pagebeforeshow", function (event, data) {
            var header = $(this).find(":jqmData(role='header') > .ui-title");
            header.html("iPhone Survey");
        });

        function showNestedList() {
            $.mobile.changePage("#nestedlistpage", { transition: "slideup" });
        }

        function setValue(e) {
            var value = $(e).attr("data-productname");
            $("#surveyresult").html("You have selected the " + value + ".");
            $.mobile.changePage("#dataform", { transition: "slidedown" });
        }
    </script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
    <div id="dataform" data-role="page" data-add-back-btn="false">
        <div data-role="header" data-position="fixed">
            <h1>iPhone Survey</h1>
        </div>
        <div data-role="content">
            <a href="#" data-role="button" onclick="showNestedList()">Take our survey</a>
            <p id="surveyresult"></p>
        </div>
        <div data-role="footer" data-position="fixed">
            <h2><a href="http://www.smalltowncoder.com" target="_blank">www.smalltowncoder.com</a></h2>
        </div>
    </div>
    <div id="nestedlistpage" data-role="page" data-add-back-btn="true">
        <div data-role="header" data-position="fixed">
            <h1>Smartphone Selector</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-inset="false">
                <li data-role="list-divider" data-theme="e">Which iPhone model do you own?</li>
                <li>
                    iPhone 4
                    <ul>
                        <li data-role="list-divider">Which iPhone model do you own? iPhone 4</li>
                        <li data-role="list-divider" data-theme="e">What is the storage option?</li>
                        <li>
                            8GB
                            <ul>
                                <li data-role="list-divider">Which iPhone model do you own? iPhone 4</li>
                                <li data-role="list-divider">What is the storage option? 8GB</li>
                                <li data-role="list-divider">Which color did you choose?</li>
                                <li data-icon="false"><a href="#" data-productname="iPhone 4 8GB Black" onclick="setValue(this)">Black</a></li>
                                <li data-icon="false"><a href="#" data-productname="iPhone 4 8GB White" onclick="setValue(this)">White</a></li>
                            </ul>
                        </li>
                        <li>
                            16GB
                            <ul>
                                <li data-role="list-divider">Which iPhone model do you own? iPhone 4</li>
                                <li data-role="list-divider">What is the storage option? 16GB</li>
                                <li data-role="list-divider">Which color did you choose?</li>
                                <li data-icon="false"><a href="#" data-productname="iPhone 4 16GB Black" onclick="setValue(this)">Black</a></li>
                                <li data-icon="false"><a href="#" data-productname="iPhone 4 16GB White" onclick="setValue(this)">White</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    iPhone 4S
                    <ul>
                        <li data-role="list-divider">Which iPhone model do you own? iPhone 4S</li>
                        <li data-role="list-divider">What is the storage option?</li>
                        <li>
                            8GB
                            <ul>
                                <li data-role="list-divider">Which iPhone model do you own? iPhone 4S</li>
                                <li data-role="list-divider">What is the storage option? 8GB</li>
                                <li data-role="list-divider">Which color did you choose?</li>
                                <li data-icon="false"><a href="#" data-productname="iPhone 4S 8GB Black" onclick="setValue(this)">Black</a></li>
                                <li data-icon="false"><a href="#" data-productname="iPhone 4S 8GB White" onclick="setValue(this)">White</a></li>
                            </ul>
                        </li>
                        <li>
                            16GB
                            <ul>
                                <li data-role="list-divider">Which iPhone model do you own? iPhone 4S</li>
                                <li data-role="list-divider">What is the storage option? 16GB</li>
                                <li data-role="list-divider">Which color did you choose?</li>
                                <li data-icon="false"><a href="#" data-productname="iPhone 4S 16GB Black" onclick="setValue(this)">Black</a></li>
                                <li data-icon="false"><a href="#" data-productname="iPhone 4S 16GB White" onclick="setValue(this)">White</a></li>
                            </ul>
                        </li>
                        <li>
                            32GB
                            <ul>
                                <li data-role="list-divider">Which iPhone model do you own? iPhone 4S</li>
                                <li data-role="list-divider">What is the storage option? 32GB</li>
                                <li data-role="list-divider">Which color did you choose?</li>
                                <li data-icon="false"><a href="#" data-productname="iPhone 4S 32GB Black" onclick="setValue(this)">Black</a></li>
                                <li data-icon="false"><a href="#" data-productname="iPhone 4S 32GB White" onclick="setValue(this)">White</a></li>
                            </ul>
                        </li>
                        <li>
                            64GB
                            <ul>
                                <li data-role="list-divider">Which iPhone model do you own? iPhone 4S</li>
                                <li data-role="list-divider">What is the storage option? 64GB</li>
                                <li data-role="list-divider">Which color did you choose?</li>
                                <li data-icon="false"><a href="#" data-productname="iPhone 4S 64GB Black" onclick="setValue(this)">Black</a></li>
                                <li data-icon="false"><a href="#" data-productname="iPhone 4S 64GB White" onclick="setValue(this)">White</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed">
            <h2><a href="http://www.smalltowncoder.com" target="_blank">www.smalltowncoder.com</a></h2>
        </div>
    </div>
</body>
</html>

Live Example