Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

big updates and additions to docs by Todd

Browse source
This commit is contained in:
scottjehl 2010-10-10 10:41:34 -04:00
parent 5dbda8eb25
commit e42130efe0
86 changed files with 1939 additions and 428 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
docs/buttons.html Normal file → Executable file
View file

0
docs/forms.html Normal file → Executable file
View file

11
docs/index.html Normal file → Executable file
View file

@ -14,16 +14,15 @@
<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="intro.html">Introduction to jQuery Mobile</a></li>
<li><a href="themes.html">Theme system</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="links.html">Links & page transitions</a></li>
<li><a href="toolbars/index.html">Header, footer & nav bars</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="lists/index.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>

0
docs/intro.html Normal file → Executable file
View file

0
docs/links.html Normal file → Executable file
View file

46
docs/lists-divider.html
View file

@ -1,46 +0,0 @@
<!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
View file

@ -1,108 +0,0 @@
<!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
View file

@ -1,46 +0,0 @@
<!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
View file

@ -1,53 +0,0 @@
<!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
View file

@ -1,43 +0,0 @@
<!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
View file

@ -1,47 +0,0 @@
<!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
View file

@ -1,43 +0,0 @@
<!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>

38
docs/lists/api-lists.html Executable file
View file

@ -0,0 +1,38 @@
<!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>List API</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<h2>Dependencies</h2>
<p>To be documented</p>
<h2>Options</h2>
<p>To be documented</p>
<h2>Methods</h2>
<p>To be documented</p>
<h2>Known Issues</h2>
<p>To be documented</p>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

34
docs/lists.html → docs/lists/docs-lists.html Normal file → Executable file
View file

@ -11,14 +11,13 @@
<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>
<p>A list view is coded as a simple unordered list containing linked list items 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>
@ -31,32 +30,47 @@
<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>Search filter</h2>
<p>jQuery Mobile provides a very easy way to filter a list client-side with a simple search tol. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The clear (x) icon shows the full list when clicked.</p>
<a href="lists-ul.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Search filter 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.
<p>The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information, counts through HTML semantic markup. </p>
<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>
<a href="lists-count.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with count bubbles</a>
<a href="lists-formatting.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with text formatting</a>
<a href="lists-thumbnails.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with thumbnail images</a>
<h2>Split button 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>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>
<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), applies the inset appearance.</p>
<a href="lists-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inset list example</a>
<h2>List theming</h2>
<p>Themes contain two list theme swatch styles. The default theme is "f" (silver in the default theme). The theme swatch can be changed to any other lit swatch by adding the <code>data-theme="e"</code> attribute to the list, where the letter is the name of any list swatch in the theme.</p>
<a href="lists-themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Themed list example</a>
</div><!-- /ui-body wrapper -->

BIN
docs/lists/images/album-af.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/lists/images/album-ag.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
docs/lists/images/album-bb.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
docs/lists/images/album-bk.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
docs/lists/images/album-hc.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/lists/images/album-k.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
docs/lists/images/album-mg.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
docs/lists/images/album-ok.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/lists/images/album-p.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
docs/lists/images/album-rh.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
docs/lists/images/album-ws.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
docs/lists/images/album-xx.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
docs/lists/images/asterisk_orange.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 760 B

BIN
docs/lists/images/book.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 593 B

BIN
docs/lists/images/cross.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 655 B

BIN
docs/lists/images/email_delete.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 756 B

BIN
docs/lists/images/flag_blue.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 671 B

BIN
docs/lists/images/folder.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 537 B

BIN
docs/lists/images/folder_heart.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 741 B

BIN
docs/lists/images/icon_box.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 555 B

BIN
docs/lists/images/icon_email_go.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 754 B

BIN
docs/lists/images/icon_tag.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 586 B

BIN
docs/lists/images/icon_vcard.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 533 B

BIN
docs/lists/images/star.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 670 B

52
docs/lists/index.html Executable file
View file

@ -0,0 +1,52 @@
<!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>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ">
<p>Lists are used for data display, navigation, result lists, and data entry so jQuery Mobile includes a wide range of list types and formatting examples to cover most common design patterns.</p>
</div><!-- /ui-body wrapper -->
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Documentation</li>
<li><a href="docs-lists.html">List view basics</a></li>
<li><a href="api-lists.html">API documentation</a></li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">List types</li>
<li><a href="lists-ul.html">Basic list</a></li>
<li><a href="lists-nested.html">Nested list</a></li>
<li><a href="lists-ol.html">Numbered list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<li><a href="lists-formatting.html">Content formatting</a></li>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-readonly.html">Read-only list</a></li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Styles & theming</li>
<li><a href="lists-inset.html">Inset styled lists</a></li>
<li><a href="lists-themes.html">Applying themes</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

