Page 35 - JqueryMobile_Manual
P. 35

35

               Fixed position - header and footer will remain positioned at top and bottom of the
               page
                                                  tryjqmob_toolbars_fixed.html
               <!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>
               </head>
               <body>

               <div data-role="page">
                 <div data-role="header" data-position="fixed">
                   <h1>Fixed Header</h1>
                 </div>

                 <div data-role="main" class="ui-content">
                   <p><b>Tip:</b> To see the effect, try to resize the window if the scrollbar is not available.</p>

                   <p><b>Tip:</b> Tapping the screen will hide and show the header/footer IF the scrollbar is available. The
               effect varies depending on where you are on the page.</p>

                   <p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text
               to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
               scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some
               text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
               scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some
               text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
               scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some
               text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
               scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some
               text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
               scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some
               text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
               scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some
               text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
               scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some
               text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
               scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some
               text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
               scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some
               text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable
               scrolling..Some text to enable scrolling..</p>
                 </div>

                 <div data-role="footer" data-position="fixed">
                   <h1>Fixed Footer</h1>
                 </div>
               </div>

               </body>
               </html>
   30   31   32   33   34   35   36   37   38   39   40