mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-24 01:40:25 +00:00
d5cbcf755b
Edited the PHP combiner and .htaccess logic to accommodate this change, as well as allowing manifest files to use a "../" when referencing files, which will be handy when adding themes that don't include structural files yet. Modified all HTML files to point to /themes/default for their theme.
101 lines
No EOL
3.7 KiB
HTML
Executable file
101 lines
No EOL
3.7 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Framework - Toolbars demo</title>
|
|
<link rel="stylesheet" href="../../themes/default" />
|
|
<script type="text/javascript" src="../../js/all"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header" data-position="inline">
|
|
<h1>Bar theming </h1>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div data-role="content">
|
|
|
|
<p>Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. To set the header or footer bars to a different color in your theme, add the <code>data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p>
|
|
|
|
<div class="highlight">
|
|
<pre>
|
|
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"header"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">></span>
|
|
<span class="nt"><h1></span>Page Title<span class="nt"></h1></span>
|
|
<span class="nt"></div></span>
|
|
</pre>
|
|
</div>
|
|
|
|
<h2>Demo description</h2>
|
|
<p>This is a demo of the variation that can be achieved by tweaking the theme swatches and buttons inside the headers and footers.</p>
|
|
<h3>Headers</h3>
|
|
</div>
|
|
|
|
<div data-role="header" data-position="inline">
|
|
<h1>Bar theme "a"</h1>
|
|
<a href="index.html" data-icon="plus" data-theme="c">New</a>
|
|
</div>
|
|
|
|
<div data-role="header" data-position="inline">
|
|
<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
|
|
<h1>Bar theme "a"</h1>
|
|
<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
|
|
</div>
|
|
|
|
<div data-role="header" data-position="inline" data-theme="b">
|
|
<h1>Bar theme "b"</h1>
|
|
<a href="index.html" data-icon="plus" data-theme="a">New</a>
|
|
</div>
|
|
|
|
<div data-role="header" data-position="inline" data-theme="b">
|
|
<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
|
|
<h1>Bar theme "b"</h1>
|
|
<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="d">Save</a>
|
|
</div>
|
|
|
|
<div data-role="header" data-position="inline" data-theme="c">
|
|
<h1>Bar theme "c"</h1>
|
|
<a href="index.html" data-icon="plus" data-theme="a">New</a>
|
|
</div>
|
|
|
|
<div data-role="header" data-position="inline" data-theme="c">
|
|
<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
|
|
<h1>Bar theme "c"</h1>
|
|
<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
|
|
</div>
|
|
|
|
<div data-role="header" data-position="inline" data-theme="d">
|
|
<h1>Bar theme "d"</h1>
|
|
<a href="index.html" data-icon="plus" data-theme="a">New</a>
|
|
</div>
|
|
|
|
<div data-role="header" data-position="inline" data-theme="d">
|
|
<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
|
|
<h1>Bar theme "d"</h1>
|
|
<a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="b">Save</a>
|
|
</div>
|
|
|
|
<div data-role="content" class="ui-body">
|
|
<h3>Footers</h3>
|
|
</div>
|
|
|
|
|
|
|
|
<div data-role="footer" data-position="inline">
|
|
<div>
|
|
<a href="index.html" data-icon="arrow-l" data-iconpos="right">left</a>
|
|
<a href="index.html" data-icon="arrow-r" data-iconpos="right">right</a>
|
|
<a href="index.html" data-icon="arrow-u" data-iconpos="right">up</a>
|
|
<a href="index.html" data-icon="arrow-d" data-iconpos="right">down</a>
|
|
<a href="index.html" data-icon="plus" data-iconpos="right">plus</a>
|
|
<a href="index.html" data-icon="minus" data-iconpos="right">minus</a>
|
|
<a href="index.html" data-icon="delete" data-iconpos="right">delete</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |