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.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() {
            $( "[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:///navbar_persistent.html 開啟，將顯示以下輸出。

jquery_mobile_widgets.htm

列印頁面

上一個

下一個