-
-
-
\ No newline at end of file
diff --git a/docs/lists/api-lists.html b/docs/lists/api-lists.html
new file mode 100755
index 00000000..41bf79f6
--- /dev/null
+++ b/docs/lists/api-lists.html
@@ -0,0 +1,38 @@
+
+
+
+ jQuery Mobile Docs - Lists
+
+
+
+
+
+
+
+
+
List API
+
+
+
+
+
+
Dependencies
+
To be documented
+
+
Options
+
To be documented
+
+
Methods
+
To be documented
+
+
Known Issues
+
To be documented
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/lists.html b/docs/lists/docs-lists.html
old mode 100644
new mode 100755
similarity index 66%
rename from docs/lists.html
rename to docs/lists/docs-lists.html
index 0ee80826..3441def7
--- a/docs/lists.html
+++ b/docs/lists/docs-lists.html
@@ -11,14 +11,13 @@
A list starts as a simple unordered list with a data-role="listview" 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.
+
A list view is coded as a simple unordered list containing linked list items with a data-role="listview" 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.
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 li and the framework will add a vertical divider line, style the link as an icon-only arrow button, and sets the title attribute of the link to the text the link for accessibility.
List items can be turned into dividers to organize and group the list items. This is done by adding the data-role="list-divider" to any list item. These items are styled in a header class (swatch "c" by defaut") and won't be clickable.
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 data-filter="true" 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.
The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information, counts through HTML semantic markup.
+
The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information, counts through HTML semantic markup.
+
To add a count indicator to the right of the list item, wrap the number in an element with a class of ui-li-count
To add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis.
Supplemental information can be added to the right of each list item by wrapping content in an element with a class of ui-li-aside
To add thumbnails to the left of a list item, add an image
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 li and the framework will add a vertical divider line, style the link as an icon-only arrow button, and sets the title attribute of the link to the text the link for accessibility.
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 data-inset="true" attribute to the list (ul or ol), the list will get the inset appearance.
+
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 data-inset="true" attribute to the list (ul or ol), applies the inset appearance.
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 data-theme="e" attribute to the list, where the letter is the name of any list swatch in the theme.
diff --git a/docs/lists/images/album-af.jpg b/docs/lists/images/album-af.jpg
new file mode 100644
index 00000000..e2e34fd8
Binary files /dev/null and b/docs/lists/images/album-af.jpg differ
diff --git a/docs/lists/images/album-ag.jpg b/docs/lists/images/album-ag.jpg
new file mode 100644
index 00000000..02766347
Binary files /dev/null and b/docs/lists/images/album-ag.jpg differ
diff --git a/docs/lists/images/album-bb.jpg b/docs/lists/images/album-bb.jpg
new file mode 100644
index 00000000..e23683a4
Binary files /dev/null and b/docs/lists/images/album-bb.jpg differ
diff --git a/docs/lists/images/album-bk.jpg b/docs/lists/images/album-bk.jpg
new file mode 100644
index 00000000..58ec190e
Binary files /dev/null and b/docs/lists/images/album-bk.jpg differ
diff --git a/docs/lists/images/album-hc.jpg b/docs/lists/images/album-hc.jpg
new file mode 100644
index 00000000..cc099d10
Binary files /dev/null and b/docs/lists/images/album-hc.jpg differ
diff --git a/docs/lists/images/album-k.jpg b/docs/lists/images/album-k.jpg
new file mode 100644
index 00000000..ce6cfc29
Binary files /dev/null and b/docs/lists/images/album-k.jpg differ
diff --git a/docs/lists/images/album-mg.jpg b/docs/lists/images/album-mg.jpg
new file mode 100644
index 00000000..c3850e3a
Binary files /dev/null and b/docs/lists/images/album-mg.jpg differ
diff --git a/docs/lists/images/album-ok.jpg b/docs/lists/images/album-ok.jpg
new file mode 100644
index 00000000..90a08f7a
Binary files /dev/null and b/docs/lists/images/album-ok.jpg differ
diff --git a/docs/lists/images/album-p.jpg b/docs/lists/images/album-p.jpg
new file mode 100644
index 00000000..3dcce6a8
Binary files /dev/null and b/docs/lists/images/album-p.jpg differ
diff --git a/docs/lists/images/album-rh.jpg b/docs/lists/images/album-rh.jpg
new file mode 100644
index 00000000..614969a2
Binary files /dev/null and b/docs/lists/images/album-rh.jpg differ
diff --git a/docs/lists/images/album-ws.jpg b/docs/lists/images/album-ws.jpg
new file mode 100644
index 00000000..33cf555a
Binary files /dev/null and b/docs/lists/images/album-ws.jpg differ
diff --git a/docs/lists/images/album-xx.jpg b/docs/lists/images/album-xx.jpg
new file mode 100644
index 00000000..78409fe7
Binary files /dev/null and b/docs/lists/images/album-xx.jpg differ
diff --git a/docs/lists/images/asterisk_orange.png b/docs/lists/images/asterisk_orange.png
new file mode 100755
index 00000000..1ebebde5
Binary files /dev/null and b/docs/lists/images/asterisk_orange.png differ
diff --git a/docs/lists/images/book.png b/docs/lists/images/book.png
new file mode 100755
index 00000000..b0f4dd79
Binary files /dev/null and b/docs/lists/images/book.png differ
diff --git a/docs/lists/images/cross.png b/docs/lists/images/cross.png
new file mode 100755
index 00000000..1514d51a
Binary files /dev/null and b/docs/lists/images/cross.png differ
diff --git a/docs/lists/images/email_delete.png b/docs/lists/images/email_delete.png
new file mode 100755
index 00000000..a9932b1a
Binary files /dev/null and b/docs/lists/images/email_delete.png differ
diff --git a/docs/lists/images/flag_blue.png b/docs/lists/images/flag_blue.png
new file mode 100755
index 00000000..003924f5
Binary files /dev/null and b/docs/lists/images/flag_blue.png differ
diff --git a/docs/lists/images/folder.png b/docs/lists/images/folder.png
new file mode 100755
index 00000000..784e8fa4
Binary files /dev/null and b/docs/lists/images/folder.png differ
diff --git a/docs/lists/images/folder_heart.png b/docs/lists/images/folder_heart.png
new file mode 100755
index 00000000..56d7da1d
Binary files /dev/null and b/docs/lists/images/folder_heart.png differ
diff --git a/docs/lists/images/icon_box.png b/docs/lists/images/icon_box.png
new file mode 100755
index 00000000..8443c23e
Binary files /dev/null and b/docs/lists/images/icon_box.png differ
diff --git a/docs/lists/images/icon_email_go.png b/docs/lists/images/icon_email_go.png
new file mode 100755
index 00000000..4a6c5d39
Binary files /dev/null and b/docs/lists/images/icon_email_go.png differ
diff --git a/docs/lists/images/icon_tag.png b/docs/lists/images/icon_tag.png
new file mode 100755
index 00000000..9757fc6e
Binary files /dev/null and b/docs/lists/images/icon_tag.png differ
diff --git a/docs/lists/images/icon_vcard.png b/docs/lists/images/icon_vcard.png
new file mode 100755
index 00000000..c02f315d
Binary files /dev/null and b/docs/lists/images/icon_vcard.png differ
diff --git a/docs/lists/images/star.png b/docs/lists/images/star.png
new file mode 100755
index 00000000..b88c8578
Binary files /dev/null and b/docs/lists/images/star.png differ
diff --git a/docs/lists/index.html b/docs/lists/index.html
new file mode 100755
index 00000000..994c4ffb
--- /dev/null
+++ b/docs/lists/index.html
@@ -0,0 +1,52 @@
+
+
+
+ jQuery Mobile Docs - Lists
+
+
+
+
+
+
+
+
+
Lists
+
+
+
+
+
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.
+
+
+
\ No newline at end of file
diff --git a/docs/page.html b/docs/page.html
old mode 100644
new mode 100755
diff --git a/docs/themes.html b/docs/themes.html
old mode 100644
new mode 100755
index cf9ddbfb..5d3dfe87
--- a/docs/themes.html
+++ b/docs/themes.html
@@ -11,14 +11,13 @@
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.
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.
@@ -50,7 +49,7 @@
Lists
-
There are 2 supported list view styles. FIX THIS.
+
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 data-theme attribute.
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.
+
Context-aware button theming
+
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.
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 data-theme="a" to the anchor.
+
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 data-theme="a" 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.
+
+
+
\ No newline at end of file
diff --git a/docs/toolbars/bars-fixed.html b/docs/toolbars/bars-fixed.html
new file mode 100755
index 00000000..51d55270
--- /dev/null
+++ b/docs/toolbars/bars-fixed.html
@@ -0,0 +1,118 @@
+
+
+
+ jQuery Mobile Framework - Toolbars demo
+
+
+
+
+
+
+
+
+
Fixed toolbars
+
+
+
+
Demo description
+
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).
+
You can disable this behavior by setting the header and/or footer to "inline" toolbar mode.
+
+
+
+
+
+
+
Header Level 2
+
+
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
+
+
\ No newline at end of file
diff --git a/docs/toolbars/bars-fullscreen.html b/docs/toolbars/bars-fullscreen.html
new file mode 100755
index 00000000..c8559ff1
--- /dev/null
+++ b/docs/toolbars/bars-fullscreen.html
@@ -0,0 +1,113 @@
+
+
+
+ jQuery Mobile Framework - Fixed toolbars variation
+
+
+
+
+
+
+
+
+
Fullscreen fixed toolbars
+
+
+
+
Demo description
+
This is a demonstrates the "fullscreen" toolbar mode works just like the default "fixed" toolbar mode 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 over page content so this is best used for select situations.
+
+
+
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
+
+
\ No newline at end of file
diff --git a/docs/toolbars/bars-inline.html b/docs/toolbars/bars-inline.html
new file mode 100755
index 00000000..2dd5a7ec
--- /dev/null
+++ b/docs/toolbars/bars-inline.html
@@ -0,0 +1,114 @@
+
+
+
+ jQuery Mobile Framework - Toolbars demo
+
+
+
+
+
+
+
+
+
Inline toolbars
+
+
+
+
Demo description
+
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.
+
In a nutshell, this mode just disables the default behavior of the "fixed" toolbar mode.
+
+
+
Header Level 2
+
+
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
+
+
\ No newline at end of file
diff --git a/docs/toolbars/docs-bars.html b/docs/toolbars/docs-bars.html
new file mode 100644
index 00000000..c0a9cb04
--- /dev/null
+++ b/docs/toolbars/docs-bars.html
@@ -0,0 +1,101 @@
+
+
+
+ jQuery Mobile Docs - Toolbars
+
+
+
+
+
+
+
+
+
Toolbar basics
+
+
+
+
+
+
Header/footer structure
+
The header 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.
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 data-theme 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):
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 anchor element that points to any URI. 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 div and the plugin won't apply the automatic button slot logic.
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 ui-btn-left or ui-btn-right to the anchor.
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 data-theme 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 data-theme attribute to "b" (blue in our default theme) on the Save button's anchor.
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.
+
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.
In cases where the dynamically re-positioned "static" toolbar behavior isn't desired, you can simply turn off this feature by adding the data-position="inline" 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.
The third positioning option for bars is a "fullscreen" mode works just like the default "fixed" toolbar mode 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 over page content so this is best used for specific situations.
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 data-id attribute to each page that should have the persistent footer. Giving a set of pages the same data-id attribute value (like "foo"), tells the framework to use the persistent footer transition when animating.
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.
+
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 data-role="navbar" attribute to the list.
+
+
+
\ No newline at end of file
diff --git a/docs/toolbars/footer-persist-result.html b/docs/toolbars/footer-persist-result.html
new file mode 100755
index 00000000..62ac49eb
--- /dev/null
+++ b/docs/toolbars/footer-persist-result.html
@@ -0,0 +1,113 @@
+
+
+
+ jQuery Mobile Framework - Persistent footer demo
+
+
+
+
+
+
+
+
+
Fixed Header
+
+
+
+
+
Demo description
+
The footer on this page should have persisted.
+
+
+
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
+
+
\ No newline at end of file
diff --git a/docs/toolbars/footer-persist.html b/docs/toolbars/footer-persist.html
new file mode 100755
index 00000000..930e97e4
--- /dev/null
+++ b/docs/toolbars/footer-persist.html
@@ -0,0 +1,116 @@
+
+
+
+ jQuery Mobile Framework - Persistent footer demo
+
+
+
+
+
+
+
+
+
Fixed Header
+
+
+
+
+
Demo description
+
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.
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
+
+
\ No newline at end of file
diff --git a/docs/toolbars/images/album-af.jpg b/docs/toolbars/images/album-af.jpg
new file mode 100644
index 00000000..e2e34fd8
Binary files /dev/null and b/docs/toolbars/images/album-af.jpg differ
diff --git a/docs/toolbars/images/album-ag.jpg b/docs/toolbars/images/album-ag.jpg
new file mode 100644
index 00000000..02766347
Binary files /dev/null and b/docs/toolbars/images/album-ag.jpg differ
diff --git a/docs/toolbars/images/album-bb.jpg b/docs/toolbars/images/album-bb.jpg
new file mode 100644
index 00000000..e23683a4
Binary files /dev/null and b/docs/toolbars/images/album-bb.jpg differ
diff --git a/docs/toolbars/images/album-bk.jpg b/docs/toolbars/images/album-bk.jpg
new file mode 100644
index 00000000..58ec190e
Binary files /dev/null and b/docs/toolbars/images/album-bk.jpg differ
diff --git a/docs/toolbars/images/album-hc.jpg b/docs/toolbars/images/album-hc.jpg
new file mode 100644
index 00000000..cc099d10
Binary files /dev/null and b/docs/toolbars/images/album-hc.jpg differ
diff --git a/docs/toolbars/images/album-k.jpg b/docs/toolbars/images/album-k.jpg
new file mode 100644
index 00000000..ce6cfc29
Binary files /dev/null and b/docs/toolbars/images/album-k.jpg differ
diff --git a/docs/toolbars/images/album-mg.jpg b/docs/toolbars/images/album-mg.jpg
new file mode 100644
index 00000000..c3850e3a
Binary files /dev/null and b/docs/toolbars/images/album-mg.jpg differ
diff --git a/docs/toolbars/images/album-ok.jpg b/docs/toolbars/images/album-ok.jpg
new file mode 100644
index 00000000..90a08f7a
Binary files /dev/null and b/docs/toolbars/images/album-ok.jpg differ
diff --git a/docs/toolbars/images/album-p.jpg b/docs/toolbars/images/album-p.jpg
new file mode 100644
index 00000000..3dcce6a8
Binary files /dev/null and b/docs/toolbars/images/album-p.jpg differ
diff --git a/docs/toolbars/images/album-rh.jpg b/docs/toolbars/images/album-rh.jpg
new file mode 100644
index 00000000..614969a2
Binary files /dev/null and b/docs/toolbars/images/album-rh.jpg differ
diff --git a/docs/toolbars/images/album-ws.jpg b/docs/toolbars/images/album-ws.jpg
new file mode 100644
index 00000000..33cf555a
Binary files /dev/null and b/docs/toolbars/images/album-ws.jpg differ
diff --git a/docs/toolbars/images/album-xx.jpg b/docs/toolbars/images/album-xx.jpg
new file mode 100644
index 00000000..78409fe7
Binary files /dev/null and b/docs/toolbars/images/album-xx.jpg differ
diff --git a/docs/toolbars/images/asterisk_orange.png b/docs/toolbars/images/asterisk_orange.png
new file mode 100755
index 00000000..1ebebde5
Binary files /dev/null and b/docs/toolbars/images/asterisk_orange.png differ
diff --git a/docs/toolbars/images/book.png b/docs/toolbars/images/book.png
new file mode 100755
index 00000000..b0f4dd79
Binary files /dev/null and b/docs/toolbars/images/book.png differ
diff --git a/docs/toolbars/images/cross.png b/docs/toolbars/images/cross.png
new file mode 100755
index 00000000..1514d51a
Binary files /dev/null and b/docs/toolbars/images/cross.png differ
diff --git a/docs/toolbars/images/email_delete.png b/docs/toolbars/images/email_delete.png
new file mode 100755
index 00000000..a9932b1a
Binary files /dev/null and b/docs/toolbars/images/email_delete.png differ
diff --git a/docs/toolbars/images/flag_blue.png b/docs/toolbars/images/flag_blue.png
new file mode 100755
index 00000000..003924f5
Binary files /dev/null and b/docs/toolbars/images/flag_blue.png differ
diff --git a/docs/toolbars/images/folder.png b/docs/toolbars/images/folder.png
new file mode 100755
index 00000000..784e8fa4
Binary files /dev/null and b/docs/toolbars/images/folder.png differ
diff --git a/docs/toolbars/images/folder_heart.png b/docs/toolbars/images/folder_heart.png
new file mode 100755
index 00000000..56d7da1d
Binary files /dev/null and b/docs/toolbars/images/folder_heart.png differ
diff --git a/docs/toolbars/images/icon_box.png b/docs/toolbars/images/icon_box.png
new file mode 100755
index 00000000..8443c23e
Binary files /dev/null and b/docs/toolbars/images/icon_box.png differ
diff --git a/docs/toolbars/images/icon_email_go.png b/docs/toolbars/images/icon_email_go.png
new file mode 100755
index 00000000..4a6c5d39
Binary files /dev/null and b/docs/toolbars/images/icon_email_go.png differ
diff --git a/docs/toolbars/images/icon_tag.png b/docs/toolbars/images/icon_tag.png
new file mode 100755
index 00000000..9757fc6e
Binary files /dev/null and b/docs/toolbars/images/icon_tag.png differ
diff --git a/docs/toolbars/images/icon_vcard.png b/docs/toolbars/images/icon_vcard.png
new file mode 100755
index 00000000..c02f315d
Binary files /dev/null and b/docs/toolbars/images/icon_vcard.png differ
diff --git a/docs/toolbars/images/star.png b/docs/toolbars/images/star.png
new file mode 100755
index 00000000..b88c8578
Binary files /dev/null and b/docs/toolbars/images/star.png differ
diff --git a/docs/toolbars/index.html b/docs/toolbars/index.html
new file mode 100755
index 00000000..4e0baf6b
--- /dev/null
+++ b/docs/toolbars/index.html
@@ -0,0 +1,47 @@
+
+
+
+ jQuery Mobile Docs - Toolbars
+
+
+
+
+
+
+
+
+
Toolbars
+
+
+
+
+
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.
This page includes a examples of the navbar plugin, which can be called on a div containing a UL.
+
+
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
+
+
Header Level 2
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Aliquam tincidunt mauris eu risus.
+
+
+
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.
+
+
Header Level 3
+
+
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+