jQuery Mobile - 動態工具欄

描述

在單擊某個按鈕的情況下，您可以在動態中注入工具欄。您需要透過呼叫以下函式來更新頁面高度和內邊距。

$.mobile.resetActivePageHeight()

示例

以下示例說明了在 jQuery Mobile 中使用動態工具欄。

即時演示

<!DOCTYPE html>
<html>
   <head>
      <title>Dynamic Toolbars</title>
      <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>
         $( document ).on( "click", "#inject-toolbars", function() {
            $( "<div data-role = 'header'><h2>Dynamic Header</h2></div>")
               .prependTo( "#page-with-dynamic-toolbars" )
               .toolbar({ position: "fixed" });
     
            $( "<div data-role = 'footer'><h2>Dynamic Footer</h2></div>")
                .appendTo( "#page-with-dynamic-toolbars" )
                .toolbar({ position: "fixed" });
     
            $.mobile.resetActivePageHeight();
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page" class = "jqm-demos" id = "page-with-dynamic-toolbars" 
         data-url = "page-with-dynamic-toolbars">
         <div role = "main" class = "ui-content jqm-content jqm-fullwidth">
            <h2>Page content</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
            minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
            velit esse cillum dolore eu fugiat nulla pariatur.</p>
            
            <div data-demo-html = "#page-with-dynamic-toolbars" data-demo-js = "true">
               <button id = "inject-toolbars" class = "ui-btn ui-btn-inline 
               ui-corner-all">Inject toolbars</button>
            </div>
         </div>
      </div>
   </body>
</html>

輸出

讓我們執行以下步驟，瞭解上述程式碼如何運作 −

將上述 HTML 程式碼儲存在您伺服器根資料夾中的 toolbar_widget_dynamic.html 檔案中。
開啟此 HTML 檔案作為 https:///toolbar_widget_dynamic.html，將顯示以下輸出。

jquery_mobile_widgets.htm

列印頁面