libs/js/jquery-mobile-1.0.1pre/docs/toolbars/bars-fixed.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 - 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" class="type-interior">
  17
  18         <div data-role="header" data-position="fixed" data-theme="f">
  19
  20                 <h1>Fixed toolbars</h1>
  21                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
  22         </div>
  23
  24         <div data-role="content">
  25                 <div class="content-primary">
  26                                 <h2>Fixed toolbars</h2>
  27                 <p>This is a demo of the "fixed" headers and footers used in the jQuery Mobile framework. The page content flows naturally, allowing us to take advantage of native scrolling instead of a scripting a faux-scrolling workaround. The header and footer divs are right in the flow of the document, but whenever they are out of view the framework will dynamically re-position them into view if the browser supports this feature, otherwise they will simply stay inline.</p>
  28                 <p>To enable this behavior on a header or footer, add the <code>data-position="fixed"</code> attribute to the toolbar container.</p>
  29
  30
  31                 <h2>Tap to toggle visibility</h2>
  32                 <p>To toggle the visibility of fixed toolbars, tap the screen. For example, if the fixed toolbars are visible, tap the screen to hide the toolbars and take full advantage of the screen real estate for content. Tapping again will bring the toolbars back into view. </p>
  33                 <p>It's possible to turn off the the tap to toggle visibility behavior like this:</p>
  34 <pre><code>
  35 $.mobile.fixedToolbars
  36    .setTouchToggleEnabled(false);
  37 </code></pre>
  38
  39                 <h2>Updating toolbar positioning</h2>
  40                 <p>If the height of the page changes, either through dynamic injection of markup, or by widgets that hide or collapse content, it can throw off the dynamic positioning of the toolbars. To manually tell the toolbars to re-position themselves then fade in, use <code>$.mobile.fixedToolbars.show();</code>. To have them appear immediately without the fade:</p>
  41 <pre><code>
  42 $.mobile.fixedToolbars
  43    .show(true);
  44 </code></pre>
  45
  46                 <p>There is also an <code>updatelayout</code> event that can be used to trigger the toolbars to re-position. Developers who are building dynamic applications that inject content into the current page can also manually trigger this <code><a href="../api/events.html">updatelayout</a></code> event to ensure components on the page update in response to the new content that was just added. This event is used internally in the collapsible and listview filter plugins and is powerful because it's not toolbar-specific -- any widget can be built to listen for the <code>updatelayout</code> event to update the widget in response.</p>
  47
  48
  49                 <h2>Known limitations</h2>
  50
  51                 <p>jQuery Mobile uses dynamically re-positioned toolbars for the fixed header effect because very few mobile browsers support the <code>position:fixed</code> CSS property. Although our fixed toolbar feature works fairly well, there are a number of technical limitations that can cause the toolbars to appear to scroll with the page. Most of these rendering issues are due to the fact many mobile platforms (iOS, Android, etc.) essentially take a static screenshot of the page and display this image during scrolling instead of the actual rendered HTML. This improves scrolling performance, but when scrolling happens quickly, the toolbars will be "burned" into the page screenshot before our script can hide them so they appear to scroll with the page. We have optimized this as much as we possibly can, but there are going to be situations where fixed toolbars won't work perfectly due to browser limitations, so this is important to note when considering whether to use this feature.</p>
  52
  53                 <h2>True fixed toolbars: touchOverflowEnabled</h2>
  54
  55                 <p>In order to achieve true fixed toolbars, a browser needs to either support <code>position:fixed</code> or <code>overflow:auto</code>. Fortunately, this support is coming to mobile platforms so we can achieve this with web standards. In jQuery Mobile, we have added a global feature called <code>touchOverflowEnabled</code> that leverages the <code>overflow:auto</code> CSS property on supported platforms like iOS5. When enabled, the framework wraps each page in a container with it's own internal scrolling. This allows us to position the toolbars outside the scrolling body so they truly stay fixed in place at all times. Learn more about this feature on the <a href="../api/globalconfig.html">global options</a> page or <a href="../config/touchOverflow.html">demo</a> this feature (currently iOS5 only, other browsers will fall back to dynamically re-positioned fixed toolbars).</p>
  56
  57                 <hr>
  58
  59
  60                 <h2>The rest of the page is just sample content to make the page very long</h2>
  61
  62                         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
  63
  64                         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
  65
  66
  67                         <h3>And an inset list</h3>
  68
  69                                         <ul data-role="listview" data-inset="true">
  70                                                 <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
  71                                                 <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
  72                                                 <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
  73                                                 <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
  74                                                 <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
  75                                         </ul>
  76
  77                         <br />
  78                         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
  79
  80                         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
  81
  82
  83                         <h3>Embedded form</h3>
  84
  85                         <form action="#" method="get">
  86
  87                                 <div data-role="fieldcontain">
  88                          <label for="name">Text Input:</label>
  89                          <input type="text" name="name" id="name" value=""  />
  90                                 </div>
  91
  92                                 <div data-role="fieldcontain">
  93                                 <label for="textarea">Textarea:</label>
  94                                 <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  95                                 </div>
  96
  97                                 <div data-role="fieldcontain">
  98                                         <label for="slider2">Flip switch:</label>
  99                                         <select name="slider2" id="slider2" data-role="slider">
 100                                                 <option value="off">Off</option>
 101                                                 <option value="on">On</option>
 102                                         </select>
 103                                 </div>
 104
 105                                 <div data-role="fieldcontain">
 106                                         <label for="slider">Slider:</label>
 107                                         <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
 108                                 </div>
 109
 110
 111                                 <div data-role="fieldcontain">
 112                                         <label for="select-choice-1" class="select">Choose shipping method:</label>
 113                                         <select name="select-choice-1" id="select-choice-1">
 114                                                 <option value="standard">Standard: 7 day</option>
 115                                                 <option value="rush">Rush: 3 days</option>
 116                                                 <option value="express">Express: next day</option>
 117                                                 <option value="overnight">Overnight</option>
 118                                         </select>
 119                                 </div>
 120
 121
 122                         <div class="ui-body ui-body-b">
 123                         <fieldset class="ui-grid-a">
 124                                         <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
 125                                         <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
 126                     </fieldset>
 127                         </div>
 128                 </form>
 129
 130                 <h3>A bit more text</h3>
 131
 132                 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
 133
 134
 135
 136
 137                                 </div><!--/content-primary -->
 138
 139                                 <div class="content-secondary">
 140
 141                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 142
 143                                                         <h3>More in this section</h3>
 144
 145                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 146
 147                                                                 <li data-role="list-divider">Toolbars</li>
 148                                                                 <li><a href="docs-bars.html">Toolbar basics</a></li>
 149                                                                 <li><a href="docs-headers.html">Header bars</a></li>
 150                                                                 <li><a href="docs-footers.html">Footer bars</a></li>
 151                                                                 <li><a href="docs-navbar.html">Navbars</a></li>
 152                                                                 <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
 153                                                                 <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
 154                                                                 <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
 155                                                                 <li><a href="bars-themes.html">Theming toolbars</a></li>
 156
 157                                                         </ul>
 158                                         </div>
 159                                 </div>
 160
 161                         </div><!-- /content -->
 162
 163                         <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
 164                                         <h1>Fixed Footer</h1>
 165                         </div>
 166
 167                         </div><!-- /page -->
 168
 169                         </body>
 170                         </html>