libs/js/jquery-mobile-1.0.1pre/docs/toolbars/bars-fullscreen.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Framework - Fullscreen Fixed toolbars</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9         <script src="../../js/jquery.js"></script>
  10         <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
  11         <script src="../_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13 </head>
  14 <body>
  15
  16 <div data-role="page" data-fullscreen="true" class="type-interior">
  17
  18         <div data-role="header" data-position="fixed" data-theme="f">
  19                 <h1>Fullscreen fixed header</h1>
  20                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
  21         </div>
  22
  23         <div data-role="content">
  24                         <div class="content-primary">
  25                                 <img src="images/photo-run.jpeg"  alt="Photo Run">
  26
  27                 <p class="ui-body">This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively &mdash; a common scenario for photo, image or video viewers.</p>
  28
  29                 <p class="ui-body">To enable this toolbar feature type, you apply a <code>data-fullscreen="true"</code> attribute to the <code>div</code> container that has the attribute <code>data-role="page"</code>, and the <code>data-position="fixed"</code> attribute to both the header and footer <code>div</code> elements. </p>
  30
  31                 <p class="ui-body">Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content, so not all content will be accessible with the toolbars open, just as shown in this demo.</p>
  32
  33
  34                                 </div><!--/content-primary -->
  35
  36                                 <div class="content-secondary">
  37
  38                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
  39
  40                                                         <h3>More in this section</h3>
  41
  42                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
  43
  44                                                                 <li data-role="list-divider">Toolbars</li>
  45                                                                 <li><a href="docs-bars.html">Toolbar basics</a></li>
  46                                                                 <li><a href="docs-headers.html">Header bars</a></li>
  47                                                                 <li><a href="docs-footers.html">Footer bars</a></li>
  48                                                                 <li><a href="docs-navbar.html">Navbars</a></li>
  49                                                                 <li><a href="bars-fixed.html">Fixed positioning</a></li>
  50                                                                 <li data-theme="a"><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
  51                                                                 <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
  52                                                                 <li><a href="bars-themes.html">Theming toolbars</a></li>
  53
  54                                                         </ul>
  55                                         </div>
  56                                 </div>
  57
  58                         </div><!-- /content -->
  59
  60                         <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
  61                                         <h1>Fullscreen Fixed Footer</h1>
  62                         </div>
  63
  64                         </div><!-- /page -->
  65
  66                         </body>
  67                         </html>