libs/js/jquery-mobile-1.0.1pre/docs/toolbars/docs-headers.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 - Header Bars</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>Header bars</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>Header structure</h2>
  26                         <p>The <code>header</code> is a toolbar at the top of the page that usually contains the page title text and optional buttons positioned to the the left and/or right of the title for navigation or actions.</p>
  27
  28                         <p>The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.</p>
  29
  30 <div class="highlight">
  31 <pre>
  32 <span class="nt">&lt;div</span> <strong><span class="na">data-role=</span><span class="s">"header"</span></strong><span class="nt">&gt;</span>
  33         <span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span>
  34 <span class="nt">&lt;/div&gt;</span>
  35 </pre>
  36 </div>
  37
  38                         <h2>Default header features</h2>
  39                         <p>The <code>header</code> toolbar is 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>
  40
  41
  42
  43                         <div data-role="header" data-position="inline">
  44                                 <h1>Page title</h1>
  45                         </div>
  46
  47
  48                         <h2>Adding buttons</h2>
  49
  50
  51
  52
  53
  54                         <p>In the standard header configuration, there are slots for buttons on either side of the text heading. Each button is typically an <code>anchor</code> element, but any valid <a href="../buttons/buttons-types.html">button markup</a> will work. To save space, buttons in toolbars are 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>
  55
  56
  57
  58
  59                         <h3>Default button positioning</h3>
  60
  61                         <p>The header plugin looks for immediate children of the header container, and automatically sets the first link in the left button slot and the second link in the right. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot based on their sequence in the source order. </p>
  62
  63
  64 <pre><code>
  65 &lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot;&gt;
  66         &lt;a href=&quot;index.html&quot; data-icon=&quot;delete&quot;&gt;Cancel&lt;/a&gt;
  67         &lt;h1&gt;Edit Contact&lt;/h1&gt;
  68         &lt;a href=&quot;index.html&quot; data-icon=&quot;check&quot;&gt;Save&lt;/a&gt;
  69 &lt;/div&gt;
  70 </code></pre>
  71
  72
  73                         <div data-role="header" data-position="inline">
  74                                 <a href="index.html" data-icon="delete">Cancel</a>
  75                                 <h1>Edit Contact</h1>
  76                                 <a href="index.html" data-icon="check">Save</a>
  77                         </div>
  78                         <p>Buttons automatically adopt the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out &mdash; here, we add the <code> data-theme</code> attribute and set the color swatch for the button to "b" to make the "Save" button pop.</p>
  79
  80                         <pre><code>
  81 &lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot;&gt;
  82         &lt;a href=&quot;index.html&quot; data-icon=&quot;delete&quot;&gt;Cancel&lt;/a&gt;
  83         &lt;h1&gt;Edit Contact&lt;/h1&gt;
  84         &lt;a href=&quot;index.html&quot; data-icon=&quot;check&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;
  85 &lt;/div&gt;
  86 </code></pre>
  87
  88
  89                         <div data-role="header" data-position="inline">
  90                                 <a href="index.html" data-icon="delete">Cancel</a>
  91                                 <h1>Edit Contact</h1>
  92                                 <a href="index.html" data-icon="check" data-theme="b">Save</a>
  93                         </div>
  94
  95                         <h3>Controlling button position with classes</h3>
  96
  97                         <p>The button position can also be controlled by adding classes to the button anchors, rather than relying on source order. This is especially useful if you only want a button in the right slot. To specify the button position, add the class of <code>ui-btn-left</code> or <code>ui-btn-right</code> to the anchor.</p>
  98
  99
 100
 101
 102 <div class="highlight">
 103 <pre><code>
 104 &lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot;
 105         &lt;h1&gt;Page Title&lt;/h1&gt;
 106         &lt;a href=&quot;index.html&quot; data-icon=&quot;gear&quot; class=&quot;ui-btn-right&quot;&gt;Options&lt;/a&gt;
 107 &lt;/div&gt;
 108 </code></pre>
 109 </div>
 110
 111                         <div data-role="header" data-position="inline" >
 112                                 <h1>Page Title</h1>
 113                                 <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
 114                         </div>
 115
 116
 117                 <h2>Adding Back buttons</h2>
 118
 119                 <p>jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app web view. The framework automatically generates a "back" button on a header when the page plugin's <code>addBackBtn</code> option is true. This can also be set via markup if the page div has a <code>data-add-back-btn="true"</code> attribute. </p>
 120
 121
 122                 <p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, <strong>be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers</strong>. Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute instead.</p>
 123
 124                 <h2>Customizing the back button text</h2>
 125
 126                 <p>If you'd like to configure the back button text, you can either use the <code>data-back-btn-text="previous"</code> attribute on your page element, or set it programmatically via the page plugin's options: <br /><code>$.mobile.page.prototype.options.backBtnText = "previous";</code></p>
 127
 128                 <h3>Default back button style</h3>
 129                 <p>If you'd like to configure the back button role-theme, you can use: <br /><code>$.mobile.page.prototype.options.backBtnTheme = "a";</code><br />
 130                 If you're doing this programmatically, set this option inside the mobileinit event handler.</p>
 131
 132                         <h2>Custom header configurations</h2>
 133                         <p>If you need to to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in a container <code>div</code> inside the header container and the plugin won't apply the automatic button logic so you can write custom styles for laying out the content in your header.</p>
 134
 135                         <p>It's also possible to create custom bars without using the header data-role at all. For example, start with any container and add the <code>ui-bar</code> class to apply standard bar padding and  add the <code>ui-bar-b</code> class to assign the bar swatch styles from your theme (the "b" can be any swatch letter).</p>
 136
 137                         <pre><code>
 138 &lt;div <strong>class=&quot;ui-bar ui-bar-b&quot;</strong>&gt;
 139         &lt;h3&gt;I&#x27;m just a div with bar classes and a &lt;a href=&quot;#&quot; data-role=&quot;button&quot;&gt;Button&lt;/a&gt;&lt;/h3&gt;
 140 &lt;/div&gt;
 141                         </code></pre>
 142
 143                         <p>This will produce this bar:</p>
 144                                 <div class="ui-bar ui-bar-b">
 145                                         <h3>I'm just a div with bar classes and a <a href="#" data-role="button">Button</a></h3>
 146                                 </div>
 147
 148                                 <p>By writing some simple styles, it's easy to build little message bars like this:</p>
 149                                         <!-- Yes, the inline styles aren't recommended in a real system but they are used to simply illustrate how to tweak CSS -->
 150                                         <div class="ui-bar ui-bar-e">
 151                                                 <h3 style="float:left; margin-top:8px;">This is an alert message with dismiss button. </h3>
 152                                                 <div style="float:right; margin-top:4px;"><a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Button</a></div>
 153                                                 <p style="clear:both; font-size:85%; margin-bottom:8px;">And here's some additional text in a paragraph.</p>
 154                                         </div>
 155                                 </div><!--/content-primary -->
 156
 157                                 <div class="content-secondary">
 158
 159                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 160
 161                                                         <h3>More in this section</h3>
 162
 163                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 164
 165                                                                 <li data-role="list-divider">Toolbars</li>
 166                                                                 <li><a href="docs-bars.html">Toolbar basics</a></li>
 167                                                                 <li data-theme="a"><a href="docs-headers.html">Header bars</a></li>
 168                                                                 <li><a href="docs-footers.html">Footer bars</a></li>
 169                                                                 <li><a href="docs-navbar.html">Navbars</a></li>
 170                                                                 <li><a href="bars-fixed.html">Fixed positioning</a></li>
 171                                                                 <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
 172                                                                 <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
 173                                                                 <li><a href="bars-themes.html">Theming toolbars</a></li>
 174
 175                                                         </ul>
 176                                         </div>
 177                                 </div>
 178
 179                         </div><!-- /content -->
 180
 181                         <div data-role="footer" class="footer-docs" data-theme="c">
 182                                         <p>&copy; 2011 The jQuery Project</p>
 183                         </div>
 184
 185                         </div><!-- /page -->
 186
 187                         </body>
 188                         </html>