29
docs/lists/lists-count.html Executable file
View file

@ -0,0 +1,29 @@
<!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>Basic list</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Drafts</a> <span class="ui-li-count">4</span></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

60
docs/lists/lists-divider.html Executable file
View file

@ -0,0 +1,60 @@
<!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>
</div><!-- /header -->
<div data-role="content" data-filter="true">
<ul data-role="listview">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
<li data-role="list-divider">B</li>
<li><a href="index.html">Bob Cabot</a></li>
<li data-role="list-divider">C</li>
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Christopher Adams</a></li>
<li><a href="index.html">Culver James</a></li>
<li data-role="list-divider">D</li>
<li><a href="index.html">David Walsh</a></li>
<li><a href="index.html">Drake Alfred</a></li>
<li data-role="list-divider">E</li>
<li><a href="index.html">Elizabeth Bacon</a></li>
<li><a href="index.html">Emery Parker</a></li>
<li><a href="index.html">Enid Voldon</a></li>
<li data-role="list-divider">F</li>
<li><a href="index.html">Francis Wall</a></li>
<li data-role="list-divider">G</li>
<li><a href="index.html">Graham Smith</a></li>
<li><a href="index.html">Greta Peete</a></li>
<li data-role="list-divider">H</li>
<li><a href="index.html">Harvey Walls</a></li>
<li data-role="list-divider">M</li>
<li><a href="index.html">Mike Farnsworth</a></li>
<li><a href="index.html">Murray Vanderbuilt</a></li>
<li data-role="list-divider">N</li>
<li><a href="index.html">Nathan Williams</a></li>
<li data-role="list-divider">P</li>
<li><a href="index.html">Paul Baker</a></li>
<li><a href="index.html">Pete Mason</a></li>
<li data-role="list-divider">R</li>
<li><a href="index.html">Rod Tarker</a></li>
<li data-role="list-divider">S</li>
<li><a href="index.html">Sawyer Wakefield</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

77
docs/lists/lists-formatting.html Executable file
View file

@ -0,0 +1,77 @@
<!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>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</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>PM</p>
</li>
<li>
<h3><a href="index.html">jQuery Team</a></h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</li>
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
<li>
<h3><a href="index.html">Avery Walker</a></h3>
<p><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</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">Amazon.com</a></h3>
<p><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
</li>
<li>
<h3><a href="index.html">Mike Taylor</a></h3>
<p><strong>Re: This weekend in Maine</strong></p>
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
</li>
<li>
<h3><a href="index.html">Redfin</a></h3>
<p><strong>Redfin listing updates for today</strong></p>
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
<p class="ui-li-aside"><strong>5:52</strong>AM</p>
</li>
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
<li>
<h3><a href="index.html">Angela Smith</a></h3>
<p><strong>Link Request</strong></p>
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
</li>
<li>
<h3><a href="index.html">Mike Taylor</a></h3>
<p><strong>This weekend in Maine</strong></p>
<p>Sounds good, let me check into our plans.</p>
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
</li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

83
docs/lists/lists-inset.html Executable file
View file

@ -0,0 +1,83 @@
<!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>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Drafts</a> <span class="ui-li-count">4</span></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
</ul>
<ol data-role="listview" data-inset="true">
<li><a href="index.html">The Godfather</a></li>
<li><a href="index.html">Inception</a></li>
<li><a href="index.html">The Good, the Bad and the Ugly </a></li>
<li><a href="index.html">Pulp Fiction</a></li>
<li><a href="index.html">Schindler's List</a></li>
</ol>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
<li data-role="list-divider">B</li>
<li><a href="index.html">Bob Cabot</a></li>
<li data-role="list-divider">C</li>
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Christopher Adams</a></li>
</ul>
<ul data-role="listview" data-inset="true">
<li>
<img src="images/album-bb.jpg" />
<h3><a href="index.html">Broken Bells</a></h3>
<p>Broken Bells</p>
<p class="ui-li-aside">$<strong>11.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-hc.jpg" />
<h3><a href="index.html">Warning</a></h3>
<p>Hot Chip</p>
<p class="ui-li-aside">$<strong>12.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-p.jpg" />
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
<p>Phoenix</p>
<p class="ui-li-aside">$<strong>11.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-ok.jpg" />
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
<p>Ok Go</p>
<p class="ui-li-aside">$<strong>10.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

129
docs/lists/lists-nested.html Executable file
View file

@ -0,0 +1,129 @@
<!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>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li>Animals
<ul>
<li>Domesticated animals
<ul>
<li><a href="index.html">Canary</a></li>
<li><a href="index.html">Cat</a></li>
<li><a href="index.html">Dog</a></li>
<li><a href="index.html">Gerbil</a></li>
<li><a href="index.html">Iguana</a></li>
<li><a href="index.html">Mouse</a></li>
</ul>
</li>
<li>Farm animals
<ul>
<li><a href="index.html">Chicken</a></li>
<li><a href="index.html">Cow</a></li>
<li><a href="index.html">Duck</a></li>
<li><a href="index.html">Horse</a></li>
<li><a href="index.html">Pig</a></li>
<li><a href="index.html">Sheep</a></li>
</ul>
</li>
<li>Wild animals
<ul>
<li><a href="index.html">Aardvark</a></li>
<li><a href="index.html">Alligator</a></li>
<li><a href="index.html">Ant</a></li>
<li><a href="index.html">Bear</a></li>
<li><a href="index.html">Beaver</a></li>
<li><a href="index.html">Cougar</a></li>
<li><a href="index.html">Dingo</a></li>
<li><a href="index.html">Eagle</a></li>
<li><a href="index.html">Elephant</a></li>
<li><a href="index.html">Ferret</a></li>
<li><a href="index.html">Frog</a></li>
<li><a href="index.html">Giraffe</a></li>
<li><a href="index.html">Lion</a></li>
<li><a href="index.html">Monkey</a></li>
<li><a href="index.html">Panda bear</a></li>
<li><a href="index.html">Polar bear</a></li>
<li><a href="index.html">Tiger</a></li>
</ul>
</li>
</ul>
</li>
<li>Colors
<ul>
<li><a href="index.html">Blue</a></li>
<li><a href="index.html">Green</a></li>
<li><a href="index.html">Orange</a></li>
<li><a href="index.html">Purple</a></li>
<li><a href="index.html">Red</a></li>
<li><a href="index.html">Yellow</a></li>
</ul>
</li>
<li>Vehicles
<ul>
<li>Cars
<ul>
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">BMW</a></li>
<li><a href="index.html">Cadillac</a></li>
<li><a href="index.html">Chrysler</a></li>
<li><a href="index.html">Dodge</a></li>
<li><a href="index.html">Ferrari</a></li>
<li><a href="index.html">Ford</a></li>
<li><a href="index.html">GMC</a></li>
<li><a href="index.html">Honda</a></li>
<li><a href="index.html">Hyundai</a></li>
<li><a href="index.html">Infiniti</a></li>
<li><a href="index.html">Jeep</a></li>
<li><a href="index.html">Kia</a></li>
<li><a href="index.html">Lexus</a></li>
<li><a href="index.html">Mini</a></li>
<li><a href="index.html">Nissan</a></li>
<li><a href="index.html">Porsche</a></li>
<li><a href="index.html">Subaru</a></li>
<li><a href="index.html">Toyota</a></li>
<li><a href="index.html">Volkswagon</a></li>
<li><a href="index.html">Volvo</a></li>
</ul>
</li>
<li>Planes
<ul>
<li><a href="index.html">Boeing</a></li>
<li><a href="index.html">Cessna</a></li>
<li><a href="index.html">Derringer</a></li>
<li><a href="index.html">Embraer</a></li>
<li><a href="index.html">Gulfstream</a></li>
<li><a href="index.html">Piper Aircraft</a></li>
<li><a href="index.html">Raytheon</a></li>
</ul>
</li>
<li>Construction
<ul>
<li><a href="index.html">Caterpillar</a></li>
<li><a href="index.html">Ford</a></li>
<li><a href="index.html">John Deere</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

44
docs/lists/lists-ol.html Executable file
View file

@ -0,0 +1,44 @@
<!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>Numbered list</h1>
</div><!-- /header -->
<div data-role="content">
<ol data-role="listview" data-filter="true">
<li><a href="index.html">The Godfather</a></li>
<li><a href="index.html">Inception</a></li>
<li><a href="index.html">The Good, the Bad and the Ugly </a></li>
<li><a href="index.html">Pulp Fiction</a></li>
<li><a href="index.html">Schindler's List</a></li>
<li><a href="index.html">12 Angry Men</a></li>
<li><a href="index.html">One Flew Over the Cuckoo's Nest</a></li>
<li><a href="index.html">Star Wars: Episode V - The Empire Strikes Back</a></li>
<li><a href="index.html">The Dark Knight</a></li>
<li><a href="index.html">The Lord of the Rings: The Return of the King</a></li>
<li><a href="index.html">Seven Samurai</a></li>
<li><a href="index.html">Star Wars: Episode IV - A New Hope</a></li>
<li><a href="index.html">Casablanca</a></li>
<li><a href="index.html">Goodfellas </a></li>
<li><a href="index.html">Toy Story 3</a></li>
<li><a href="index.html">Fight Club</a></li>
<li><a href="index.html">City of God</a></li>
<li><a href="index.html">The Lord of the Rings: The Fellowship of the Ring</a></li>
<li><a href="index.html">The Big Lebowski</a></li>
<li><a href="index.html">Psycho</a></li>
</ol>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

