libs/js/jquery-mobile-1.0.1pre/docs/content/content-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 - Content Themes</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>Theming content</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>Theming the content area</h2>
  26                 <p>The main content area of a page (container with the <code> data-role="content"</code> attribute) should be themed by adding the <code> data-theme</code> attribute to the <code> data-role="page"</code> container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add the <code> data-theme</code> attribute to the content container, the background color will stop after the content. So there may be a gap in color between the content and fixed footer.)</p>
  27                 <p>Additionally, the content area of a collapsible can be themed to match the theme of the collapsible header using the <code>data-content-theme</code> attribute.</p>
  28
  29 <code>
  30 &lt;div data-role=&quot;page&quot; <strong> data-theme=&quot;a&quot;</strong> <strong>data-content-theme=&quot;a&quot;</strong>&gt;
  31 </code>
  32
  33                 <h2>Theming collapsible blocks</h2>
  34                 <p>To set the color of the collapsible header, add the <code> data-theme</code> attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.</p>
  35
  36 <code>
  37 &lt;div data-role=&quot;collapsible&quot; data-collapsed=&quot;true&quot; <strong> data-theme=&quot;a&quot;&gt;</strong>
  38 </code>
  39                 <h2>Themed examples</h2>
  40
  41                 <p><strong>A</strong> theme swatch on content &amp; collapsible</p>
  42                 <div class="ui-body ui-body-a">
  43                         <h1>H1 Heading</h1>
  44                         <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
  45                         <div data-role="collapsible" data-collapsed="true" data-theme="a">
  46                                 <h3>I'm a themed collapsible</h3>
  47                                 <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
  48                         </div><!-- /collapsible -->
  49                         <div data-role="collapsible" data-theme="a" data-content-theme="a">
  50                                 <h3>I'm a themed collapsible with a themed content</h3>
  51                                 <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
  52                         </div>
  53                 </div><!-- /themed container -->
  54
  55                 <p><strong>B</strong> theme swatch on content &amp; collapsible</p>
  56                 <div class="ui-body ui-body-b">
  57                         <h1>H1 Heading</h1>
  58                         <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
  59                         <div data-role="collapsible" data-collapsed="true" data-theme="b">
  60                                 <h3>I'm a themed collapsible</h3>
  61                                 <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
  62                         </div><!-- /collapsible -->
  63                         <div data-role="collapsible" data-theme="b" data-content-theme="b">
  64                                 <h3>I'm a themed collapsible with a themed content</h3>
  65                                 <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
  66                         </div>
  67                 </div><!-- /themed container -->
  68
  69                 <p><strong>C</strong> theme swatch on content &amp; collapsible</p>
  70                 <div class="ui-body ui-body-c">
  71                         <h1>H1 Heading</h1>
  72                         <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
  73                         <div data-role="collapsible" data-collapsed="true" data-theme="c">
  74                                 <h3>I'm a themed collapsible</h3>
  75                                 <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
  76                         </div><!-- /collapsible -->
  77                         <div data-role="collapsible" data-theme="c" data-content-theme="c">
  78                                 <h3>I'm a themed collapsible with a themed content</h3>
  79                                 <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
  80                         </div>
  81                 </div><!-- /themed container -->
  82
  83                 <p><strong>D</strong> theme swatch on content &amp; collapsible</p>
  84                 <div class="ui-body ui-body-d">
  85                         <h1>H1 Heading</h1>
  86                         <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
  87                         <div data-role="collapsible" data-collapsed="true" data-theme="d">
  88                                 <h3>I'm a themed collapsible</h3>
  89                                 <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
  90                         </div><!-- /collapsible -->
  91                         <div data-role="collapsible" data-theme="d" data-content-theme="d">
  92                                 <h3>I'm a themed collapsible with a themed content</h3>
  93                                 <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
  94                         </div>
  95                 </div><!-- /themed container -->
  96
  97                 <p><strong>E</strong> theme swatch on content &amp; collapsible</p>
  98                 <div class="ui-body ui-body-e">
  99                         <h1>H1 Heading</h1>
 100                         <p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
 101                         <div data-role="collapsible" data-collapsed="true" data-theme="e">
 102                                 <h3>I'm a themed collapsible</h3>
 103                                 <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
 104                         </div><!-- /collapsible -->
 105                         <div data-role="collapsible" data-theme="e" data-content-theme="e">
 106                                 <h3>I'm a themed collapsible with a themed content</h3>
 107                                 <p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
 108                         </div>
 109                 </div><!-- /themed container -->
 110
 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">Content Formatting</li>
 123                                                 <li><a href="content-html.html">Basic HTML styles</a></li>
 124                                                 <li><a href="content-grids.html">Layout grids (columns)</a></li>
 125                                                 <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
 126                                                 <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
 127                                                 <li data-theme="a"><a href="content-themes.html">Theming content</a></li>
 128
 129                                 </ul>
 130                 </div>
 131         </div>
 132
 133 </div><!-- /content -->
 134
 135 <div data-role="footer" class="footer-docs" data-theme="c">
 136                 <p>&copy; 2011 The jQuery Project</p>
 137 </div>
 138
 139 </div><!-- /page -->
 140
 141 </body>
 142 </html>