jQuery Mobile: vistas de lista anidadas

Descripción

Incluya la extensión de vista de lista anidada para permitir la respuesta anidada en jQuery mobile y establezca la opción childpages en false para una lista específica. jQuery mobile 1.3 restaura la extensión de vista de lista anidada en jQuery mobile 1.4.

Ejemplo

El siguiente ejemplo demuestra el uso de listview anidado en jQuery Mobile.

<!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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como listview_nested_lists.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/listview_nested_lists.html y se mostrará el siguiente resultado.

↰ Previous page