46
docs/lists/lists-readonly.html Executable file
View 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>Read-only list</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Chrysler</li>
<li>Dodge</li>
<li>Ferrari</li>
<li>Ford</li>
<li>GMC</li>
<li>Honda</li>
<li>Hyundai</li>
<li>Infiniti</li>
<li>Jeep</li>
<li>Kia</li>
<li>Lexus</li>
<li>Mini</li>
<li>Nissan</li>
<li>Porsche</li>
<li>Subaru</li>
<li>Toyota</li>
<li>Volkswagon</li>
<li>Volvo</li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

104
docs/lists/lists-split.html Executable file
View file

@ -0,0 +1,104 @@
<!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>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li>
<img src="images/album-bb.jpg" />
<h3><a href="index.html">Broken Bells</a></h3>
<p>Broken Bells</p>
<p class="ui-li-aside">$<strong>11.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-hc.jpg" />
<h3><a href="index.html">Warning</a></h3>
<p>Hot Chip</p>
<p class="ui-li-aside">$<strong>12.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-p.jpg" />
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
<p>Phoenix</p>
<p class="ui-li-aside">$<strong>11.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-ok.jpg" />
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
<p>Ok Go</p>
<p class="ui-li-aside">$<strong>10.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-ws.jpg" />
<h3><a href="index.html">Elephant</a></h3>
<p>The White Stripes</p>
<p class="ui-li-aside">$<strong>9.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-rh.jpg" />
<h3><a href="index.html">Kid A</a></h3>
<p>Radiohead</p>
<p class="ui-li-aside">$<strong>11.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-xx.jpg" />
<h3><a href="index.html">XX</a></h3>
<p>XX</p>
<p class="ui-li-aside">$<strong>10.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-mg.jpg" />
<h3><a href="index.html">Congratulations</a></h3>
<p>MGMT</p>
<p class="ui-li-aside">$<strong>12.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-ag.jpg" />
<h3><a href="index.html">Ashes Grammar</a></h3>
<p>A Sunny Day in Glasgow</p>
<p class="ui-li-aside">$<strong>11.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-k.jpg" />
<h3><a href="index.html">Hot Fuss</a></h3>
<p>Killers</p>
<p class="ui-li-aside">$<strong>12.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-af.jpg" />
<h3><a href="index.html">The Suburbs</a></h3>
<p>Arcade Fire</p>
<p class="ui-li-aside">$<strong>12.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

85
docs/lists/lists-themes.html Executable file
View file

@ -0,0 +1,85 @@
<!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 themes</h1>
</div><!-- /header -->
<div data-role="content"data-theme="a">
<div class="ui-body ui-body-a">
<h2>Theme swatch "a" applied to body, "e" to lists</h2>
</div><!-- / body wrapper -->
<ul data-role="listview" data-inset="true" data-theme="e">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Drafts</a> <span class="ui-li-count">4</span></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
</ul>
<ol data-role="listview" data-inset="true" data-theme="e">
<li><a href="index.html">The Godfather</a></li>
<li><a href="index.html">Inception</a></li>
<li><a href="index.html">The Good, the Bad and the Ugly </a></li>
<li><a href="index.html">Pulp Fiction</a></li>
<li><a href="index.html">Schindler's List</a></li>
</ol>
<ul data-role="listview" data-inset="true" data-theme="e">
<li>
<img src="images/album-bb.jpg" />
<h3><a href="index.html">Broken Bells</a></h3>
<p>Broken Bells</p>
<p class="ui-li-aside">$<strong>11.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-hc.jpg" />
<h3><a href="index.html">Warning</a></h3>
<p>Hot Chip</p>
<p class="ui-li-aside">$<strong>12.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-p.jpg" />
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
<p>Phoenix</p>
<p class="ui-li-aside">$<strong>11.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-ok.jpg" />
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
<p>Ok Go</p>
<p class="ui-li-aside">$<strong>10.99</strong></p>
<a href="index.html">Purchase album</a>
</li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="e">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
<li data-role="list-divider">B</li>
<li><a href="index.html">Bob Cabot</a></li>
<li data-role="list-divider">C</li>
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Christopher Adams</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

