mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-15 20:01:03 +00:00
160 lines
No EOL
7.5 KiB
HTML
Executable file
160 lines
No EOL
7.5 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Pages</title>
|
|
<link rel="stylesheet" href="../../themes/default" />
|
|
<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">
|
|
|
|
<h2>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. 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>
|
|
|
|
<p>Below are examples of theme swatches applied consistently across all page elements. Typically, you would mix and match swatches on various parts of the page to create visual texture but this shows how each theme swatch looks on various elements.</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">
|
|
<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 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">
|
|
<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 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">
|
|
<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 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">
|
|
<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 class="ui-bar ui-bar-e">
|
|
<a href="#" data-icon="arrow-l">Back</a>
|
|
<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> |