Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
325 lines (236 sloc) 9.15 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iOS Inspired jQuery Mobile Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="ios_inspired/styles.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
// all dialog buttons should close their parent dialog
$(".ui-dialog button").live("click", function() {
$("[data-role='dialog']").dialog("close");
});
</script>
<style>
#footerTabs {
background: #FFF -webkit-radial-gradient(circle, #FFF, #dee2e4);
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Header</h1>
</div><!-- /header -->
<div data-role="content">
<p>Welcome to the iOS-Inspired jQuery Mobile theme by <a href="http://twitter.com/taitems" target="_blank">@taitems</a>. Feel free to have a look around and report and bugs to the <a href="https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/issues" target="_blank">GitHub issues page</a>.</p>
<ul data-role="listview" data-inset="true">
<li><a href="#headers">Header Bars</a></li>
<li><a href="#headerButtons">Header Buttons</a></li>
<li><a href="#footerTabs">Footer Tabs</a></li>
<li><a href="#formElements">Form Elements</a></li>
<li><a href="#listViews">List Views</a></li>
<li><a href="#dialogs">Dialogs</a></li>
<!--<li><a href="api-pages.html">API documentation</a></li>-->
</ul>
<br />
<br />
</div><!-- /ui-body wrapper -->
</div><!-- /page -->
<div data-role="page" id="formElements">
<div data-role="header">
<h1>Form Elements</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</div><!-- /header -->
<div data-role="content">
<div data-role="fieldcontain">
<label>Some Fields and Inputs:</label>
<br /><br />
<input type="range" />
<br /><br />
<input type="search" />
<br /><br />
<input type="email" />
<br />
</div>
<div data-role="fieldcontain">
<label for="slider">Select slider:</label>
<select name="slider" id="slider" data-role="slider">
<option value="off">OFF</option>
<option value="on">ON</option>
</select>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hampster</label>
</fieldset>
</div>
<a disabled="disabled" data-role="button">Inactive &lt;a&gt;</a>
<a data-role="button">Active &lt;a&gt;</a>
<button disabled="disabled">Inactive &lt;button&gt;</button>
<button>Active &lt;button&gt;</button>
</div>
</div>
<div data-role="page" id="listViews">
<div data-role="header">
<h1>List Example</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Divider</li>
<li><a href="#">Anatomy of a page</a></li>
<li><a href="#">Page transitions</a></li>
<li><a href="#">Dialogs</a></li>
<li><a href="#">Navigation: Ajax, hashes &amp; history</a></li>
<li><a href="#">Link format examples</a></li>
<li><a href="#">Theming pages</a></li>
<li><a href="#">Anatomy of a page</a></li>
<li><a href="#">Page transitions</a></li>
<li><a href="#">Dialogs</a></li>
<li><a href="#">Navigation: Ajax, hashes &amp; history</a></li>
<li><a href="#">Link format examples</a></li>
<li><a href="#">Theming pages</a></li>
<li><a href="#">Anatomy of a page</a></li>
<li><a href="#">Page transitions</a></li>
<li><a href="#">Dialogs</a></li>
<li><a href="#">Navigation: Ajax, hashes &amp; history</a></li>
<li><a href="#">Link format examples</a></li>
<li><a href="#">Theming pages</a></li>
<li><a href="#">Anatomy of a page</a></li>
<li><a href="#">Page transitions</a></li>
<li><a href="#">Dialogs</a></li>
<li><a href="#">Navigation: Ajax, hashes &amp; history</a></li>
<li><a href="#">Link format examples</a></li>
<li><a href="#">Theming pages</a></li>
</ul>
</div>
</div>
<div data-role="page" id="headers">
<div data-role="header">
<h1>Headers</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</a>
</div><!-- /header -->
<div data-role="content">
<p>
The default bar is the blue, but you can also use the black by specifying <em>data-theme="b"</em>.
</p>
<div data-role="header" data-position="inline">
<a href="#" data-rel="back" data-theme="a">Back</a>
<h1>Blue Bar</h1>
<a href="#" data-theme="a">Button</a>
</div>
<br />
<div data-role="header" data-theme="b" data-position="inline">
<a href="#" data-rel="back" data-theme="b">Back</a>
<h1>Black Bar</h1>
<a href="#" data-theme="b">Button</a>
</div>
</div>
</div>
<div data-role="page" id="headerButtons">
<div data-role="header">
<h1>Header Buttons</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</div><!-- /header -->
<div data-role="content">
<p>
The various styled buttons you can place in a header:
</p>
<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-theme="a">Edit</a>
</div>
<br />
<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-theme="b">Black</a>
</div>
<br />
<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-theme="c">Delete</a>
</div>
<br />
<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-theme="d">Done</a>
</div>
<br />
<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-rel="back" data-icon="arrow-l" data-theme="a">Back</a>
</div>
<br />
<div data-role="header" data-theme="b" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-rel="back" data-icon="arrow-l" data-theme="b">Back</a>
</div>
</div>
</div>
<div data-role="page" id="allDialogExample">
<div data-role="content">
<button data-theme="e">Button Style E</button>
<button data-theme="d">Button Style D</button>
<button data-theme="c">Button Style C</button>
<button data-theme="b">Button Style B</button>
<button data-theme="a">Button Style A</button>
</div>
</div>
<div data-role="page" id="deleteDialogExample">
<div data-role="content">
<button data-theme="e">Delete Draft</button>
<button data-theme="a">Save Draft</button>
<button data-theme="b">Cancel</button>
</div>
</div>
<div data-role="page" id="postDialogExample">
<div data-role="content">
<button data-theme="a">Post to Twitter</button>
<button data-theme="a">Post to Facebook</button>
<button data-theme="a">Post to YouTube</button>
<button data-theme="b">Cancel</button>
</div>
</div>
<div data-role="page" id="dialogs">
<div data-role="header">
<h1>Dialogs</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</div><!-- /header -->
<div data-role="content">
<a href="#allDialogExample" data-role="button" data-rel="dialog" data-transition="slideup">All the options</a>
<a href="#deleteDialogExample" data-role="button" data-rel="dialog" data-transition="slideup">Delete Example</a>
<a href="#postDialogExample" data-role="button" data-rel="dialog" data-transition="slideup">Post Something</a>
</div>
</div>
<div data-role="page" id="footerTabs" data-theme="b">
<div data-role="header">
<h1>Footer Tabs</h1>
<a href="#" data-rel="back">Back</a>
</div><!-- /header -->
<div data-role="content">
Icons by Joseph Wain / <a href="http://www.glyphish.com" target="_blank">glyphish.com</a>. Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/us/" target="_blank">Creative Commons Attribution 3.0 United States License</a>.
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" id="tabA" data-icon="custom">One</a></li>
<li><a href="#" id="tabB" data-icon="custom" class="ui-btn-active">Two</a></li>
<li><a href="#" id="tabC" data-icon="custom">Three</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
</html>