96
docs/lists/lists-thumbnails.html Executable file
View file

@ -0,0 +1,96 @@
<!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>Thumbnails & formatting</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li>
<img src="images/album-bb.jpg" />
<h3><a href="index.html">Broken Bells</a></h3>
<p>Broken Bells</p>
<p class="ui-li-aside">$<strong>11.99</strong></p>
</li>
<li>
<img src="images/album-hc.jpg" />
<h3><a href="index.html">Warning</a></h3>
<p>Hot Chip</p>
<p class="ui-li-aside">$<strong>12.99</strong></p>
</li>
<li>
<img src="images/album-p.jpg" />
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
<p>Phoenix</p>
<p class="ui-li-aside">$<strong>11.99</strong></p>
</li>
<li>
<img src="images/album-ok.jpg" />
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
<p>Ok Go</p>
<p class="ui-li-aside">$<strong>10.99</strong></p>
</li>
<li>
<img src="images/album-ws.jpg" />
<h3><a href="index.html">Elephant</a></h3>
<p>The White Stripes</p>
<p class="ui-li-aside">$<strong>9.99</strong></p>
</li>
<li>
<img src="images/album-rh.jpg" />
<h3><a href="index.html">Kid A</a></h3>
<p>Radiohead</p>
<p class="ui-li-aside">$<strong>11.99</strong></p>
</li>
<li>
<img src="images/album-xx.jpg" />
<h3><a href="index.html">XX</a></h3>
<p>XX</p>
<p class="ui-li-aside">$<strong>10.99</strong></p>
</li>
<li>
<img src="images/album-mg.jpg" />
<h3><a href="index.html">Congratulations</a></h3>
<p>MGMT</p>
<p class="ui-li-aside">$<strong>12.99</strong></p>
</li>
<li>
<img src="images/album-ag.jpg" />
<h3><a href="index.html">Ashes Grammar</a></h3>
<p>A Sunny Day in Glasgow</p>
<p class="ui-li-aside">$<strong>11.99</strong></p>
</li>
<li>
<img src="images/album-k.jpg" />
<h3><a href="index.html">Hot Fuss</a></h3>
<p>Killers</p>
<p class="ui-li-aside">$<strong>12.99</strong></p>
</li>
<li>
<img src="images/album-af.jpg" />
<h3><a href="index.html">The Suburbs</a></h3>
<p>Arcade Fire</p>
<p class="ui-li-aside">$<strong>12.99</strong></p>
</li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

46
docs/lists/lists-ul.html Executable file
View 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>Basic list</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">BMW</a></li>
<li><a href="index.html">Cadillac</a></li>
<li><a href="index.html">Chrysler</a></li>
<li><a href="index.html">Dodge</a></li>
<li><a href="index.html">Ferrari</a></li>
<li><a href="index.html">Ford</a></li>
<li><a href="index.html">GMC</a></li>
<li><a href="index.html">Honda</a></li>
<li><a href="index.html">Hyundai</a></li>
<li><a href="index.html">Infiniti</a></li>
<li><a href="index.html">Jeep</a></li>
<li><a href="index.html">Kia</a></li>
<li><a href="index.html">Lexus</a></li>
<li><a href="index.html">Mini</a></li>
<li><a href="index.html">Nissan</a></li>
<li><a href="index.html">Porsche</a></li>
<li><a href="index.html">Subaru</a></li>
<li><a href="index.html">Toyota</a></li>
<li><a href="index.html">Volkswagon</a></li>
<li><a href="index.html">Volvo</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

0
docs/page.html Normal file → Executable file
View file

61
docs/themes.html Normal file → Executable file
View file

@ -11,14 +11,13 @@
<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>
<h2>Theming overview</h2>
<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>
@ -50,7 +49,7 @@
<h3>Lists</h3>
<p>There are 2 supported list view styles. FIX THIS.</p>
<p>There are 2 supported list view styles. The system defaults to the "a" swatch (silver in default theme) and it can be switched to "b" via the <code>data-theme</code> attribute.</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>
@ -73,8 +72,8 @@
<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>
<h3>Context-aware button theming</h3>
<p>When a link is placed in a header or footer bar, it is automatically transformed into a compact-sized button. It is also assigned a theme swatch letter that matches it's parent bar or content box to visually integrate the button into the parent theme, sort of like a chameleon. To illustrate this idea, below, the same exact button code is in each of the 4 bars and is automatically setting their color swatch to match 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>
@ -83,32 +82,40 @@
<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>
<p>This makes it really easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. To add visual emphasis of certain buttons in a toolbar, the theme swatch color for a button can be set by adding a <code>data-theme="a"</code> to the anchor to make it stand out visually from it's parent. If the theme is set on a button in the markup, the framework won't override the theme swatch color when the parent theme is changed because you made a conscious decision to set the color.</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 data-role="header" data-theme="a">
<div><!-- wrapper div to have control over butttons -->
<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>
<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 data-role="header" data-theme="b">
<div><!-- wrapper div to have control over butttons -->
<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>
<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 data-role="header" data-theme="c">
<div><!-- wrapper div to have control over butttons -->
<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>
<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 data-role="header" data-theme="d">
<div><!-- wrapper div to have control over butttons -->
<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>
</div><!-- end swatch-bars -->
@ -117,6 +124,7 @@
<p></p>
<div class="swatch-preview">
<div data-role="header" data-theme="b">
<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>
@ -124,6 +132,7 @@
<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><!-- end swatch-bars -->

