jQuery Mobile - Listviews annidati

Descrizione

Includere l'estensione listview nidificata per consentire la risposta nidificata in jQuery mobile e impostare l' opzione childpages su false per un elenco specifico. jQuery mobile 1.3 ripristina l'estensione listview annidata in jQuery mobile 1.4.

Esempio

L'esempio seguente mostra l'uso di listview annidato in 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come listview_nested_lists.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/listview_nested_lists.html e verrà visualizzato il seguente output.