libs/js/jquery-mobile-1.1.0/docs/toolbars/bars-fixed-methods.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/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9
  10         <script src="../../js/jquery.js"></script>
  11         <script src="../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13
  14 </head>
  15 <body>
  16
  17 <div data-role="page" class="type-interior">
  18
  19         <div data-role="header" data-position="fixed" data-theme="f">
  20
  21                 <h1>Fixed toolbars</h1>
  22                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  23                 <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  24         </div>
  25
  26         <div data-role="content">
  27                 <div class="content-primary">
  28                                 <h2>Fixed toolbars</h2>
  29
  30                             <ul data-role="controlgroup" data-type="horizontal" class="localnav">
  31                               <li><a href="bars-fixed.html" data-role="button" data-transition="fade">Basics</a></li>
  32                               <li><a href="bars-fixed-options.html" data-role="button" data-transition="fade">Options</a></li>
  33                               <li><a href="bars-fixed-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
  34                               <li><a href="bars-fixed-events.html" data-role="button" data-transition="fade">Events</a></li>
  35                             </ul>
  36
  37
  38
  39
  40
  41
  42                                         <p>The fixedtoolbar plugin has the following methods:</p>
  43
  44                                 <dl>
  45
  46                                         <dt><code>show</code> show the toolbar</dt>
  47                                         <dd>
  48                                                 <pre><code>
  49                     $("[data-position='fixed']").fixedtoolbar('show');
  50                                                 </code></pre>
  51
  52 <div class="ui-body ui-body-e">
  53         <p><strong>Note:</strong>Prior to version 1.1, the following syntax was used to show the toolbars, but it is no longer supported:</p>
  54 <pre><code>
  55 $.mobile.fixedToolbars
  56    .show(true);
  57 </code></pre>
  58
  59
  60 </div>
  61
  62                                         </dd>
  63
  64                                         <dt><code>hide</code> hide the toolbar (if it's not a fullscreen toolbar, it'll toggle back to static positioning, which may or may not be hidden from view depending on scroll)</dt>
  65                                         <dd>
  66                                                 <pre><code>
  67 $("[data-position='fixed']").fixedtoolbar('hide');
  68                                                 </code></pre>
  69                                         </dd>
  70
  71                                         <dt><code>toggle</code> calls either the show or the hide method, depending on whether the toolbar is visible.</dt>
  72                                         <dd>
  73                                                 <pre><code>
  74 $("[data-position='fixed']").fixedtoolbar('toggle');
  75                                                 </code></pre>
  76                                         </dd>
  77
  78                                         <dt><code>updatePagePadding</code> update the padding (either top or bottom, depending on if the toolbar is a header or a footer) of the page element parent of the toolbar to match the height of the toolbar.</dt>
  79                                         <dd>
  80                                                 <pre><code>
  81 $("[data-position='fixed']").fixedtoolbar('updatePagePadding');
  82                                                 </code></pre>
  83
  84 <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>
  85                                         </dd>
  86
  87                                         <dt><code>destroy</code> destroy at fixedtoolbar (restore the element to its initial state)</dt>
  88                                         <dd>
  89                                                 <pre><code>
  90 $("[data-position='fixed']").fixedtoolbar('destroy');
  91                                                 </code></pre>
  92                                         </dd>
  93
  94
  95                         </dl>
  96
  97
  98
  99
 100
 101
 102                                 </div><!--/content-primary -->
 103
 104                                 <div class="content-secondary">
 105
 106                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 107
 108                                                         <h3>More in this section</h3>
 109
 110                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 111
 112                                                                 <li data-role="list-divider">Toolbars</li>
 113                                                                 <li><a href="docs-bars.html">Toolbar basics</a></li>
 114                                                                 <li><a href="docs-headers.html">Header bars</a></li>
 115                                                                 <li><a href="docs-footers.html">Footer bars</a></li>
 116                                                                 <li><a href="docs-navbar.html">Navbars</a></li>
 117                                                                 <li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
 118                                                                 <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
 119                                                                 <li><a href="bars-themes.html">Theming toolbars</a></li>
 120
 121                                                         </ul>
 122                                         </div>
 123                                 </div>
 124
 125                         </div><!-- /content -->
 126
 127                         <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
 128                                         <h1>Fixed Footer</h1>
 129                         </div>
 130
 131                         </div><!-- /page -->
 132
 133                         </body>
 134                         </html>