38
docs/toolbars/api-bars.html Executable file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Toolbars</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>Toolbar API</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<h2>Dependencies</h2>
<p>To be documented</p>
<h2>Options</h2>
<p>To be documented</p>
<h2>Methods</h2>
<p>To be documented</p>
<h2>Known Issues</h2>
<p>To be documented</p>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

118
docs/toolbars/bars-fixed.html Executable file
View file

@ -0,0 +1,118 @@
<!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">
<h1>Fixed toolbars</h1>
</div>
<div data-role="content" class="ui-body">
<h2>Demo description</h2>
<p>This is a demo of the "fixed" headers and footers used in the jQuery Mobile framework. The page content flows naturally, allowing us to take advantage of native scrolling instead of a scripting a faux-scrolling workaround. The header and footer divs are right in the flow of the document, but whenever they are out of view, you can tap the screen to make them appear. Tapping again or scrolling the page will cause them to appear back in the flow of the page (at the top and bottom). </p>
<p>You can disable this behavior by setting the header and/or footer to <a href="bars-inline.html">"inline" toolbar mode</a>.</p>
<h2>Header Level 2</h2>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div>
<div data-role="footer">
<h1>Fixed Footer</h1>
</div>
</div>
</body>
</html>

113
docs/toolbars/bars-fullscreen.html Executable file
View file

@ -0,0 +1,113 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Framework - Fixed toolbars variation</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<div data-role="header">
<h1>Fullscreen fixed toolbars</h1>
</div>
<div data-role="content" class="ui-body">
<h2>Demo description</h2>
<p>This is a demonstrates the "fullscreen" toolbar mode works just like the default <a href="bars-fixed.html">"fixed" toolbar mode</a> except that the toolbars aren't shown at the top and bottom of the page and only appear when the page is clicked. This is useful for immersive apps like photo or video viewers where you want the content to full when whole screen and toolbars can be summoned to appear by tapping the screen. Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content so this is best used for select situations.</p>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div>
<div data-role="footer">
<h1>Fixed Footer</h1>
</div>
</div>
</body>
</html>

114
docs/toolbars/bars-inline.html Executable file
View file

@ -0,0 +1,114 @@
<!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>Inline toolbars</h1>
</div>
<div data-role="content" class="ui-body">
<h2>Demo description</h2>
<p>This is a demo of the "inline" headers and footers used in the jQuery Mobile framework. In this mode, the headers and footer just sit in the normal page content flow and aren't re-positioned on scroll or tap to bring them back into view. </p>
<p>In a nutshell, this mode just disables the default behavior of the <a href="bars-fixed.html">"fixed" toolbar mode</a>. </p>
<h2>Header Level 2</h2>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div>
<div data-role="footer" data-position="inline">
<h1>Fixed Footer</h1>
</div>
</div>
</body>
</html>

91
docs/toolbars/bars-themes.html Executable file
View file

@ -0,0 +1,91 @@
<!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>

