mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-17 12:51:00 +00:00
161f5e6ae3
This makes our include model match the include model on the CDN, and allows devs to make use of mobileinit for debugging some of the samples since that must be set up after jquery.js, but before jquery-mobile.
189 lines
No EOL
9.1 KiB
HTML
Executable file
189 lines
No EOL
9.1 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>jQuery Mobile Docs - Pages</title>
|
|
<link rel="stylesheet" href="../../themes/default/" />
|
|
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
|
<script type="text/javascript" src="../../js/jquery.js"></script>
|
|
<script type="text/javascript" src="../../js/"></script>
|
|
<script type="text/javascript" src="docs/docs.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Theming pages</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<h2>Page Theming</h2>
|
|
|
|
<p>jQuery Mobile has a rich <a href="../themes/index.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-y1" 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">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">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">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">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">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">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">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">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">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">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 "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="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">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
|
</div><!-- /controlgroup -->
|
|
</div>
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |