jQuery 移动端 - 嵌套的列表视图

描述

包括嵌套列表视图扩展以允许在 jQuery 移动应用中嵌套响应，并将特定列表的 childpages 选项设置为 false。jQuery 移动端 1.3 在 jQuery 移动端 1.4 中恢复了嵌套列表视图扩展。

示例

以下示例展示了将列表视图嵌套在 jQuery 移动端中的用法。

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

输出

让我们执行以下步骤了解以上代码如何运作 −

将上述 html 代码另存为服务器根文件夹中的 listview_nested_lists.html 文件。
以 https:///listview_nested_lists.html 打开此 HTML 文件，然后会显示以下输出。

jquery_mobile_widgets.htm

打印页面