diff --git a/docs/intro.html b/docs/intro.html index 434661a2..87e39fcf 100755 --- a/docs/intro.html +++ b/docs/intro.html @@ -16,7 +16,34 @@
- + +

All pages in jQuery Mobile are built with clean, semantic HTML to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies progressive enhancement techniques to unobtrusively transform the page into a rich, interactive experience that leverages the power of jQuery and CSS3. The jQuery Mobile framework is designed to be easy enough to allow designers to build complex mobile-optimized web sites and apps with minimal JavaScript knowledge, yet powerful and extensible enough for experienced developers to build highly customized experiences.Key features include:

+

+ +

Markup-driven configuration: Mobilize()

+ +

The jQuery Mobile library uses a mobilize() function that automatically initializes plugins for all the jQuery Mobile widgets found on a page. HTML5 data-role attributes in HTML markup act as the trigger for the mobilize function. For example, a data-role="listview" attribute on an simple unordered list tells the mobilize() function to apply all the CSS classes and JavaScript behaviors required to transform a list of links into a finger-friendly mobile list view widget. Developers can choose to omit the mobilize() function and write their own tools to trigger the jQuery Mobile plugins, but it is a convenient way to unobtrusively apply the plugins in consistent way.

+ + jQery Mobile core & mobilize + +

Theming framework

+

Every layout and widget is designed around a new object-oriented CSS framework to support rich theming of sites and applications built with jQuery Mobile. Theming works similarly to the jQuery UI ThemeRoller system but with a few important improvements:

+ + + + Theming documentation
diff --git a/docs/lists/docs-lists.html b/docs/lists/docs-lists.html index 3441def7..2a21fd7f 100755 --- a/docs/lists/docs-lists.html +++ b/docs/lists/docs-lists.html @@ -16,8 +16,16 @@
-

Basic lists

-

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.

+

Basic linked lists

+

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 with right arrow indicator 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. Here is the HTML markup for a basic linked list.

+ +

+<ul data-role="listview" data-theme="g">
+	<li><a href="acura.html">Acura</a></li>
+	<li><a href="audi.html">Audi</a></li>
+	<li><a href="bmw.html">BMW</a></li>
+</ul>
+
Basic list example @@ -30,16 +38,27 @@ Numbered list example +

Read-only lists

+

List views can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework defaults to styling these list with the "c" theme swatch (flat white in the default theme) and sets the text size to a smaller size than the clickable lists to save a bit of space.

+ + Read-only list example + +

Split button lists

+

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. You can set the icon for the right icon by specifying a data-icon attribute with the icon name you want.

+ + Split list example + +

List dividers

-

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.

+

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 with the body swatch "b" by default (light gray in the default theme) but you can specify a theme for dividers by adding the data-groupingtheme attribute and specifying a theme swatch letter.

List divider example

Search filter

-

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.

+

jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. 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.

- Search filter example + Search filter example

Text formatting & counts

@@ -56,18 +75,13 @@ List with thumbnail images -

Split button lists

-

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.

- - Split list example -

Inset lists

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.

Inset list example

List theming

-

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.

+

Themes contain two list theme swatch styles. The default theme is "f" (silver in the default theme). The list appearance can be changed to any other color theme swatch by adding the data-theme="e" attribute to the list, where the letter is the name of any list swatch in the theme. The theme for list dividers can be set by adding the data-groupingtheme to the list and specifying a swatch letter.

Themed list example diff --git a/docs/lists/images/album-af.jpg b/docs/lists/images/album-af.jpg old mode 100644 new mode 100755 diff --git a/docs/lists/images/album-ag.jpg b/docs/lists/images/album-ag.jpg old mode 100644 new mode 100755 diff --git a/docs/lists/images/album-bb.jpg b/docs/lists/images/album-bb.jpg old mode 100644 new mode 100755 diff --git a/docs/lists/images/album-bk.jpg b/docs/lists/images/album-bk.jpg old mode 100644 new mode 100755 diff --git a/docs/lists/images/album-hc.jpg b/docs/lists/images/album-hc.jpg old mode 100644 new mode 100755 diff --git a/docs/lists/images/album-k.jpg b/docs/lists/images/album-k.jpg old mode 100644 new mode 100755 diff --git a/docs/lists/images/album-mg.jpg b/docs/lists/images/album-mg.jpg old mode 100644 new mode 100755 diff --git a/docs/lists/images/album-ok.jpg b/docs/lists/images/album-ok.jpg old mode 100644 new mode 100755 diff --git a/docs/lists/images/album-p.jpg b/docs/lists/images/album-p.jpg old mode 100644 new mode 100755 diff --git a/docs/lists/images/album-rh.jpg b/docs/lists/images/album-rh.jpg old mode 100644 new mode 100755 diff --git a/docs/lists/images/album-ws.jpg b/docs/lists/images/album-ws.jpg old mode 100644 new mode 100755 diff --git a/docs/lists/images/album-xx.jpg b/docs/lists/images/album-xx.jpg old mode 100644 new mode 100755 diff --git a/docs/lists/index.html b/docs/lists/index.html index 994c4ffb..ac738d61 100755 --- a/docs/lists/index.html +++ b/docs/lists/index.html @@ -26,16 +26,17 @@
-
    +
    1. The Godfather
    2. Inception
    3. The Good, the Bad and the Ugly
      4. diff --git a/docs/lists/lists-readonly.html b/docs/lists/lists-readonly.html index f05f7540..92ebfa4d 100755 --- a/docs/lists/lists-readonly.html +++ b/docs/lists/lists-readonly.html @@ -15,7 +15,7 @@
