mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
91 lines
No EOL
2.9 KiB
HTML
Executable file
91 lines
No EOL
2.9 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Framework - Toolbars demo</title>
|
|
<link rel="stylesheet" media="only all" href="css/all" />
|
|
<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" class="ui-body">
|
|
<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> |