101
docs/toolbars/docs-bars.html Normal file
View file

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Toolbars</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>Toolbar basics</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ui-body-c">
<h2>Header/footer structure</h2>
<p>The <code>header</code> div is an optional bar at the top of the page that usually contains the page title text and buttons positioned in the the left or right of the bar for navigation or actions. The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.</p>
<div class="highlight">
<pre>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre>
</div>
<p>A header bar will be styled by default with the theme's "a" color swatch (black in the default theme) because the header is typically primary in the visual hierarchy of a page. To set the header bar 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">&lt;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">&gt;</span>
<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre>
</div>
<p>In the standard header configuration, there are slots for up to two buttons that sit on either side of the text heading. Each button is an <code>anchor</code> element that points to any <code>URI</code>. The button's width fits the length of the text and icons it contains. The header plugin looks for immediate children of the header container and will automatically set the first button found in the left slot and the second in the right slot. In this example, the Home button will appear in the left slot and Edit will appear in the right slot. If you want to add custom HTML markup (or embed a widget like Nav Bar) into the header bar, simply wrap the markup in a container <code>div</code> and the plugin won't apply the automatic button slot logic.</p>
<div class="highlight">
<pre><span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"index.php"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"edit.php"</span><span class="nt">&gt;</span>Edit<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre>
</div>
<p>The button position can also be controlled by adding classes to the button anchors. This is especially useful if there isn't a left button and you only want a button in the right slot. To specify the button position, add the class of <code>ui-btn-left</code> or <code>ui-btn-right</code> to the anchor.</p>
<div class="highlight">
<pre>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"tools.php"</span> <span class="na">class=</span><span class="s">"ui-btn-right"</span><span class="nt">&gt;</span>Tools<span class="nt">&lt;/a&gt;</span>
</pre>
</div>
<p>Any link added inside the header block will be automatically styled as a button that matches the color of the bar's theme swatch. To make a button stand out as a primary call to action, the <code>data-theme</code> attribute can be used to specify a contrasting button color from a different theme swatch. For example, if we set the header to theme "c" (light gray), both buttons would be styled as the "c" button by default. If we wanted the Save button to visually pop, we can override the color by setting the <code>data-theme</code> attribute to "b" (blue in our default theme) on the Save button's anchor.</p>
<div class="highlight">
<pre>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"add-user.php"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span>Save<span class="nt">&lt;/a&gt;</span>
</pre>
</div>
<a href="bars-themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Themed header examples</a>
<h2>Bar positioning and behavior</h2>
<p>Header and footers can be positioned on the page in a few different ways. By default, the toolbars use the "fixed" positioning mode. In this mode, the headers and footer are sitting in the natural document flow, which ensures that they are visible on all devices, regardless of JavaScript support.</p>
<p>To achieve the convenience of static toolbars without the drawbacks of implementing faux-scrolling in JavaScript, the framework adds logic to detect when a bar has been scrolled out of view and animates them back into place by dynamically re-positioning the bar to the top or bottom of the viewport. At any time,tapping the screen will toggle the visibility of the toolbars: tapping when they aren't visible brings the toolbars into view, tapping again hides them until you tap again. This gives users the option to hide the toolbars until needed to maximize screen real estate.</p>
<a href="bars-fixed.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fixed bar positioning example</a>
<p>In cases where the dynamically re-positioned "static" toolbar behavior isn't desired, you can simply turn off this feature by adding the <code>data-position="inline"</code> attribute on the header or footer container. This makes the toolbar stay in place in the page flow when the user scrolls, essentially the default HTML behavior.</p>
<a href="bars-inline.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inline bar positioning example</a>
<p>The third positioning option for bars is a "fullscreen" mode works just like the default <a href="bars-fixed.html">"fixed" toolbar mode</a> except that the toolbars aren't shown at the top and bottom of the page and only appear when the page is clicked. This is useful for immersive apps like photo or video viewers where you want the content to full when whole screen and toolbars can be summoned to appear by tapping the screen. Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content so this is best used for specific situations.</p>
<a href="bars-fullscreen.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fullscreeen bar positioning example</a>
<h2>Persistent footers</h2>
<p>If you want the footer to appear persistent as you navigate between pages (especially useful if using a nav bar, see below), you can achieve this effect by adding a <code>data-id</code> attribute to each page that should have the persistent footer. Giving a set of pages the same <code>data-id</code> attribute value (like "foo"), tells the framework to use the persistent footer transition when animating.</p>
<a href="bars-persist.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Persistent footer example</a>
<h2>Nav bar widget</h2>
<p>The Nav Bar widget can be added to the page to provide a navigation bar that accommodates an unlimited number of options in a compact element that placed inside a header, content, or footer region of the page. It displays up to 4 items in a horizontal bar with out without icons. If more than 4 items are in the navigation list, the 4th slot is used for a "more" link that opens a separate overlay with the full list of items. </p>
<p>The markup for a nav bar is identical to a basic linked list view: an unordered list with a link in each item and an optional icon. This markup is transformed into a nav bar by adding a <code>data-role="navbar" attribute to the list.</code></p>
<a href="navbar.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Nav bar examples</a>
</div><!-- /ui-body wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

113
docs/toolbars/footer-persist-result.html Executable file
View file

@ -0,0 +1,113 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Framework - Persistent footer 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">
<h1>Fixed Header</h1>
</div>
<div data-role="content" class="ui-body">
<h2>Demo description</h2>
<p>The footer on this page should have persisted. </p>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div>
<div data-role="footer" data-id="foo1">
<h1>Sticky Footer 2</h1>
</div>
</div>
</body>
</html>

116
docs/toolbars/footer-persist.html Executable file
View file

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Framework - Persistent footer 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">
<h1>Fixed Header</h1>
</div>
<div data-role="content" class="ui-body">
<h2>Demo description</h2>
<p>This is a demo of a persistent footer. The footer on this page should stick when transitioning to the next page, because they have the same data-id attributes. </p>
<a href="footer-persist-result.html" data-role="button" data-theme="b" data-icon="arrow-r" data-iconpos="right">Try it out!</a>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div>
<div data-role="footer" data-id="foo1">
<h1>Sticky Footer 1</h1>
</div>
</div>
</body>
</html>

BIN
docs/toolbars/images/album-af.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/toolbars/images/album-ag.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
docs/toolbars/images/album-bb.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
docs/toolbars/images/album-bk.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
docs/toolbars/images/album-hc.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/toolbars/images/album-k.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
docs/toolbars/images/album-mg.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
docs/toolbars/images/album-ok.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/toolbars/images/album-p.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
docs/toolbars/images/album-rh.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
docs/toolbars/images/album-ws.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
docs/toolbars/images/album-xx.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
docs/toolbars/images/asterisk_orange.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 760 B

BIN
docs/toolbars/images/book.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 593 B

BIN
docs/toolbars/images/cross.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 655 B

BIN
docs/toolbars/images/email_delete.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 756 B

BIN
docs/toolbars/images/flag_blue.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 671 B

BIN
docs/toolbars/images/folder.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 537 B

BIN
docs/toolbars/images/folder_heart.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 741 B

BIN
docs/toolbars/images/icon_box.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 555 B

BIN
docs/toolbars/images/icon_email_go.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 754 B

BIN
docs/toolbars/images/icon_tag.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 586 B

BIN
docs/toolbars/images/icon_vcard.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 533 B

BIN
docs/toolbars/images/star.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 670 B

47
docs/toolbars/index.html Executable file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Toolbars</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>Toolbars</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-body ">
<p>Toolbars are used for headers, footers and utility bars throughout a mobile app so jQuery Mobile provides a standard set of bars and navigation tools to cover most standard scenarios.</p>
</div><!-- /ui-body wrapper -->
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Documentation</li>
<li><a href="docs-bars.html">Toolbar basics</a></li>
<li><a href="api-bars.html">API documentation</a></li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Toolbar types</li>
<li><a href="bars-fixed.html">Fixed toolbars</a></li>
<li><a href="bars-inline.html">Inline toolbars</a></li>
<li><a href="bars-fullscreen.html">Fullscreen toolbars</a></li>
<li><a href="navbar.html">Nav bars</a></li>
<li><a href="footer-persist.html">Persistent footer</a></li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Styles & theming</li>
<li><a href="bars-themes.html">Applying themes</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

135
docs/toolbars/navbar.html Executable file
View file

@ -0,0 +1,135 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Framework - navbar Example</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>Navbar Example</h1>
<div data-role="navbar">
<ul>
<li><a href="bars-fixed.html">Fixed</a></li>
<li><a href="bars-inline.html">Inline</a></li>
<li><a href="bars-fullscreen.html">Fullscreen</a></li>
<li><a href="../../_dialog.html" data-transition="pop" data-rel="dialog">Dialog</a></li>
<li><a href="bars-persist.html">Persistent</a></li>
<li><a href="bars-themes.html">Themes</a></li>
</ul>
</div>
</div>
<div data-role="content" class=" ui-body">
<h1>Demo description</h1>
<p>This page includes a examples of the navbar plugin, which can be called on a div containing a UL.</p>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>navbar in the content:</h2>
<div data-role="navbar">
<ul>
<li><a href="bars-fixed.html">Fixed</a></li>
<li><a href="bars-inline.html">Inline</a></li>
<li><a href="bars-fullscreen.html">Fullscreen</a></li>
<li><a href="../../_dialog.html" data-transition="pop" data-rel="dialog">Dialog</a></li>
<li><a href="bars-persist.html">Persistent</a></li>
<li><a href="bars-themes.html">Themes</a></li>
</ul>
</div>
</div>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="bars-fixed.html">Fixed</a></li>
<li><a href="bars-inline.html">Inline</a></li>
<li><a href="bars-fullscreen.html">Fullscreen</a></li>
<li><a href="../../_dialog.html" data-transition="pop" data-rel="dialog">Dialog</a></li>
<li><a href="bars-persist.html">Persistent</a></li>
<li><a href="bars-themes.html">Themes</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>