mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-14 11:21:02 +00:00
129 lines
No EOL
5.7 KiB
HTML
Executable file
129 lines
No EOL
5.7 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Pages</title>
|
|
<link rel="stylesheet" media="only all" href="../../css/all" />
|
|
<script type="text/javascript" src="../../js/all"></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" class="ui-body">
|
|
|
|
<h2>Theming</h2>
|
|
|
|
<p>jQuery Mobile has a rich <a href="../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. The <code>data-theme</code> attribute could be added to the content container but we recommend adding it instead to the <code>data-role="page"</code> container to ensure that the background colors are applied to the full page </p>
|
|
|
|
|
|
|
|
<h2>Swatch A</h2>
|
|
<div class="ui-bar ui-bar-a">
|
|
<a href="#" data-icon="arrow-l">Back</a>
|
|
<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">
|
|
<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
|
<h1>Footer A</h1>
|
|
</div>
|
|
|
|
|
|
<h2>Swatch B</h2>
|
|
<div class="ui-bar ui-bar-b">
|
|
<a href="#" data-icon="arrow-l">Back</a>
|
|
<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">
|
|
<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
|
<h1>Footer B</h1>
|
|
</div>
|
|
|
|
<h2>Swatch C</h2>
|
|
<div class="ui-bar ui-bar-c">
|
|
<a href="#" data-icon="arrow-l">Back</a>
|
|
<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">
|
|
<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
|
<h1>Footer C</h1>
|
|
</div>
|
|
|
|
<h2>Swatch D</h2>
|
|
<div class="ui-bar ui-bar-d">
|
|
<a href="#" data-icon="arrow-l">Back</a>
|
|
<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">
|
|
<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
|
|
<h1>Footer B</h1>
|
|
</div>
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |