libs/js/jquery-mobile-1.0.1pre/docs/toolbars/docs-footers.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 Docs - Footer Configuration</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-theme="f">
  19                 <h1>Footer configuration</h1>
  20                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
  21         </div><!-- /header -->
  22
  23         <div data-role="content">
  24                 <div class="content-primary">
  25                         <h2>Footer bar structure</h2>
  26
  27                         <p>The <code>footer</code> bar has the same basic structure as the header except it uses the <code> data-role</code> attribute value of <code>footer</code>. </p>
  28
  29 <div class="highlight">
  30 <pre>
  31 <span class="nt">&lt;div</span> <strong><span class="na">data-role=</span><span class="s">"footer"</span></strong><span class="nt">&gt;</span>
  32         <span class="nt">&lt;h4&gt;</span>Footer content<span class="nt">&lt;/h4&gt;</span>
  33 <span class="nt">&lt;/div&gt;</span>
  34 </pre>
  35 </div>
  36
  37
  38                         <p>The <code>footer</code> toolbar will be be themed with the "a" swatch by default (black in the default theme) but you can easily <a href="bars-themes.html">set the theme swatch color</a>.</p>
  39
  40                         <div data-role="footer" data-position="inline">
  41                                 <h4>Footer content</h4>
  42                         </div>
  43
  44                         <p>The page footer is very similar to the header in terms of options and configuration. The primary differences are that the footer is designed to be less structured than the header to allow for more flexibility, so the framework doesn't automatically place buttons to the left or right based on source order as it does in the header. Since footers do not have the same prescriptive markup contentions as headers, use layout <a href="../content/content-grids.html">grids</a> or custom styles to achieve the design you want in a footer.</p>
  45
  46
  47
  48                         <h2>Adding buttons</h2>
  49
  50                         <p>Any link or valid <a href="../buttons/buttons-types.html">button markup</a> added to the footer will automatically be turned into a button. To save space, buttons in toolbars are automatically set to <a href="../buttons/buttons-inline.html">inline styling</a> so the button is only as wide as the text and icons it contains.  </p>
  51
  52                         <p>By default, toolbars don't have any padding to accommodate nav bars and other widgets. To include padding on the bar, add a <code>class="ui-bar"</code> to the footer.</p>
  53
  54
  55 <pre><code>
  56 &lt;div data-role=&quot;footer&quot; class=&quot;ui-bar&quot;&gt;
  57         &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;&gt;Remove&lt;/a&gt;
  58         &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;plus&quot;&gt;Add&lt;/a&gt;
  59         &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-u&quot;&gt;Up&lt;/a&gt;
  60         &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-d&quot;&gt;Down&lt;/a&gt;
  61 &lt;/div&gt;
  62 </code></pre>
  63
  64                         <p>This creates this toolbar with buttons sitting in a row</p>
  65
  66
  67                         <div data-role="footer" class="ui-bar" data-position="inline">
  68                                 <a href="index.html" data-icon="delete">Remove</a>
  69                                 <a href="index.html" data-icon="plus">Add</a>
  70                                 <a href="index.html" data-icon="arrow-u">Up</a>
  71                                 <a href="index.html" data-icon="arrow-d">Down</a>
  72                         </div>
  73
  74                         <p>To group buttons together into a button set, wrap the links in a wrapper with <code> data-role=&quot;controlgroup&quot;</code> and <code>data-type=&quot;horizontal&quot;</code> attributes.</p>
  75
  76 <code>&lt;div data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot;&gt;</code>
  77
  78                         <p>This creates a grouped set of buttons:</p>
  79
  80                         <div data-role="footer" class="ui-bar" data-position="inline">
  81                                 <div data-role="controlgroup" data-type="horizontal">
  82                                         <a href="index.html" data-icon="delete">Remove</a>
  83                                         <a href="index.html" data-icon="plus">Add</a>
  84                                         <a href="index.html" data-icon="arrow-u">Up</a>
  85                                         <a href="index.html" data-icon="arrow-d">Down</a>
  86                                 </div>
  87                         </div>
  88
  89
  90
  91                         <h2>Adding form elements</h2>
  92
  93                         <p>Form elements and other content can also be added to toolbars. Here is an example of a select menu inside a footer bar:</p>
  94
  95
  96                         <div data-role="footer" class="ui-bar" data-position="inline">
  97                                 <label for="select-choice-1">Shipping:</label>
  98                                 <select name="select-choice-1" id="select-choice-1" data-theme="a">
  99                                         <option value="standard">Standard: 7 day</option>
 100                                         <option value="rush">Rush: 3 days</option>
 101                                         <option value="express">Express: next day</option>
 102                                         <option value="overnight">Overnight</option>
 103                                 </select>
 104                         </div>
 105
 106
 107
 108
 109
 110
 111                                         <h2>Persistent footers</h2>
 112                                         <p>In situations where the footer is a global navigation element, you may want it to appear fixed in place between page transitions. This can be accomplished by using the persistent footer feature included in jQuery Mobile.</p>
 113
 114                                         <p>To make a footer stay in place between transitions, add the <code>data-id</code> attribute to the footer of all relevant pages and use the same <code>id</code> value for each. For example, by adding <code>data-id="myfooter"</code> to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. PLEASE NOTE: This effect will only work correctly if the header and footer toolbars are set to <code>data-position="fixed"</code> so they are in view during the transition.</p>
 115
 116
 117
 118
 119
 120                                                 </div><!--/content-primary -->
 121
 122                                                 <div class="content-secondary">
 123
 124                                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 125
 126                                                                         <h3>More in this section</h3>
 127
 128                                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 129
 130                                                                                 <li data-role="list-divider">Toolbars</li>
 131                                                                                 <li><a href="docs-bars.html">Toolbar basics</a></li>
 132                                                                                 <li><a href="docs-headers.html">Header bars</a></li>
 133                                                                                 <li data-theme="a"><a href="docs-footers.html">Footer bars</a></li>
 134                                                                                 <li><a href="docs-navbar.html">Navbars</a></li>
 135                                                                                 <li><a href="bars-fixed.html">Fixed positioning</a></li>
 136                                                                                 <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
 137                                                                                 <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
 138                                                                                 <li><a href="bars-themes.html">Theming toolbars</a></li>
 139
 140                                                                         </ul>
 141                                                         </div>
 142                                                 </div>
 143
 144                                         </div><!-- /content -->
 145
 146                                         <div data-role="footer" class="footer-docs" data-theme="c">
 147                                                         <p>&copy; 2011 The jQuery Project</p>
 148                                         </div>
 149
 150                                         </div><!-- /page -->
 151
 152                                         </body>
 153                                         </html>