Page 34 - JqueryMobile_Manual
P. 34

34

                             Inline position - header and footer inline with page content
                                                  tryjqmob_toolbars_inline.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="inline">
                   <h1>Inline 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>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="inline">
                   <h1>Inline Footer</h1>
                 </div>
               </div>

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