libs/js/jquery-mobile-1.1.0/docs/pages/pages-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 Docs - Theming Pages</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-theme="f">
  20                 <h1>Theming pages</h1>
  21                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  22                 <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  23         </div><!-- /header -->
  24
  25         <div data-role="content">
  26                 <div class="content-primary">
  27
  28                         <ul data-role="controlgroup" data-type="horizontal" class="localnav">
  29                                 <li><a href="pages-themes.html" data-role="button" data-transition="fade" class="ui-btn-active">Theme Overview</a></li>
  30
  31                                 <li><a href="pages-themes/theme-a.html" data-role="button" data-transition="fade">A&nbsp;</a></li>
  32                                 <li><a href="pages-themes/theme-b.html" data-role="button" data-transition="fade">B&nbsp;</a></li>
  33                                 <li><a href="pages-themes/theme-c.html" data-role="button" data-transition="fade">C&nbsp;</a></li>
  34                                 <li><a href="pages-themes/theme-d.html" data-role="button" data-transition="fade">D&nbsp;</a></li>
  35                                 <li><a href="pages-themes/theme-e.html" data-role="button" data-transition="fade">E&nbsp;</a></li>
  36                         </ul>
  37
  38                         <h2>Page Theming</h2>
  39
  40                         <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages are styled. There is detailed theming documentation within each page widget, but let's look at a few high-level examples of how theming is applied.</p>
  41
  42                         <p>The <code> data-theme</code> attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. While the <code>data-theme</code> attribute could be added to the content container, we recommend adding it instead to <code>div</code> or container that has been assigned the <code> data-role="page"</code> attribute to ensure that the background color is applied to the full page. When this is done, all widgets on the page will also inherit the theme specified in the page container. However, headers and footers will default to theme "a". If you want to have a page with, for example, only theme "b" for all its elements, including its header and footer, you will need to specify <code>data-theme="b"</code> to the page <code>div</code> as well as the header and footer <code>divs</code>. </p>
  43
  44                         <p>The default Theme mixes styles from multiple swatches to create visual texture and present the various elements in optimal contrast to one another:</p>
  45
  46                         <div data-role="header">
  47                                 <h1>Default Theme</h1>
  48                         </div>
  49
  50                         <div class="ui-body ui-body-c">
  51                                 <h3>Default Theme Content Header</h3>
  52                                 <p>This is the default content color swatch and a preview of a <a href="#" class="ui-link">link</a>.</p>
  53
  54                                 <a href="#" data-role="button" data-inline="true">Button</a>
  55                         </div>
  56
  57                         <p>And each of the five "swatches" applies its style consistently across all page elements, as shown below:</p>
  58
  59                         <h2>Swatch A</h2>
  60                         <div data-role="header">
  61                                 <h1>Header A</h1>
  62                         </div>
  63
  64
  65                         <div class="ui-body ui-body-a">
  66                                 <h3>Header</h3>
  67                                 <p>This is content color swatch "A" and a preview of a <a href="#" class="ui-link">link</a>.</p>
  68                                 <a href="#" data-role="button" data-inline="true">Button</a>
  69                         </div>
  70
  71
  72                         <h2>Swatch B</h2>
  73                         <div data-role="header" data-theme="b">
  74                                 <h1>Header B</h1>
  75                         </div>
  76                         <div class="ui-body ui-body-b">
  77                                 <h3>Header</h3>
  78                                 <p>This is content color swatch "B" and a preview of a <a href="#" class="ui-link">link</a>.</p>
  79                                 <a href="#" data-role="button" data-inline="true">Button</a>
  80                         </div>
  81
  82                         <h2>Swatch C</h2>
  83                         <div data-role="header" data-theme="c">
  84                                 <h1>Header C</h1>
  85                         </div>
  86                         <div class="ui-body ui-body-c">
  87                                 <h3>Header</h3>
  88                                 <p>This is content color swatch "C" and a preview of a <a href="#" class="ui-link">link</a>.</p>
  89                                 <a href="#" data-role="button" data-inline="true">Button</a>
  90                         </div>
  91
  92                         <h2>Swatch D</h2>
  93                         <div data-role="header" data-theme="d">
  94                                 <h1>Header D</h1>
  95                         </div>
  96                         <div class="ui-body ui-body-d">
  97                                 <h3>Header</h3>
  98                                 <p>This is content color swatch "D" and a preview of a <a href="#" class="ui-link">link</a>.</p>
  99                                 <a href="#" data-role="button" data-inline="true">Button</a>
 100                         </div>
 101
 102                         <h2>Swatch E</h2>
 103                         <div data-role="header" data-theme="e">
 104                                 <h1>Header E</h1>
 105                         </div>
 106                         <div class="ui-body ui-body-e">
 107                                 <h3>Header</h3>
 108                                 <p>This is content color swatch "E" and a preview of a <a href="#" class="ui-link">link</a>.</p>
 109                                 <a href="#" data-role="button" data-inline="true">Button</a>
 110                         </div>
 111
 112                                 </div><!--/content-primary -->
 113
 114                                 <div class="content-secondary">
 115
 116                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 117
 118                                                         <h3>More in this section</h3>
 119
 120                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 121
 122                                                                 <li data-role="list-divider">Pages &amp; Dialogs</li>
 123                                                                 <li><a href="page-anatomy.html">Anatomy of a page</a></li>
 124                                                                 <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
 125                                                                 <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
 126                                                                 <li><a href="page-titles.html">Page titles</a></li>
 127                                                                 <li><a href="page-links.html">Linking pages</a></li>
 128                                                                 <li><a href="page-transitions.html">Page transitions</a></li>
 129                                                                 <li><a href="page-dialogs.html">Dialogs</a></li>
 130                                                                 <li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
 131                                                                 <li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
 132                                                                 <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
 133                                                                 <li><a href="page-scripting.html">Scripting pages</a></li>
 134                                                                 <li><a href="phonegap.html">PhoneGap apps</a></li>
 135                                                                 <li><a href="touchoverflow.html">touchOverflow feature</a></li>
 136                                                                 <li data-theme="a"><a href="pages-themes.html">Theming pages</a></li>
 137                                                         </ul>
 138                                         </div>
 139                                 </div>
 140
 141                         </div><!-- /content -->
 142
 143                         <div data-role="footer" class="footer-docs" data-theme="c">
 144                                         <p>&copy; 2011-12 The jQuery Foundation</p>
 145                         </div>
 146
 147                         </div><!-- /page -->
 148
 149                         </body>
 150                         </html>