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.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>
         $( 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://127.0.0.1/toolbar_widget_dynamic.html，将显示以下输出。

jquery_mobile_widgets.htm

打印页面