mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-16 04:11:01 +00:00
148 lines
6 KiB
HTML
Executable file
148 lines
6 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>jQuery Mobile Docs - Theming Pages</title>
|
|
<link rel="stylesheet" href="../../css/themes/default/" />
|
|
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
|
<script src="../../js/jquery.js"></script>
|
|
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
|
<script src="../_assets/js/jqm-docs.js"></script>
|
|
<script src="../../js/"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page" class="type-interior">
|
|
|
|
<div data-role="header" data-theme="f">
|
|
<h1>Theming pages</h1>
|
|
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
<div class="content-primary">
|
|
|
|
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
|
|
<li><a href="pages-themes.html" data-role="button" data-transition="fade" class="ui-btn-active">Theme Overview</a></li>
|
|
|
|
<li><a href="pages-themes/theme-a.html" data-role="button" data-transition="fade">A</a></li>
|
|
<li><a href="pages-themes/theme-b.html" data-role="button" data-transition="fade">B</a></li>
|
|
<li><a href="pages-themes/theme-c.html" data-role="button" data-transition="fade">C</a></li>
|
|
<li><a href="pages-themes/theme-d.html" data-role="button" data-transition="fade">D</a></li>
|
|
<li><a href="pages-themes/theme-e.html" data-role="button" data-transition="fade">E</a></li>
|
|
</ul>
|
|
|
|
<h2>Page Theming</h2>
|
|
|
|
<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>
|
|
|
|
<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.</p>
|
|
|
|
<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>
|
|
|
|
<div data-role="header">
|
|
<h1>Default Theme</h1>
|
|
</div>
|
|
|
|
<div class="ui-body ui-body-c">
|
|
<h3>Default Theme Content Header</h3>
|
|
<p>This is the default content color swatch and a preview of a <a href="#" class="ui-link">link</a>.</p>
|
|
|
|
<a href="#" data-role="button" data-inline="true">Button</a>
|
|
</div>
|
|
|
|
<p>And each of the five "swatches" applies its style consistently across all page elements, as shown below:</p>
|
|
|
|
<h2>Swatch A</h2>
|
|
<div data-role="header" data-position="inline">
|
|
<h1>Header A</h1>
|
|
</div>
|
|
|
|
|
|
<div class="ui-body ui-body-a">
|
|
<h3>Header</h3>
|
|
<p>This is content color swatch "A" and a preview of a <a href="#" class="ui-link">link</a>.</p>
|
|
<a href="#" data-role="button" data-inline="true">Button</a>
|
|
</div>
|
|
|
|
|
|
<h2>Swatch B</h2>
|
|
<div data-role="header" data-theme="b">
|
|
<h1>Header B</h1>
|
|
</div>
|
|
<div class="ui-body ui-body-b">
|
|
<h3>Header</h3>
|
|
<p>This is content color swatch "B" and a preview of a <a href="#" class="ui-link">link</a>.</p>
|
|
<a href="#" data-role="button" data-inline="true">Button</a>
|
|
</div>
|
|
|
|
<h2>Swatch C</h2>
|
|
<div data-role="header" data-theme="c">
|
|
<h1>Header C</h1>
|
|
</div>
|
|
<div class="ui-body ui-body-c">
|
|
<h3>Header</h3>
|
|
<p>This is content color swatch "C" and a preview of a <a href="#" class="ui-link">link</a>.</p>
|
|
<a href="#" data-role="button" data-inline="true">Button</a>
|
|
</div>
|
|
|
|
<h2>Swatch D</h2>
|
|
<div data-role="header" data-theme="d">
|
|
<h1>Header D</h1>
|
|
</div>
|
|
<div class="ui-body ui-body-d">
|
|
<h3>Header</h3>
|
|
<p>This is content color swatch "D" and a preview of a <a href="#" class="ui-link">link</a>.</p>
|
|
<a href="#" data-role="button" data-inline="true">Button</a>
|
|
</div>
|
|
|
|
<h2>Swatch E</h2>
|
|
<div data-role="header" data-theme="e">
|
|
<h1>Header E</h1>
|
|
</div>
|
|
<div class="ui-body ui-body-e">
|
|
<h3>Header</h3>
|
|
<p>This is content color swatch "E" and a preview of a <a href="#" class="ui-link">link</a>.</p>
|
|
<a href="#" data-role="button" data-inline="true">Button</a>
|
|
</div>
|
|
|
|
</div><!--/content-primary -->
|
|
|
|
<div class="content-secondary">
|
|
|
|
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
|
|
|
|
<h3>More in this section</h3>
|
|
|
|
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
|
|
|
<li data-role="list-divider">Pages & Dialogs</li>
|
|
<li><a href="page-anatomy.html">Anatomy of a page</a></li>
|
|
<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
|
|
<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
|
|
<li><a href="page-titles.html">Page titles</a></li>
|
|
<li><a href="page-links.html">Linking pages</a></li>
|
|
<li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
|
|
<li><a href="page-dialogs.html">Dialogs</a></li>
|
|
<li><a href="page-cache.html">Prefetching & caching pages</a></li>
|
|
<li><a href="page-navmodel.html">Ajax, hashes & history</a></li>
|
|
<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
|
|
<li><a href="page-scripting.html">Scripting pages</a></li>
|
|
<li><a href="phonegap.html">PhoneGap apps</a></li>
|
|
<li><a href="touchoverflow.html">touchOverflow feature</a></li>
|
|
<li data-theme="a"><a href="pages-themes.html">Theming pages</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /content -->
|
|
|
|
<div data-role="footer" class="footer-docs" data-theme="c">
|
|
<p>© 2011 The jQuery Project</p>
|
|
</div>
|
|
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html>
|