-
-
-
-

Theme swatch "a" applied to body, "e" to lists

-
+
-
diff --git a/docs/lists/lists-ul.html b/docs/lists/lists-ul.html index 000fcacf..bca4d2cc 100755 --- a/docs/lists/lists-ul.html +++ b/docs/lists/lists-ul.html @@ -15,7 +15,7 @@
-
diff --git a/docs/toolbars/docs-bars.html b/docs/toolbars/docs-bars.html old mode 100644 new mode 100755 index c0a9cb04..c2a571bd --- a/docs/toolbars/docs-bars.html +++ b/docs/toolbars/docs-bars.html @@ -16,8 +16,8 @@
-

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.

+

Header & footer bar structure

+

The header is an bar at the top of the page that usually contains the page title text and optional buttons positioned in the the left or right of the title 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.

@@ -25,9 +25,23 @@
 	<h1>Page Title</h1> 
 </div>
-
+
-

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):

+Header configuration options + +

The footer bar has the same structure as the header except for the data-role attribute and your choice of heading. Footers tend to be more freeform than headers in terms of content and functionality but they are designed to hold text and buttons, just like a header.

+ +
+
+<div data-role="footer"> 
+	<h4>Footer content</h4> 
+</div> 
+
+
+ +Footer configuration options + +

Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. To set the header or footer bars 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):

@@ -37,41 +51,12 @@
-

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.

- -
-
<div data-role="page"> 
-	<div data-role="header"> 
-		<a href="index.php">Home</a> 
-		<h1>Page Title</h1> 
-		<a href="edit.php">Edit</a> 
-	</div> 
-</div> 
-
-
- -

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.

- -
-
-<a href="tools.php" class="ui-btn-right">Tools</a> 
-
-
-
- -

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.

- -
-
-<a href="add-user.php" data-theme="b">Save</a> 
-
-
- - Themed header examples +Theming documentation -

Bar positioning and behavior

-

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.

+

Bar positioning and behavior

+ +

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.

Fixed bar positioning example @@ -83,15 +68,11 @@ Fullscreeen bar positioning example -

Persistent footers

-

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.

- - Persistent footer example - -

Nav bar widget

-

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.

- Nav bar examples +

Navbars

+ +

A navbar plugin makes it easy to add a horizontal list of links to the header, footer or even main content body of the page.

+ + Navbar configuration
diff --git a/docs/toolbars/docs-footers.html b/docs/toolbars/docs-footers.html new file mode 100755 index 00000000..b296b275 --- /dev/null +++ b/docs/toolbars/docs-footers.html @@ -0,0 +1,80 @@ + + + + jQuery Mobile Docs - Toolbars + + + + + +
+ +
+

Footer configuration

+
+ +
+
+ +

Footer bar structure

+ +

The footer bar has the same structure as the header except for the data-role attribute and your choice of heading. Footers tend to be more freeform than headers in terms of content and functionality but they are designed to hold text and buttons, just like a header.

+ +
+
+<div data-role="footer"> 
+	<h4>Footer content</h4> 
+</div> 
+
+
+ + +

The page footer is very similar to the header in terms of options and configuration. The primary differences are that the footer is designed to be less structured than the header to allow for more flexibility, so the framework doesn't automatically place buttons to the left or right based on source order as it does in the header. A footer is identified with the data-role="footer attribute and can contain any markup.

+ +
+
<div data-role="footer"> 
+   ...
+</div> 
+
+
+ + +

Theming options

+

Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. To set the header or footer bars 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):

+ +
+
+<div data-role="header" data-theme="b"> 
+	<h4>Footer content goes here</h4> 
+</div> 
+
+
+ + +

One common scenario is to have a few buttons in the footer. Just like the header, adding a set of anchor links inside the footer bar will trigger the mobilize() function to transform the links into the styled mobile buttons. In the footer, each button will be as wide as the text and icon contents and the buttons will sit side-by-side because each has the CSS display:inline-block property.

+ +
+
<div data-role="footer"> 
+	<a href="index.html" data-icon="plus">New</a> 
+	<a href="index.html" data-icon="delete">Delete</a> 
+	<a href="index.html" data-icon="search">Search</a> 
+</div> 
+
+
+ +

Persistent footers

+

In situations where the footer is being used as a global navigation element, you may want the footer to appear like it is fixed in place between page transitions. This can be accomplished by using the persistent footer feature included in jQuery Mobile. To make a footer appear to stay in place between transitions, simply add the data-id attribute to the footer of both pages and use the same id value for each. For example, by adding data-id="myfooter" to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. This effect will only work correctly if the header and footer toolbars are set to sticky so they are in view during the transition.

+ + +

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.

+ + Persistent footer example + + + +
+
+
+ + + \ No newline at end of file diff --git a/docs/toolbars/docs-headers.html b/docs/toolbars/docs-headers.html new file mode 100755 index 00000000..34fde067 --- /dev/null +++ b/docs/toolbars/docs-headers.html @@ -0,0 +1,88 @@ + + + + jQuery Mobile Docs - Toolbars + + + + + +
+ +
+

Header configuration

+
+ +
+
+ +

Header bar structure

+

The header is an bar at the top of the page that usually contains the page title text and optional buttons positioned in the the left or right of the title 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.

+ +
+
+<div data-role="header"> 
+	<h1>Page Title</h1> 
+</div> 
+
+
+ +

Header buttons

+ +

In the standard header configuration, there are slots for up to two buttons 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 link found in the left button slot and the second link in the right button 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.

+ +
+
<div data-role="page"> 
+	<div data-role="header"> 
+		<a href="index.php">Home</a> 
+		<h1>Page Title</h1> 
+		<a href="edit.php">Edit</a> 
+	</div> 
+</div> 
+
+
+ +

The button position can also be controlled by adding classes to the button anchors instead of relying on source order. 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.

+ +
+
+<a href="tools.php" class="ui-btn-right">Tools</a> 
+
+
+
+ +

If there isn't a user-defined button in the left slot, the framework will auto-generate a "back" button in that slot to automate the process of including this common navigation element on every page. To prevent the back button from being added to a header in these situations, add this attribute: data-nobackbtn="true".

+ +

Bar & button theme styling

+ +

The header will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. To set the header 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):

+ +
+
+<div data-role="header" data-theme="b"> 
+<h1>Page Title</h1> 
+</div> 
+
+
+ + +

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.

+ +
+
+<a href="add-user.php" data-theme="b">Save</a> 
+
+
+ + Themed header examples + + + +
+
+
+ + + \ No newline at end of file diff --git a/docs/toolbars/docs-navbars.html b/docs/toolbars/docs-navbars.html new file mode 100755 index 00000000..376265b3 --- /dev/null +++ b/docs/toolbars/docs-navbars.html @@ -0,0 +1,28 @@ + + + + jQuery Mobile Docs - Toolbars + + + + + +
+ +
+

Navbar basics

+
+ +
+
+ +

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.

+ Nav bar examples + +
+
+
+ + + \ No newline at end of file diff --git a/docs/toolbars/images/album-af.jpg b/docs/toolbars/images/album-af.jpg old mode 100644 new mode 100755 diff --git a/docs/toolbars/images/album-ag.jpg b/docs/toolbars/images/album-ag.jpg old mode 100644 new mode 100755 diff --git a/docs/toolbars/images/album-bb.jpg b/docs/toolbars/images/album-bb.jpg old mode 100644 new mode 100755 diff --git a/docs/toolbars/images/album-bk.jpg b/docs/toolbars/images/album-bk.jpg old mode 100644 new mode 100755 diff --git a/docs/toolbars/images/album-hc.jpg b/docs/toolbars/images/album-hc.jpg old mode 100644 new mode 100755 diff --git a/docs/toolbars/images/album-k.jpg b/docs/toolbars/images/album-k.jpg old mode 100644 new mode 100755 diff --git a/docs/toolbars/images/album-mg.jpg b/docs/toolbars/images/album-mg.jpg old mode 100644 new mode 100755 diff --git a/docs/toolbars/images/album-ok.jpg b/docs/toolbars/images/album-ok.jpg old mode 100644 new mode 100755 diff --git a/docs/toolbars/images/album-p.jpg b/docs/toolbars/images/album-p.jpg old mode 100644 new mode 100755 diff --git a/docs/toolbars/images/album-rh.jpg b/docs/toolbars/images/album-rh.jpg old mode 100644 new mode 100755 diff --git a/docs/toolbars/images/album-ws.jpg b/docs/toolbars/images/album-ws.jpg old mode 100644 new mode 100755 diff --git a/docs/toolbars/images/album-xx.jpg b/docs/toolbars/images/album-xx.jpg old mode 100644 new mode 100755 diff --git a/docs/toolbars/index.html b/docs/toolbars/index.html index 4e0baf6b..19d8053a 100755 --- a/docs/toolbars/index.html +++ b/docs/toolbars/index.html @@ -21,12 +21,15 @@ - - - + + + - + +