mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-08 22:54:50 +00:00
The start of basic documentation and cleaned up demos.
This commit is contained in:
Todd Parker
parent
21209b811b
commit
65343f158b
17 changed files with 868 additions and 1 deletions
75
containers-states.html
Normal file
75
containers-states.html
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Framework - Static Containers, States</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">
|
||||
<h1>Containers and states</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
<div class="ui-body ui-body-a">
|
||||
<h1>Description</h1>
|
||||
<p>This page displays examples of themeable containers that are used throughout the jQuery Mobile framework.</p>
|
||||
</div>
|
||||
|
||||
<div class="ui-bar ui-bar-a">
|
||||
<a href="#" data-icon="arrow-l">Button</a>
|
||||
<h1>ui-bar-a</h1>
|
||||
</div>
|
||||
<div class="ui-body ui-body-a">
|
||||
<p>ui-body-a <a href="#" class="ui-link">ui-link</a></p>
|
||||
<a href="#" data-role="button">Button</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ui-bar ui-bar-b">
|
||||
<a href="#" data-icon="arrow-l">Button</a>
|
||||
<h1>ui-bar-b</h1>
|
||||
</div>
|
||||
<div class="ui-body ui-body-b">
|
||||
<p>ui-body-b <a href="#" class="ui-link">ui-link</a></p>
|
||||
<a href="#" data-role="button">Button</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ui-bar ui-bar-c">
|
||||
<a href="#" data-icon="arrow-l">Button</a>
|
||||
<h1>ui-bar-c</h1>
|
||||
</div>
|
||||
<div class="ui-body ui-body-c">
|
||||
<p>ui-body-c <a href="#" class="ui-link">ui-link</a></p>
|
||||
<a href="#" data-role="button">Button</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="ui-bar ui-bar-d">
|
||||
<a href="#" data-icon="arrow-l">Button</a>
|
||||
<h1>ui-bar-d</h1>
|
||||
</div>
|
||||
<!--
|
||||
|
||||
<div class="ui-list ui-list-up-a">
|
||||
<p>ui-list-up-a</p>
|
||||
<a href="#" data-role="button">Button</a>
|
||||
</div>
|
||||
|
||||
<div class="ui-list ui-list-up-b">
|
||||
<p>ui-list-up-a</p>
|
||||
<a href="#" data-role="button">Button</a>
|
||||
</div>
|
||||
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
26
docs/buttons.html
Normal file
26
docs/buttons.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Buttons</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">
|
||||
<h1>Buttons</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="ui-body ui-body-c">
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /content -->
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
26
docs/forms.html
Normal file
26
docs/forms.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Forms</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">
|
||||
<h1>Forms</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="ui-body ui-body-c">
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /content -->
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
35
docs/index.html
Normal file
35
docs/index.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery UI Mobile Framework - Documentation</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">
|
||||
<h1>jQuery Mobile - Getting Started Guide</h1>
|
||||
</div>
|
||||
|
||||
<div data-role="content" class=" ui-body-b">
|
||||
<ul data-role="listview" data-fill-width="false">
|
||||
<li><a href="intro.html">Getting started</a></li>
|
||||
<li><a href="themes.html">Themes</a></li>
|
||||
<li><a href="page.html">Anatomy of a page</a></li>
|
||||
<li><a href="links.html">Links & transitions</a></li>
|
||||
<li><a href="toolbars.html">Header & footer toolbars</a></li>
|
||||
<li><a href="toolbars.html">Content formatting</a></li>
|
||||
<li><a href="navbar.html">Nav bars</a></li>
|
||||
<li><a href="buttons.html">Buttons</a></li>
|
||||
<li><a href="forms.html">Form elements</a></li>
|
||||
<li><a href="lists.html">List views</a></li>
|
||||
<li><a href="dialogs.html">Dialogs</a></li>
|
||||
<li><a href="animations.html">Animations</a></li>
|
||||
<li><a href="events.html">Events</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
26
docs/intro.html
Normal file
26
docs/intro.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Intro</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">
|
||||
<h1>Getting started</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="ui-body ui-body-c">
|
||||
<a href=""></a>
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /content -->
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
26
docs/links.html
Normal file
26
docs/links.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Links</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">
|
||||
<h1>Links</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="ui-body ui-body-c">
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /content -->
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
46
docs/lists-divider.html
Normal file
46
docs/lists-divider.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Lists</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>List dividers</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<ul data-role="listview">
|
||||
<li data-role="list-divider">Divider A</li>
|
||||
<li><a href="index.html">Page A</a></li>
|
||||
<li><a href="index.html">Page B</a></li>
|
||||
<li><a href="index.html">Page C</a></li>
|
||||
<li><a href="index.html">Page D</a></li>
|
||||
<li><a href="index.html">Page E</a></li>
|
||||
<li><a href="index.html">Page F</a></li>
|
||||
<li><a href="index.html">Page G</a></li>
|
||||
<li><a href="index.html">Page H</a></li>
|
||||
<li data-role="list-divider">Divider B</li>
|
||||
<li><a href="index.html">Page I</a></li>
|
||||
<li><a href="index.html">Page J</a></li>
|
||||
<li><a href="index.html">Page K</a></li>
|
||||
<li><a href="index.html">Page L</a></li>
|
||||
<li data-role="list-divider">Divider C</li>
|
||||
<li><a href="index.html">Page M</a></li>
|
||||
<li><a href="index.html">Page N</a></li>
|
||||
<li><a href="index.html">Page O</a></li>
|
||||
<li><a href="index.html">Page P</a></li>
|
||||
<li><a href="index.html">Page Q</a></li>
|
||||
<li><a href="index.html">Page R</a></li>
|
||||
</ul>
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
108
docs/lists-formatting.html
Normal file
108
docs/lists-formatting.html
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Lists</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>List formatting</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<h2 class="ui-bar ui-bar-b">List with count bubble</h2>
|
||||
|
||||
<ul data-role="listview">
|
||||
<li>
|
||||
<h3><a href="index.html">Page A</a></h3>
|
||||
<p>Quick description about this item here</p>
|
||||
<span class="ui-li-count">22</span>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Page A</a></h3>
|
||||
<p>Quick description about this item here</p>
|
||||
<span class="ui-li-count">22</span>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Page A</a></h3>
|
||||
<p>Quick description about this item here</p>
|
||||
<span class="ui-li-count">22</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2 class="ui-bar ui-bar-b">List with thumbnail, text hierarchy and right column content (aside)</h2>
|
||||
|
||||
<ul data-role="listview">
|
||||
<li>
|
||||
<img src="images/jb.jpg" alt="jb" />
|
||||
<h3><a href="index.html">Page A</a></h3>
|
||||
<p>Quick description about this item here</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/jb.jpg" alt="jb" />
|
||||
<h3><a href="index.html">Page A</a></h3>
|
||||
<p>Quick description about this item here</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/jb.jpg" alt="jb" />
|
||||
<h3><a href="index.html">Page A</a></h3>
|
||||
<p>Quick description about this item here</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2 class="ui-bar ui-bar-b">List with email inbox style formatting</h2>
|
||||
|
||||
<ul data-role="listview">
|
||||
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">3</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Stephen Weber</a></h3>
|
||||
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
||||
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Stephen Weber</a></h3>
|
||||
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
||||
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">3</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Stephen Weber</a></h3>
|
||||
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
||||
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Stephen Weber</a></h3>
|
||||
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
||||
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Stephen Weber</a></h3>
|
||||
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
||||
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
46
docs/lists-inset.html
Normal file
46
docs/lists-inset.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Lists</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>Inset list</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li data-role="list-divider">Divider A</li>
|
||||
<li><a href="index.html">Page A</a></li>
|
||||
<li><a href="index.html">Page B</a></li>
|
||||
<li><a href="index.html">Page C</a></li>
|
||||
<li><a href="index.html">Page D</a></li>
|
||||
<li><a href="index.html">Page E</a></li>
|
||||
<li><a href="index.html">Page F</a></li>
|
||||
<li><a href="index.html">Page G</a></li>
|
||||
<li><a href="index.html">Page H</a></li>
|
||||
<li data-role="list-divider">Divider B</li>
|
||||
<li><a href="index.html">Page I</a></li>
|
||||
<li><a href="index.html">Page J</a></li>
|
||||
<li><a href="index.html">Page K</a></li>
|
||||
<li><a href="index.html">Page L</a></li>
|
||||
<li data-role="list-divider">Divider C</li>
|
||||
<li><a href="index.html">Page M</a></li>
|
||||
<li><a href="index.html">Page N</a></li>
|
||||
<li><a href="index.html">Page O</a></li>
|
||||
<li><a href="index.html">Page P</a></li>
|
||||
<li><a href="index.html">Page Q</a></li>
|
||||
<li><a href="index.html">Page R</a></li>
|
||||
</ul>
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
53
docs/lists-nested.html
Normal file
53
docs/lists-nested.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Lists</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>Nested list</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<ul data-role="listview">
|
||||
<li>Page A
|
||||
<ul>
|
||||
<li>Page A 1
|
||||
<ul>
|
||||
<li><a href="index.html">Page A 1 1</a></li>
|
||||
<li><a href="index.html">Page A 1 2</a></li>
|
||||
<li><a href="index.html">Page A 1 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="index.html">Page A 2</a></li>
|
||||
<li><a href="index.html">Page A 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Page B
|
||||
<ul>
|
||||
<li><a href="index.html">Page B 1</a></li>
|
||||
<li><a href="index.html">Page B 2</a></li>
|
||||
<li><a href="index.html">Page B 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Page C
|
||||
<ul>
|
||||
<li><a href="index.html">Page C 1</a></li>
|
||||
<li><a href="index.html">Page C 2</a></li>
|
||||
<li><a href="index.html">Page C 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /content -->
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
43
docs/lists-ol.html
Normal file
43
docs/lists-ol.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Lists</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>Lists</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<ol data-role="listview">
|
||||
<li><a href="index.html">Page A</a></li>
|
||||
<li><a href="index.html">Page B</a></li>
|
||||
<li><a href="index.html">Page C</a></li>
|
||||
<li><a href="index.html">Page D</a></li>
|
||||
<li><a href="index.html">Page E</a></li>
|
||||
<li><a href="index.html">Page F</a></li>
|
||||
<li><a href="index.html">Page G</a></li>
|
||||
<li><a href="index.html">Page H</a></li>
|
||||
<li><a href="index.html">Page I</a></li>
|
||||
<li><a href="index.html">Page J</a></li>
|
||||
<li><a href="index.html">Page K</a></li>
|
||||
<li><a href="index.html">Page L</a></li>
|
||||
<li><a href="index.html">Page M</a></li>
|
||||
<li><a href="index.html">Page N</a></li>
|
||||
<li><a href="index.html">Page O</a></li>
|
||||
<li><a href="index.html">Page P</a></li>
|
||||
<li><a href="index.html">Page Q</a></li>
|
||||
<li><a href="index.html">Page R</a></li>
|
||||
</ol>
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
47
docs/lists-split.html
Normal file
47
docs/lists-split.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Lists</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>List formatting</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<ol data-role="listview">
|
||||
<li>
|
||||
<img src="images/jb.jpg" alt="jb" />
|
||||
<h3><a href="index.html">Page A</a></h3>
|
||||
<p>Quick description about this item here</p>
|
||||
<span class="ui-li-count">22</span>
|
||||
<a href="index.html">browse details</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/jb.jpg" alt="jb" />
|
||||
<h3><a href="index.html">Page A</a></h3>
|
||||
<p>Quick description about this item here</p>
|
||||
<span class="ui-li-count">22</span>
|
||||
<a href="index.html">browse details</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/jb.jpg" alt="jb" />
|
||||
<h3><a href="index.html">Page A</a></h3>
|
||||
<p>Quick description about this item here</p>
|
||||
<span class="ui-li-count">22</span>
|
||||
<a href="index.html">browse details</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
43
docs/lists-ul.html
Normal file
43
docs/lists-ul.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Lists</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>Lists</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<ul data-role="listview">
|
||||
<li><a href="index.html">Page A</a></li>
|
||||
<li><a href="index.html">Page B</a></li>
|
||||
<li><a href="index.html">Page C</a></li>
|
||||
<li><a href="index.html">Page D</a></li>
|
||||
<li><a href="index.html">Page E</a></li>
|
||||
<li><a href="index.html">Page F</a></li>
|
||||
<li><a href="index.html">Page G</a></li>
|
||||
<li><a href="index.html">Page H</a></li>
|
||||
<li><a href="index.html">Page I</a></li>
|
||||
<li><a href="index.html">Page J</a></li>
|
||||
<li><a href="index.html">Page K</a></li>
|
||||
<li><a href="index.html">Page L</a></li>
|
||||
<li><a href="index.html">Page M</a></li>
|
||||
<li><a href="index.html">Page N</a></li>
|
||||
<li><a href="index.html">Page O</a></li>
|
||||
<li><a href="index.html">Page P</a></li>
|
||||
<li><a href="index.html">Page Q</a></li>
|
||||
<li><a href="index.html">Page R</a></li>
|
||||
</ul>
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
67
docs/lists.html
Normal file
67
docs/lists.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Lists</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">
|
||||
<h1>Lists</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="ui-body ui-body-c">
|
||||
|
||||
<h2>Basic lists</h2>
|
||||
<p>A list starts as a simple unordered list with a <code>data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition.</p>
|
||||
|
||||
<a href="lists-ul.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Basic list example</a>
|
||||
|
||||
<h2>Nested lists</h2>
|
||||
<p>By nesting child <code>ul</code> of <code>ol</code> inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will generate a new ui-page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple level deep and all pages and linking will be automatically handled by the framework.</p>
|
||||
<a href="lists-nested.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Nested list example</a>
|
||||
|
||||
<h2>Numbered lists</h2>
|
||||
<p>Lists can also be created from ordered lists <code>(ol)</code> which is useful when presented items that are in a sequence such as search results or a movie queue. When the enhanced markup is applied to the list view, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to injecting numbers with JavaScript.</p>
|
||||
|
||||
<a href="lists-ol.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Numbered list example</a>
|
||||
|
||||
<h2>Split lists</h2>
|
||||
<p>In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the <code>li</code> and the framework will add a vertical divider line, style the link as an icon-only arrow button, and sets the <code>title</code> attribute of the link to the text the link for accessibility.</p>
|
||||
|
||||
<a href="lists-split.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Split list example</a>
|
||||
|
||||
<h2>List dividers</h2>
|
||||
<p>List items can be turned into dividers to organize and group the list items. This is done by adding the <code>data-role="list-divider"</code> to any list item. These items are styled in a header class (swatch "c" by defaut") and won't be clickable.</p>
|
||||
|
||||
<a href="lists-divider.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List divider example</a>
|
||||
|
||||
<h2>Text formatting & counts</h2>
|
||||
<p>The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information, counts through HTML semantic markup.
|
||||
<ul>
|
||||
<li>To add a count indicator to the right of the list item, wrap the number in an element with a class of <code>ui-li-count</code></li>
|
||||
<li>To add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis. </li>
|
||||
<li>Supplemental information can be added to the right of each list item by wrapping content in an element with a class of <code>ui-li-aside</code></li>
|
||||
<li>To add thumbnails to the left of a list item, add an image </li>
|
||||
</ul>
|
||||
<a href="lists-formatting.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List divider example</a>
|
||||
|
||||
|
||||
<h2>Inset lists</h2>
|
||||
<p>If lists are embedded in a page with other types of content, an inset list packages the list into a block that sits inside the content area with a bit of margin and rounded corners (theme controlled). By adding the <code>data-inset="true"</code> attribute to the list (ul or ol), the list will get the inset appearance.</p>
|
||||
|
||||
<a href="lists-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inset list example</a>
|
||||
|
||||
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
59
docs/page.html
Normal file
59
docs/page.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Docs - Intro</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">
|
||||
<h1>Getting started</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="ui-body ui-body-c">
|
||||
|
||||
<pre><code>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My page</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">
|
||||
<h1>My Page</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Icon</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<div class="ui-body ui-body-c">
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /content -->
|
||||
|
||||
<div data-role="footer">
|
||||
...footer content goes here...
|
||||
</div><!-- /footer -->
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</code></pre>
|
||||
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
140
docs/themes.html
Normal file
140
docs/themes.html
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Framework - Static Containers, States</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">
|
||||
<h1>Themes</h1>
|
||||
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<div class="ui-body ui-body-c">
|
||||
|
||||
<h1>Description</h1>
|
||||
<p>The jQuery Mobile theme framework contains multiple color "swatches" for bars, content blocks and buttons. The key to the theme system used in jQuery UI is separation of color and texture (theme) from structural styles that define things like padding and dimensions. This allows the theme colors and textures to be defined once in the stylesheet then re-used throughout the interface as configurable color swatches that can be mixed and matched. We also take advantage of CSS3 properties to add rounded corners, box and text shadow and gradients to make the theme styles very lightweight and reduce server requests.</p>
|
||||
|
||||
<p>Themes include at least 3 swatches for bars, content blocks and buttons. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest level of visual priority (black in our default theme), "b" is secondary level (blue) and "c" is the baseline level (gray) that we use by default in many situations. Themes may have additional swatches but these are used for accents colors or specific situations within an app or site.</p>
|
||||
|
||||
|
||||
|
||||
<h3>Bars</h3>
|
||||
<p>The default theme contains 4 color swatches for bars to use in header, footer and tool bars. The swatches are designated by letters (a, b, c, etc.) and are organized into a visual hierarchy where "a" is the highest level of visual priority, "b" is secondary, "c" is the baseline, and "d" is for accents. Each swatch defines the border color, text color, gradient, text-shadow, font family and link color. Our default theme looks like this:</p>
|
||||
|
||||
<div class="swatch-preview">
|
||||
<div class="ui-bar ui-bar-a">Bar A</div>
|
||||
<div class="ui-bar ui-bar-b">Bar B</div>
|
||||
<div class="ui-bar ui-bar-c">Bar C</div>
|
||||
<div class="ui-bar ui-bar-d">Bar D</div>
|
||||
</div><!-- end swatch-bars -->
|
||||
|
||||
<p>By default, the framework assigns the "a" swatch (black in the default theme) to all headers and footer because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the <code>data-theme</code> attribute to your header or footer and specify a letter (a, b, c, d) and the specified theme swatch color will be applied.</p>
|
||||
|
||||
|
||||
|
||||
<h3>Content Blocks</h3>
|
||||
<p>The default theme contains 3 color swatches for use in content blocks. These are designed to coordinate with the header color swatches in the default theme. Just as with bars, you can add as many content block swatches you want by extending the theme stylesheet. If a theme isn't specified on a content block, the framework will default to "c", just like the header.</p>
|
||||
|
||||
<div class="swatch-preview">
|
||||
<div class="ui-body ui-body-a">Block A</div>
|
||||
<div class="ui-body ui-body-b">Block B</div>
|
||||
<div class="ui-body ui-body-c">Block C</div>
|
||||
</div><!-- end swatch-bars -->
|
||||
|
||||
|
||||
<h3>Lists</h3>
|
||||
<p>There are 2 supported list view styles. FIX THIS.</p>
|
||||
<ul data-role="listview" data-inset="true" data-theme="e">
|
||||
<li><a href="index.html">List item A</a></li>
|
||||
<li><a href="index.html">List item A</a></li>
|
||||
<li><a href="index.html">List item A</a></li>
|
||||
</ul>
|
||||
|
||||
<ul data-role="listview" data-inset="true" data-theme="f">
|
||||
<li><a href="index.html">List item A</a></li>
|
||||
<li><a href="index.html">List item A</a></li>
|
||||
<li><a href="index.html">List item A</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Buttons</h3>
|
||||
<p>A set of 4 button colors are also included in the default theme. Each button has styles for normal, hover/focus and pressed states. Each button is intentionally styled to match the color of a bar so they feel tightly integrated. </p>
|
||||
|
||||
<div class="swatch-preview">
|
||||
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l">Button A</a>
|
||||
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l">Button B</a>
|
||||
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l">Button C</a>
|
||||
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Button D</a>
|
||||
</div><!-- end swatch-bars -->
|
||||
|
||||
<h3>Buttons in Bars</h3>
|
||||
<p>When a link is placed in a header or footer bar, it is automatically transformed into a compact-sized button and assigned a theme swatch letter that matches it's parent bar to visually integrate the button into the bar. Below, the same exact button code is in each of the 4 bars and is automatically adapting the right color swatch based on the parent bar swatch.</p>
|
||||
|
||||
<div class="swatch-preview">
|
||||
<div data-role="header" data-theme="a"><h1>Bar A</h1><a href="index.html" data-icon="arrow-l">Button A</a></div>
|
||||
<div data-role="header" data-theme="b"><h1>Bar B</h1><a href="index.html" data-icon="arrow-l">Button B</a></div>
|
||||
<div data-role="header" data-theme="c"><h1>Bar C</h1><a href="index.html" data-icon="arrow-l">Button C</a></div>
|
||||
<div data-role="header" data-theme="d"><h1>Bar D</h1><a href="index.html" data-icon="arrow-l">Button D</a></div>
|
||||
</div><!-- end swatch-bars -->
|
||||
|
||||
<p>To add visual emphasis of certain buttons in a toolbar, the theme swatch can be manually on a button to make it stand out by adding <code>data-theme="a"</code> to the anchor.</p>
|
||||
|
||||
<div class="swatch-bars">
|
||||
<div data-role="header" data-theme="a"><h1>Bar A</h1>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
|
||||
</div>
|
||||
<div data-role="header" data-theme="b"><h1>Bar B</h1>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
|
||||
</div>
|
||||
<div data-role="header" data-theme="c"><h1>Bar C</h1>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
|
||||
</div>
|
||||
<div data-role="header" data-theme="d"><h1>Bar D</h1>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
|
||||
<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
|
||||
</div>
|
||||
|
||||
</div><!-- end swatch-bars -->
|
||||
|
||||
<h3>Icons</h3>
|
||||
<p></p>
|
||||
<div class="swatch-preview">
|
||||
<div data-role="header" data-theme="b">
|
||||
<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><!-- end swatch-bars -->
|
||||
|
||||
|
||||
<h3>Extensible themes</h3>
|
||||
<p>The powerful thing about the new jQuery Mobile theme system is that you can now add as many color swatches as you like within a single theme. In the future ThemeRoller tool, you will be able to add new swatches through an easy-to-use web interface. Until then, you can add new swatches manually by copying the block of theme style rules for an existing swatch, renaming the rules a new letter (e) and changing colors. You can then you can reference the new theme by adding the <code>data-theme="e"</code> attribute to your toolbars.</p>
|
||||
|
||||
</div><!-- end body wrapper -->
|
||||
</div><!-- end content -->
|
||||
|
||||
</div><!-- end page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -9,11 +9,12 @@
|
|||
<div data-role="page">
|
||||
|
||||
<div data-role="header">
|
||||
<h1>jQuery Mobile</h1>
|
||||
<h1>Docuemntation</h1>
|
||||
</div>
|
||||
|
||||
<div data-role="content" class=" ui-body-b">
|
||||
<ul data-role="listview" data-fill-width="false">
|
||||
<li><a href="docs/index.html">Documentation</a></li>
|
||||
<li><a href="_containers-states.html">Containers & states</a></li>
|
||||
<li><a href="_fixed.html">Fixed Toolbars</a></li>
|
||||
<li><a href="_footer-persist.html">Persistent Footer</a></li>
|
||||
|
|
|
|||
Loading…
Reference in a new issue