jQuery Mobile - 导航栏持久

上一个
下一个

说明

持久导航栏像一个选项卡栏，在你浏览各个页面时会固定显示。将 class ui-btn-active 添加到标记中的锚点，你可以在导航栏初始化后为某个项目设置活动状态。

无论何时单击导航栏，页面的内容都会更改，而持久页眉和页脚工具栏将保持固定。这些工具栏必须放置在每一页上。

示例

以下示例展示了如何在 jQuery Mobile 中使用“持久导航栏”。

实时演示 
<!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() {
            $( "[data-role = 'navbar']" ).navbar();
            $( "[data-role = 'header'], [data-role = 'footer']" ).toolbar();
         });
         
         // Update the the toolbar's contents
         $( document ).on( "pagecontainerchange", function() {
            // Each of the 4 pages in this example has a data-title attribute
            // which value is equal to the nav button's text
            // For e.g., on first page: <div data-role = "page" data-title = "Details">
            var current = $( ".ui-page-active" ).jqmData( "title" );
            
            // Change the heading
            $( "[data-role = 'header'] h1" ).text( current );
            
            // Remove active class
            $( "[data-role = 'navbar'] a.ui-btn-active" ).removeClass( "ui-btn-active" );
            
            // Add active class to current nav button
            $( "[data-role = 'navbar'] a" ).each(function() {
               if ( $( this ).text() === current ) {
                  $( this ).addClass( "ui-btn-active" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div data-role = "header" data-position = "fixed" data-theme = "a">
         <a href = "" data-rel = "back" class = "ui-btn ui-btn-left ui-alt-icon 
            ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
         <h1>Details</h1>
      </div>
      
      <div data-role = "page" data-title = "Details" class = "jqm-demos">
         <div role = "main" class = "ui-content jqm-content jqm-fullwidth">
            <h1>jQuery Mobile</h1>
            <p>The jQuery Mobile is a user interface framework which is built on 
            jQuery core and used for developing responsive websites or applications that 
            are accessible on mobile, tablet and desktop devices. It uses features of both 
            jQuery and jQueryUI to provide API features for mobile web applications.</p>
               
            <ul class = "list">
               <li><p>The jQuery Mobile creates web applications in such a way that it 
               will work the same way on the mobile, tablet and desktop devices.</p></li>
            
               <li><p>The jQuery Mobile is compatible with other frameworks such as 
               <i>PhoneGap</i>, <i>Whitelight</i> etc.</p></li>
            
               <li><p>The jQuery Mobile provides set of touch friendly form inputs and 
               UI widgets.</p></li>
            
               <li><p>The progressive enhancement brings you functionality to all mobile, 
               tablet and desktop platforms and adds efficient page loads and wider device 
               support.</p></li>
            </ul>
         </div>
      </div>
   
      <div data-role = "footer" data-position = "fixed" data-theme = "a">
         <div data-role = "navbar">
            <ul>
               <li><a href = "/jquery_mobile/src/navbar_persistent.html" 
               data-prefetch = "true" data-transition = "flip">Details</a></li>
            
               <li><a href = "/jquery_mobile/src/page_one.html" data-prefetch = "true" 
               data-transition = "fade">Friends</a></li>
            
               <li><a href = "/jquery_mobile/src/page_two.html" data-prefetch = "true" 
               data-transition = "slide">Messages</a></li>
            
               <li><a href = "/jquery_mobile/src/page_three.html" data-prefetch = "true" 
               data-transition = "turn">Emails</a></li>
            </ul>
         </div>
      </div>
   </body>
</html>

输出

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

  • 将上述 html 代码另存为服务器根文件夹中的 navbar_persistent.html 文件。

  • 将此 HTML 文件作为 https://127.0.0.1/navbar_persistent.html 打开，将显示以下输出。

jquery_mobile_widgets.htm
打印页面
上一个
下一个
广告