libs/js/jquery-mobile-1.0.1pre/docs/toolbars/bars-themes.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 - Theming 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-theme="f">
  19                 <h1>Bar theming </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
  24         <div data-role="content">
  25                 <div class="content-primary">
  26                 <p>Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. </p>
  27
  28
  29                 <h2>Theming headers and footers</h2>
  30                 <p>To set the header or footer bars to a different color in your theme, add the <code> data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p>
  31
  32 <div class="highlight">
  33 <pre>
  34 <span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span> <strong><span class="na">data-theme=</span><span class="s">"b"</span></strong><span class="nt">&gt;</span>
  35         <span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span>
  36 <span class="nt">&lt;/div&gt;</span>
  37 </pre>
  38 </div>
  39
  40
  41                 <h2>Theming buttons in toolbars</h2>
  42
  43                 <p>Any link added inside the header block will be automatically styled as a button that matches the color of the bar's theme swatch. To make a button stand out as a primary call to action, the <code> data-theme</code> attribute can be used to specify a contrasting button color from a different theme swatch. For example, if we set the header to theme "c" (light gray), both buttons would be styled as the "c" button by default. If we wanted the Save button to visually pop, we can override the color by setting the <code> data-theme</code> attribute to "b" (blue in our default theme) on the Save button's anchor.</p>
  44
  45 <div class="highlight">
  46 <pre>
  47 <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"add-user.php"</span> <strong><span class="na">data-theme=</span><span class="s">"b"</span></strong><span class="nt">&gt;</span>Save<span class="nt">&lt;/a&gt;</span>
  48 </pre>
  49 </div>
  50
  51
  52
  53                 <h2>Theme variations</h2>
  54                 <p>This is a demo of the variation that can be achieved by tweaking the theme swatches and buttons inside the headers and footers.</p>
  55                 <h3>Headers</h3>
  56
  57
  58                 <div data-role="header" data-position="inline">
  59                         <h1>Bar theme "a"</h1>
  60                         <a href="index.html" data-icon="plus" data-theme="c">New</a>
  61                 </div>
  62
  63                 <div data-role="header" data-position="inline">
  64                         <a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
  65                         <h1>Bar theme "a"</h1>
  66                         <a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
  67                 </div>
  68
  69                 <div data-role="header" data-position="inline" data-theme="b">
  70                         <h1>Bar theme "b"</h1>
  71                         <a href="index.html" data-icon="plus" data-theme="a">New</a>
  72                 </div>
  73
  74                 <div data-role="header" data-position="inline" data-theme="b">
  75                         <a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
  76                         <h1>Bar theme "b"</h1>
  77                         <a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="d">Save</a>
  78                 </div>
  79
  80                 <div data-role="header" data-position="inline" data-theme="c">
  81                         <h1>Bar theme "c"</h1>
  82                         <a href="index.html" data-icon="plus" data-theme="a">New</a>
  83                 </div>
  84
  85                 <div data-role="header" data-position="inline" data-theme="c">
  86                         <a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
  87                         <h1>Bar theme "c"</h1>
  88                         <a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
  89                 </div>
  90
  91                 <div data-role="header" data-position="inline" data-theme="d">
  92                         <h1>Bar theme "d"</h1>
  93                         <a href="index.html" data-icon="plus" data-theme="a">New</a>
  94                 </div>
  95
  96                 <div data-role="header" data-position="inline" data-theme="d">
  97                         <a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
  98                         <h1>Bar theme "d"</h1>
  99                         <a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
 100                 </div>
 101
 102     <h3>Footers</h3>
 103         <p>These are examples of a footer with link buttons inside. Note that footers do not have the same prescriptive markup contentions as headers with button slots so use <a href="../content/content-grids.html">layout grids</a> or custom styles to achieve the design you want.</p>
 104
 105
 106
 107         <div data-role="footer" data-theme="a">
 108             <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
 109             <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
 110             <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
 111             <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
 112         </div>
 113
 114         <div data-role="footer" data-theme="b">
 115             <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
 116             <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
 117             <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
 118             <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
 119         </div>
 120
 121     <div data-role="footer" data-theme="c">
 122             <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
 123             <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
 124             <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
 125             <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
 126         </div>
 127
 128         <div data-role="footer" data-theme="d">
 129             <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
 130             <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
 131             <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
 132             <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
 133                 </div>
 134
 135         <div data-role="footer" data-theme="e">
 136             <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
 137             <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
 138             <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
 139             <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
 140                 </div>
 141
 142
 143                                 </div><!--/content-primary -->
 144
 145                                 <div class="content-secondary">
 146
 147                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 148
 149                                                         <h3>More in this section</h3>
 150
 151                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 152
 153                                                                 <li data-role="list-divider">Toolbars</li>
 154                                                                 <li><a href="docs-bars.html">Toolbar basics</a></li>
 155                                                                 <li><a href="docs-headers.html">Header bars</a></li>
 156                                                                 <li><a href="docs-footers.html">Footer bars</a></li>
 157                                                                 <li><a href="docs-navbar.html">Navbars</a></li>
 158                                                                 <li><a href="bars-fixed.html">Fixed positioning</a></li>
 159                                                                 <li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
 160                                                                 <li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
 161                                                                 <li data-theme="a"><a href="bars-themes.html">Theming toolbars</a></li>
 162
 163                                                         </ul>
 164                                         </div>
 165                                 </div>
 166
 167                         </div><!-- /content -->
 168
 169                         <div data-role="footer" class="footer-docs" data-theme="c">
 170                                         <p>&copy; 2011 The jQuery Project</p>
 171                         </div>
 172
 173                         </div><!-- /page -->
 174
 175                         </body>
 176                         </html>