Page 36 - JqueryMobile_Manual
P. 36

36

               Fullscreen position - header and footer remains positioned at the top and bottom,
               but also over the page content
                                                tryjqmob_toolbars_fullscreen.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" data-fullscreen="true">
                   <h1>Fixed and Fullscreen Header</h1>
                 </div>

                 <div data-role="main" class="ui-content"><br><br>
                   <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 and footer.</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" data-fullscreen="true">
                   <h1>Fixed and Fullscreen Footer</h1>
                 </div>
               </div>

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