mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-19 15:30:24 +00:00
225 lines
11 KiB
HTML
Executable file
225 lines
11 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="../../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">
|
|
<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-bar ui-bar-c">
|
|
<div data-role="controlgroup" data-type="horizontal" >
|
|
<a href="#" data-icon="gear" data-role="button" data-inline="true">Tools</a>
|
|
<a href="#" data-icon="star" data-role="button" data-inline="true">Like</a>
|
|
<a href="#" data-icon="refresh" data-role="button" data-inline="true">Refresh</a>
|
|
</div><!-- /controlgroup -->
|
|
</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>
|
|
<label for="slider1">Input slider:</label>
|
|
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" />
|
|
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
|
|
<legend>Cache settings:</legend>
|
|
<input type="radio" name="radio-choice-z1" id="radio-choice-y1" value="on" checked="checked" />
|
|
<label for="radio-choice-y1">On</label>
|
|
<input type="radio" name="radio-choice-z1" id="radio-choice-z1" value="off" />
|
|
<label for="radio-choice-z1">Off</label>
|
|
</fieldset>
|
|
<a href="#" data-role="button" data-inline="true">Button</a>
|
|
</div>
|
|
<div class="ui-bar ui-bar-a">
|
|
<div data-role="controlgroup" data-type="horizontal" >
|
|
<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
|
|
</div><!-- /controlgroup -->
|
|
</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>
|
|
<label for="slider1">Input slider:</label>
|
|
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="a" />
|
|
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
|
|
<legend>Cache settings:</legend>
|
|
<input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
|
|
<label for="radio-choice-a1">On</label>
|
|
<input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off" />
|
|
<label for="radio-choice-b1">Off</label>
|
|
</fieldset>
|
|
<a href="#" data-role="button" data-inline="true">Button</a>
|
|
</div>
|
|
<div class="ui-bar ui-bar-a">
|
|
<div data-role="controlgroup" data-type="horizontal" >
|
|
<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
|
|
</div><!-- /controlgroup -->
|
|
</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>
|
|
<label for="slider1">Input slider:</label>
|
|
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="b" />
|
|
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
|
|
<legend>Cache settings:</legend>
|
|
<input type="radio" name="radio-choice-a2" id="radio-choice-a2" value="on" checked="checked" />
|
|
<label for="radio-choice-a2">On</label>
|
|
<input type="radio" name="radio-choice-a2" id="radio-choice-b2" value="off" />
|
|
<label for="radio-choice-b2">Off</label>
|
|
</fieldset>
|
|
<a href="#" data-role="button" data-inline="true">Button</a>
|
|
</div>
|
|
<div class="ui-bar ui-bar-b">
|
|
<div data-role="controlgroup" data-type="horizontal" >
|
|
<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
|
|
</div><!-- /controlgroup -->
|
|
</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>
|
|
<label for="slider1">Input slider:</label>
|
|
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="c" />
|
|
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
|
|
<legend>Cache settings:</legend>
|
|
<input type="radio" name="radio-choice-a3" id="radio-choice-a3" value="on" checked="checked" />
|
|
<label for="radio-choice-a3">On</label>
|
|
<input type="radio" name="radio-choice-a3" id="radio-choice-b3" value="off" />
|
|
<label for="radio-choice-b3">Off</label>
|
|
</fieldset>
|
|
<a href="#" data-role="button" data-inline="true">Button</a>
|
|
</div>
|
|
<div class="ui-bar ui-bar-c">
|
|
<div data-role="controlgroup" data-type="horizontal" >
|
|
<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
|
|
</div><!-- /controlgroup -->
|
|
</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>
|
|
<label for="slider1">Input slider:</label>
|
|
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="d" />
|
|
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
|
|
<legend>Cache settings:</legend>
|
|
<input type="radio" name="radio-choice-a4" id="radio-choice-a4" value="on" checked="checked" />
|
|
<label for="radio-choice-a4">On</label>
|
|
<input type="radio" name="radio-choice-a4" id="radio-choice-b4" value="off" />
|
|
<label for="radio-choice-b4">Off</label>
|
|
</fieldset>
|
|
<a href="#" data-role="button" data-inline="true">Button</a>
|
|
</div>
|
|
<div class="ui-bar ui-bar-d">
|
|
<div data-role="controlgroup" data-type="horizontal" >
|
|
<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
|
|
</div><!-- /controlgroup -->
|
|
</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>
|
|
<label for="slider1">Input slider:</label>
|
|
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="e" />
|
|
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
|
|
<legend>Cache settings:</legend>
|
|
<input type="radio" name="radio-choice-a5" id="radio-choice-a5" value="on" checked="checked" />
|
|
<label for="radio-choice-a5">On</label>
|
|
<input type="radio" name="radio-choice-a5" id="radio-choice-b5" value="off" />
|
|
<label for="radio-choice-b5">Off</label>
|
|
</fieldset>
|
|
<a href="#" data-role="button" data-inline="true">Button</a>
|
|
</div>
|
|
<div class="ui-bar ui-bar-e">
|
|
<div data-role="controlgroup" data-type="horizontal" >
|
|
<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
|
|
</div><!-- /controlgroup -->
|
|
</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 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>
|