jQuery Mobile - Nested Listviews

Description

Include the nested listview extension to allow the nested response in jQuery mobile and set the childpages option to false for a specific list. jQuery mobile 1.3 restores the nested listview extension in jQuery mobile 1.4.

Example

Following example demonstrates the use of listview nested in the jQuery Mobile.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <script>
         (function( $, window, undefined ) {
            $.widget( "mobile.listview", $.mobile.listview, {
               options: {
                  childPages: true,
                  page: "<div data-role = 'page'></div>",
                  header: "<div data-role = 'header'><a href = '#' 
                     data-rel = 'back'>Back</a><h1></h1></div>",
                  content: "<div class = 'ui-content'></div>"
               },

               _create: function() {
                  this._super();
                  if( this.options.childPages ) {
                     this._setupChildren();
                  }
               },
               
               _setupChildren: function() {
                  this._attachBindings();
                  this.element.find( "ul" )
                  .css( "display","none" )
                  .parent()
                  .addClass("ui-btn ui-btn-icon-right ui-icon-carat-r");
               },
               
               _attachBindings: function() {
                  this._on ({
                     "click": "_handleSubpageClick"
                  });
                  
                  this._on( "body", {
                     "pagechange": function() {
                        if ( this.opening === true ) {
                           this.open = true;
                           this.opening = false;
                        } else if ( this.open === true ) {
                           this.newPage.remove();
                           this.open = false;
                        }
                     }
                  });
               },
               
               _handleSubpageClick: function( event ) {
                  if( $(event.target).closest( "li" ).children( "ul" ).length == 0 ) {
                     return;
                  }
               
                  this.opening = true;
                  this.newPage = $( this.options.page ).uniqueId();
                  this.nestedList = $( event.target ).children( "ul" )
                  .clone().attr( "data-" + $.mobile.ns + "role", "listview" )
                  .css( "display", "block" );
                  this.pageName = (
                     $( event.target.childNodes[0] ).text().replace(/^\s+|\s+$/g, '').length > 0 )?
                     $( event.target.childNodes[0] ).text() : $( event.target.childNodes[1] ).text();
                     this.pageID = this.newPage.attr( "id" );

                     // Build new page
                     this.newPage.append (
                        $( this.options.header ).find( "h1" ).text( this.pageName ).end()
                     )
                  
                  .append (
                     $( this.options.content )
                  )

                  .find( "div.ui-content" ).append( this.nestedList );
                  $( "body" ).append( this.newPage );
                  $( "body" ).pagecontainer( "change", "#" + this.pageID );
               }
            });
         })( jQuery, this );
      </script>
   </head>
   
   <body>
      <ul data-role = "listview" data-inset = "true">
         <li data-role = "list-divider">State Names</li>
         <li>
            Karnataka
            <ul>
               <li>Bangalore</li>
               <li>Belgaum</li>
               <li>Hubli</li>
               <li>Mangalore</li>
               <li>Dharwad</li>
            </ul>
         </li>
         
         <li>
            Maharashtra
            <ul>
               <li>Mumbai</li>
               <li>Pune</li>
               <li>Satara</li>
               <li>Sangali</li>
               <li>Thane</li>
            </ul>
         </li>
         
         <li>
            Tamil Nadu
            <ul>
               <li>Chennai</li>
               <li>Coimbator</li>
               <li>Madurai</li>
               <li>Vellore</li>
               <li>Ooty</li>
            </ul>
         </li>
      </ul>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above html code as listview_nested_lists.html file in your server root folder.

  • Open this HTML file as http://localhost/listview_nested_lists.html and the following output will be displayed.

jquery_mobile_widgets.htm
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements