diff options
| author | Youmin Ha <youmin.ha@samsung.com> | 2012-08-23 16:13:20 +0900 |
|---|---|---|
| committer | Youmin Ha <youmin.ha@samsung.com> | 2012-08-23 16:13:20 +0900 |
| commit | f476ccb6d18ed0c7392ad5508a4c7108c1297f2a (patch) | |
| tree | bbdda31334a8da5bef6e1869a375075e1b8447a8 /libs/js/jquery-mobile-1.1.0/docs/pages | |
| parent | 1ebd5ca39c5801e5c53b0d339223713e898d0b10 (diff) | |
| download | web-ui-fw-f476ccb6d18ed0c7392ad5508a4c7108c1297f2a.tar.gz web-ui-fw-f476ccb6d18ed0c7392ad5508a4c7108c1297f2a.tar.bz2 web-ui-fw-f476ccb6d18ed0c7392ad5508a4c7108c1297f2a.zip | |
2.0_beta sync to rsa
Diffstat (limited to 'libs/js/jquery-mobile-1.1.0/docs/pages')
38 files changed, 4217 insertions, 0 deletions
diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-alt.html b/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-alt.html new file mode 100644 index 00000000..275f0b7f --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-alt.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Framework - Dialog Example</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + +<div data-role="page"> + <div data-role="header" data-theme="e"> + <h1>Dialog</h1> + + </div> + + <div data-role="content" data-theme="e"> + <h1>I'm colorful</h1> + <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p> + <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="a">Good for you</a> + <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="c">Don't care, really</a> + </div> + </div> + + +</body> +</html>
\ No newline at end of file diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-buttons.html b/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-buttons.html new file mode 100644 index 00000000..0a36872c --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-buttons.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Framework - Dialog Example</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + +<div data-role="page" class="dialog-actionsheet"> + + + <div data-role="content" data-theme="a"> + <h3>Share Photos</h3> + <a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Email</a> + <a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Upload to flickr</a> + <a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Share on Facebook</a> + <a href="dialog-success.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Tweet photo</a> + + <a href="index.html" data-role="button" data-rel="back" data-theme="a">Cancel</a> + </div> +</div> + + +</body> +</html>
\ No newline at end of file diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-overlay.html b/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-overlay.html new file mode 100644 index 00000000..81fb765c --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-overlay.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Framework - Dialog Example</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" data-overlay-theme="e"> + <div data-role="header" data-theme="b"> + <h1>Dialog</h1> + </div> + + <div data-role="content" data-theme="d"> + <h1>Custom overlay</h1> + <p>This dialog adds <code>data-overlay-theme="e"</code> to the page container to set the overlay swatch color.</p> + <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="a" data-inline="true">I like it</a> + </div> + + </div> + + +</body> +</html>
\ No newline at end of file diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-success.html b/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-success.html new file mode 100644 index 00000000..512c4661 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-success.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Framework - Dialog Example</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + +<div data-role="page" class="dialog-actionsheet"> + + + <div data-role="content" data-theme="b"> + <p>Flickr upload:</p> + <h3>Photos posted successfully</h3> + + <a href="page-dialogs.html" data-role="button" data-theme="b">View photo page</a> + <a href="page-dialogs.html" data-role="button" data-theme="c">Done</a> + </div> +</div> + + +</body> +</html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-with-select.html b/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-with-select.html new file mode 100644 index 00000000..2401afe5 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/dialog-with-select.html @@ -0,0 +1,118 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Framework - Dialog Example with Select</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>Dialog select test</h1> + </div> + <div data-role="content" > + <a href="#bar" data-role="button" data-rel="dialog">Open dialog</a> + </div> + +</div> + + + + + + + +<div data-role="page" id="bar"> + + <div data-role="header" data-theme="d"> + <h1>Sample Dialogs</h1> + </div> + + <div data-role="content" data-theme="c"> + + <form action> + <div data-role="fieldcontain"> + <label for="select-choice-1" class="select">Choose shipping method:</label> + <select name="select-choice-1" id="select-choice-1" data-native-menu="false"> + <option value="standard">Standard: 7 day</option> + <option value="rush">Rush: 3 days</option> + <option value="express">Express: next day</option> + <option value="overnight">Overnight</option> + </select> + </div> + + <div data-role="fieldcontain"> + <label for="select-choice-3" class="select">Your state:</label> + <select name="select-choice-3" id="select-choice-3" data-native-menu="false"> + <option value="AL">Alabama</option> + <option value="AK">Alaska</option> + <option value="AZ">Arizona</option> + <option value="AR">Arkansas</option> + <option value="CA">California</option> + <option value="CO">Colorado</option> + <option value="CT">Connecticut</option> + <option value="DE">Delaware</option> + <option value="FL">Florida</option> + <option value="GA">Georgia</option> + <option value="HI">Hawaii</option> + <option value="ID">Idaho</option> + <option value="IL">Illinois</option> + <option value="IN">Indiana</option> + <option value="IA">Iowa</option> + <option value="KS">Kansas</option> + <option value="KY">Kentucky</option> + <option value="LA">Louisiana</option> + <option value="ME">Maine</option> + <option value="MD">Maryland</option> + <option value="MA">Massachusetts</option> + <option value="MI">Michigan</option> + <option value="MN">Minnesota</option> + <option value="MS">Mississippi</option> + <option value="MO">Missouri</option> + <option value="MT">Montana</option> + <option value="NE">Nebraska</option> + <option value="NV">Nevada</option> + <option value="NH">New Hampshire</option> + <option value="NJ">New Jersey</option> + <option value="NM">New Mexico</option> + <option value="NY">New York</option> + <option value="NC">North Carolina</option> + <option value="ND">North Dakota</option> + <option value="OH">Ohio</option> + <option value="OK">Oklahoma</option> + <option value="OR">Oregon</option> + <option value="PA">Pennsylvania</option> + <option value="RI">Rhode Island</option> + <option value="SC">South Carolina</option> + <option value="SD">South Dakota</option> + <option value="TN">Tennessee</option> + <option value="TX">Texas</option> + <option value="UT">Utah</option> + <option value="VT">Vermont</option> + <option value="VA">Virginia</option> + <option value="WA">Washington</option> + <option value="WV">West Virginia</option> + <option value="WI">Wisconsin</option> + <option value="WY">Wyoming</option> + </select> + </div> + + <a href="#foo" data-role="button" data-rel="back" data-theme="c">Real Submit Would go here</a> + </form> + <a href="#foo" data-role="button" data-rel="back" data-theme="c">Cancel</a> + </div> + </div> + + +</body> +</html>
\ No newline at end of file diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/dialog.html b/libs/js/jquery-mobile-1.1.0/docs/pages/dialog.html new file mode 100644 index 00000000..25947819 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/dialog.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Framework - Dialog Example</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + +<div data-role="dialog"> + + <div data-role="header" data-theme="d"> + <h1>Dialog</h1> + + </div> + + <div data-role="content" data-theme="c"> + <h1>Delete page?</h1> + <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p> + <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a> + <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="c">Cancel</a> + </div> + </div> + + +</body> +</html>
\ No newline at end of file diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/docs-links-urltest/index.html b/libs/js/jquery-mobile-1.1.0/docs/pages/docs-links-urltest/index.html new file mode 100644 index 00000000..e5aea72e --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/docs-links-urltest/index.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Framework - Test URL Example</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script> + <script src="../../../js/jquery.js"></script> + <script src="../../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../../js/"></script> + +</head> +<body> + + <div data-role="page" data-url="docs/pages/docs-links-urltest/"> + <div data-role="header" data-theme="f"> + <h1>URL Test Page</h1> + </div> + <div data-role="content"> + <p>This is a regular page that updated the url with a different value than was requested.</p> + </div> + </div> + + +</body> +</html>
\ No newline at end of file diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/animals.html b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/animals.html new file mode 100644 index 00000000..62a8fe95 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/animals.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<title>Animals</title> +<link rel="stylesheet" href="../../../css/themes/default/"> +<script src="../../../js/jquery.js"></script> + <script src="../../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../../js/"></script> + +</head> + +<body> +<div data-role="page"> + <div data-role="header"><h1>Animals</h1></div> + <div data-role="content"> + <p>All your favorites from aardvarks to zebras.</p> + <ul data-role="listview" data-inset="true"> + <li>Pets</li> + <li>Farm Animals</li> + <li>Wild Animals</li> + </ul> + </div> +</div> +</body> +</html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/category.php b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/category.php new file mode 100644 index 00000000..72c89479 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/category.php @@ -0,0 +1,150 @@ +<?php +// This is a demo script that takes a single 'id' query param argument and +// returns its associated data as HTML, or, if called via XmlHttpRequest, +// returns its data as JSON. + +// In the real-world, this category data would be looked +// up on the fly from some database. For this sample, we +// are just using some static in-memory data. + +$category_data = array( + animals => array( + name => "Animals", + description => "All your favorites from aardvarks to zebras.", + items => array( + array( + name => "Pets", + ), + array( + name => "Farm Animals", + ), + array( + name => "Wild Animals", + ) + ) + ), + colors => array( + name => "Colors", + description => "Fresh colors from the magic rainbow.", + items => array( + array( + name => "Blue", + ), + array( + name => "Green", + ), + array( + name => "Orange", + ), + array( + name => "Purple", + ), + array( + name => "Red", + ), + array( + name => "Yellow", + ), + array( + name => "Violet", + ) + ) + ), + vehicles => array( + name => "Vehicles", + description => "Everything from cars to planes.", + items => array( + array( + name => "Cars", + ), + array( + name => "Planes", + ), + array( + name => "Construction", + ) + ) + ) +); + +// Get the name of the category to display from +// the query params for the script. + +$category_name = ''; +if ( $_GET[ 'id' ] ) { + $category_name = $_GET[ 'id' ]; +} + +// Now get the category data, by name, from our in-memory +// dictionary. This is the part where a script normally fetches +// the data from a database. + +$category_obj = $category_data[ $category_name ]; + +// Now figure out how the script is being called. If it's being +// called via XmlHttpRequest, then send the data back as JSON. +// If not, then send it back as a list in an HTML document. + +if( $_SERVER[ "HTTP_X_REQUESTED_WITH" ] && $_SERVER[ "HTTP_X_REQUESTED_WITH" ] ==="XMLHttpRequest" ) { + // Data should be written out as JSON. + header("Content-type: application/json"); + if ( !$category_obj ) { + echo 'null'; + } else { + echo '{"name":"' . $category_obj[ 'name' ] + . '","description":"' . $category_obj[ 'description' ] + . '","items":['; + + $arr = $category_obj[ 'items' ]; + $count = count($arr); + for ( $i = 0; $i < $count; $i++ ) { + if ( $i ) { + echo ","; + } + echo '{"name":"' . $arr[ $i ][ 'name' ] . '"}'; + } + echo "]}"; + } +} else { + // Data should be written out as HTML. + header("Content-type: text/html"); +?> +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<title>Vehicles</title> +<link rel="stylesheet" href="../../../css/themes/default/"> +<script src="../../../js/jquery.js"></script> +<script src="../../../js/"></script> +</head> +<body> +<div data-role="page" data-add-back-btn="true"> + <div data-role="header"><h1><?php if ( $category_obj ) { echo $category_obj['name']; } else { echo "No Match"; } ?></h1></div> + <div data-role="content"> +<?php + if ( !$category_obj ) { +?> + <p>No matches found.</p> +<?php + } else { +?> + <p><?php echo $catgory_object['description']; ?></p> + <ul data-role="listview" data-inset="true"> +<?php + $arr = $category_obj[ 'items' ]; + $count = count($arr); + for ( $i = 0; $i < $count; $i++ ) { + echo "\t\t\t<li>" . $arr[ $i ][ 'name' ] . "</li>\n"; + } +?> + </ul> +<?php + } +?> + </div> +</div> +</body> +</html> +<?php }
\ No newline at end of file diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/colors.html b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/colors.html new file mode 100644 index 00000000..c8fff724 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/colors.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<title>Colors</title> +<link rel="stylesheet" href="../../../css/themes/default/"> +<script src="../../../js/jquery.js"></script> + <script src="../../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../../js/"></script> + +</head> + +<body> +<div data-role="page"> + <div data-role="header"><h1>Colors</h1></div> + <div data-role="content"> + <p>Fresh colors from the magic rainbow.</p> + <ul data-role="listview" data-inset="true"> + <li>Blue</li> + <li>Green</li> + <li>Orange</li> + <li>Purple</li> + <li>Red</li> + <li>Yellow</li> + <li>Violet</li> + </ul> + </div> +</div> +</body> +</html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/index.html b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/index.html new file mode 100644 index 00000000..4120c2cc --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/index.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<title>Dynamic Page Samples</title> +<link rel="stylesheet" href="../../../css/themes/default/"> +<script src="../../../js/jquery.js"></script> + <script src="../../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../../js/"></script> + +</head> + +<body> +<div data-role="page"> + <div data-role="header"><h1>Categories</h1></div> + <div data-role="content"> + <h2>Select a Category Below:</h2> + <ul data-role="listview" data-inset="true"> + <li><a href="sample-reuse-page.html" rel="external">Re-using a Page with In-Memory Data</a></li> + <li><a href="sample-reuse-page-external.html" rel="external">Re-using a Page With External Data</a></li> + </ul> + </div> +</div> +</body> +</html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/sample-reuse-page-external.html b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/sample-reuse-page-external.html new file mode 100644 index 00000000..18bf1644 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/sample-reuse-page-external.html @@ -0,0 +1,121 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<title>changePage JSON Sample</title> +<link rel="stylesheet" href="../../../css/themes/default/"> +<script src="../../../js/jquery.js"></script> + <script src="../../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../../js/"></script> + +<script type="text/javascript"> + +// Load the JSON data for a specific category, based on +// the URL passed in. Generate markup for the items in the +// category, inject it into an embedded page, and then make +// that page the current active page. +function showCategory( url, options ) +{ + $.getJSON( url, function( category ) { + if ( category ) { + // Get the page we are going to dump our content into. + var $page = $( "#category-items" ), + + // Get the header for the page. + $header = $page.children( ":jqmData(role=header)" ), + + // Get the content area element for the page. + $content = $page.children( ":jqmData(role=content)" ), + + // The markup we are going to inject into the content + // area of the page. + markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>", + + // The array of items for this category. + cItems = category.items, + + // The number of items in the category. + numItems = cItems.length; + + // Generate a list item for each item in the category + // and add it to our markup. + for ( var i = 0; i < numItems; i++ ) { + markup += "<li>" + cItems[i].name + "</li>"; + } + markup += "</ul>"; + + // Find the h1 element in our header and inject the name of + // the category into it. + $header.find( "h1" ).html( category.name ); + + // Inject the category items markup into the content element. + $content.html( markup ); + + // Pages are lazily enhanced. We call page() on the page + // element to make sure it is always enhanced before we + // attempt to enhance the listview markup we just injected. + // Subsequent calls to page() are ignored since a page/widget + // can only be enhanced once. + $page.page(); + + // Enhance the listview we just injected. + $content.find( ":jqmData(role=listview)" ).listview(); + + // We don't want the data-url of the page we just modified + // to be the url that shows up in the browser's location field, + // so set the dataUrl option to the URL for the category + // we just loaded. + options.dataUrl = url; + + // Now call changePage() and tell it to switch to + // the page we just modified. + $.mobile.changePage( $page, options ); + } + }); +} + + +// Listen for any attempts to call changePage(). +$(document).bind( "pagebeforechange", function( e, data ) { + // We only want to handle changePage() calls where the caller is + // asking us to load a page by URL. + if ( typeof data.toPage === "string" ) { + // We are being asked to load a page by URL, but we only + // want to handle URLs that request the data for a specific + // category. + var u = $.mobile.path.parseUrl( data.toPage ); + if ( u.pathname.search("category.php") !== -1 ) { + // We're being asked to display the items for a specific category. + // Call our internal method that builds the content for the category + // on the fly based on our in-memory category data structure. + showCategory( u.href, data.options ); + + // Make sure to tell changePage() we've handled this call so it doesn't + // have to do anything. + e.preventDefault(); + } + } +}); + +</script> +</head> + +<body> +<div data-role="page"> + <div data-role="header"><h1>Categories</h1></div> + <div data-role="content"> + <h2>Select a Category Below:</h2> + <ul data-role="listview" data-inset="true"> + <li><a href="category.php?id=animals">Animals</a></li> + <li><a href="category.php?id=colors">Colors</a></li> + <li><a href="category.php?id=vehicles">Vehicles</a></li> + </ul> + </div> +</div> +<div id="category-items" data-role="page" data-add-back-btn="true"> + <div data-role="header"><h1></h1></div> + <div data-role="content"></div> +</div> +</body> +</html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/sample-reuse-page.html b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/sample-reuse-page.html new file mode 100644 index 00000000..202bffd1 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/sample-reuse-page.html @@ -0,0 +1,197 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<title>changePage JSON Sample</title> +<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" /> +<script src="../../../js/jquery.js"></script> +<script src="../../../docs/_assets/js/jqm-docs.js"></script> +<script src="../../../js/"></script> +<script> + +// Some sample categorized data. This data is in-memory +// for demonstration purposes, but could be loaded dynamically +// via ajax. +var categoryData = { + animals: { + name: "Animals", + description: "All your favorites from aardvarks to zebras.", + items: [ + { + name: "Pets" + }, + { + name: "Farm Animals" + }, + { + name: "Wild Animals" + } + ] + }, + colors: { + name: "Colors", + description: "Fresh colors from the magic rainbow.", + items: [ + { + name: "Blue" + }, + { + name: "Green" + }, + { + name: "Orange" + }, + { + name: "Purple" + }, + { + name: "Red" + }, + { + name: "Yellow" + }, + { + name: "Violet" + } + ] + }, + vehicles: { + name: "Vehicles", + description: "Everything from cars to planes.", + items: [ + { + name: "Cars" + }, + { + name: "Planes" + }, + { + name: "Construction" + } + ] + } +}; + +// Load the data for a specific category, based on +// the URL passed in. Generate markup for the items in the +// category, inject it into an embedded page, and then make +// that page the current active page. +function showCategory( urlObj, options ) +{ + var categoryName = urlObj.hash.replace( /.*category=/, "" ), + + // Get the object that represents the category we + // are interested in. Note, that at this point we could + // instead fire off an ajax request to fetch the data, but + // for the purposes of this sample, it's already in memory. + category = categoryData[ categoryName ], + + // The pages we use to display our content are already in + // the DOM. The id of the page we are going to write our + // content into is specified in the hash before the '?'. + pageSelector = urlObj.hash.replace( /\?.*$/, "" ); + + if ( category ) { + // Get the page we are going to dump our content into. + var $page = $( pageSelector ), + + // Get the header for the page. + $header = $page.children( ":jqmData(role=header)" ), + + // Get the content area element for the page. + $content = $page.children( ":jqmData(role=content)" ), + + // The markup we are going to inject into the content + // area of the page. + markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>", + + // The array of items for this category. + cItems = category.items, + + // The number of items in the category. + numItems = cItems.length; + + // Generate a list item for each item in the category + // and add it to our markup. + for ( var i = 0; i < numItems; i++ ) { + markup += "<li>" + cItems[i].name + "</li>"; + } + markup += "</ul>"; + + // Find the h1 element in our header and inject the name of + // the category into it. + $header.find( "h1" ).html( category.name ); + + // Inject the category items markup into the content element. + $content.html( markup ); + + // Pages are lazily enhanced. We call page() on the page + // element to make sure it is always enhanced before we + // attempt to enhance the listview markup we just injected. + // Subsequent calls to page() are ignored since a page/widget + // can only be enhanced once. + $page.page(); + + // Enhance the listview we just injected. + $content.find( ":jqmData(role=listview)" ).listview(); + + // We don't want the data-url of the page we just modified + // to be the url that shows up in the browser's location field, + // so set the dataUrl option to the URL for the category + // we just loaded. + options.dataUrl = urlObj.href; + + // Now call changePage() and tell it to switch to + // the page we just modified. + $.mobile.changePage( $page, options ); + } +} + + +// Listen for any attempts to call changePage(). +$(document).bind( "pagebeforechange", function( e, data ) { + // We only want to handle changePage() calls where the caller is + // asking us to load a page by URL. + if ( typeof data.toPage === "string" ) { + // We are being asked to load a page by URL, but we only + // want to handle URLs that request the data for a specific + // category. + var u = $.mobile.path.parseUrl( data.toPage ), + re = /^#category-item/; + if ( u.hash.search(re) !== -1 ) { + // We're being asked to display the items for a specific category. + // Call our internal method that builds the content for the category + // on the fly based on our in-memory category data structure. + showCategory( u, data.options ); + + // Make sure to tell changePage() we've handled this call so it doesn't + // have to do anything. + e.preventDefault(); + } + } +}); + + +</script> +</head> + +<body> +<div id="home" data-role="page"> + <div data-role="header"><h1>Categories</h1></div> + <div data-role="content"> + <h2>Select a Category Below:</h2> + <ul data-role="listview" data-inset="true"> + <li><a href="#category-items?category=animals">Animals</a></li> + <li><a href="#category-items?category=colors">Colors</a></li> + <li><a href="#category-items?category=vehicles">Vehicles</a></li> + </ul> + </div> + +</div> +<div id="category-items" data-role="page"> + <div data-role="header"><h1></h1></div> + <div data-role="content"></div> +</div> +</body> +</html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/vehicles.html b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/vehicles.html new file mode 100644 index 00000000..cd1824e3 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/dynamic-samples/vehicles.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<title>Vehicles</title> +<link rel="stylesheet" href="../../../css/themes/default/"> +<script src="../../../js/jquery.js"></script> + <script src="../../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../../js/"></script> + +</head> + +<body> +<div data-role="page"> + <div data-role="header"><h1>Vehicles</h1></div> + <div data-role="content"> + <p>Everything from cars to planes.</p> + <ul data-role="listview" data-inset="true"> + <li>Cars</li> + <li>Planes</li> + <li>Destruction</li> + </ul> + </div> +</div> +</body> +</html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/index.html b/libs/js/jquery-mobile-1.1.0/docs/pages/index.html new file mode 100644 index 00000000..39c28912 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/index.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Pages</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-index"> + + <div data-role="header" data-theme="f"> + <h1>Pages</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + + <p>jQuery Mobile includes automatic AJAX page loading of external pages with back button history support, a set of animated page transitions and simple tools for displaying pages as dialogs.</p> + + + <ul data-role="listview" data-inset="true"> + <li><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="page-titles.html">Page titles</a></li> + <li><a href="page-links.html">Linking pages</a></li> + <li><a href="page-transitions.html">Page transitions</a></li> + <li><a href="page-dialogs.html">Dialogs</a></li> + <li><a href="page-cache.html">Prefetching & caching pages</a></li> + <li><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li><a href="page-scripting.html">Scripting pages</a></li> + <li><a href="phonegap.html">PhoneGap apps</a></li> + <li><a href="touchoverflow.html">touchOverflow feature</a></li> + <li><a href="pages-themes.html">Theming pages</a></li> + </ul> + + + </div><!-- /ui-body wrapper --> +</div><!-- /page --> + +</body> +</html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/multipage-template.html b/libs/js/jquery-mobile-1.1.0/docs/pages/multipage-template.html new file mode 100755 index 00000000..acd96439 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/multipage-template.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Multi-page template</title> + <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> + <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> + <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> +</head> + + +<body> + +<!-- Start of first page: #one --> +<div data-role="page" id="one"> + + <div data-role="header"> + <h1>Multi-page</h1> + </div><!-- /header --> + + <div data-role="content" > + <h2>One</h2> + + <p>I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p> + + <p>This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a <a href="page-template.html"> single page template</a> that has just one page within it.</p> + <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p> + <p>You link to internal pages by referring to the ID of the page you want to show. For example, to <a href="#two" >link</a> to the page with an ID of "two", my link would have a <code>href="#two"</code> in the code.</p> + + <h3>Show internal pages:</h3> + <p><a href="#two" data-role="button">Show page "two"</a></p> + <p><a href="#popup"data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p> + </div><!-- /content --> + + <div data-role="footer" data-theme="d"> + <h4>Page Footer</h4> + </div><!-- /footer --> +</div><!-- /page one --> + + +<!-- Start of second page: #two --> +<div data-role="page" id="two" data-theme="a"> + + <div data-role="header"> + <h1>Two</h1> + </div><!-- /header --> + + <div data-role="content" data-theme="a"> + <h2>Two</h2> + <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p> + <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p> + <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p> + + </div><!-- /content --> + + <div data-role="footer"> + <h4>Page Footer</h4> + </div><!-- /footer --> +</div><!-- /page two --> + + +<!-- Start of third page: #popup --> +<div data-role="page" id="popup"> + + <div data-role="header" data-theme="e"> + <h1>Dialog</h1> + </div><!-- /header --> + + <div data-role="content" data-theme="d"> + <h2>Popup</h2> + <p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p> + <p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p> + </div><!-- /content --> + + <div data-role="footer"> + <h4>Page Footer</h4> + </div><!-- /footer --> +</div><!-- /page popup --> + +</body> +</html>
\ No newline at end of file diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-anatomy.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-anatomy.html new file mode 100644 index 00000000..7ca9e95a --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-anatomy.html @@ -0,0 +1,225 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Anatomy of a Page</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>Anatomy of a Page</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + <p>The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.</p> + + <p>The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p> + + <h2>Mobile page structure</h2> + + <p>A jQuery Mobile site must start with an HTML5 'doctype' to take full advantage of all of the framework's features. (Older devices with browsers that don't understand HTML5 will safely ignore the 'doctype' and various custom attributes.) </p> + <p>In the 'head', references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off. jQuery Mobile 1.1 works with both 1.6.4 and 1.7.1 versions of jQuery core. We recommend linking to the files hosted on the jQuery CDN for best performance: </p> + +<pre><code> +<strong><!DOCTYPE html> </strong> +<html> + <head> + <title>Page Title</title> + + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> + <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> + <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> +</head> + +<body> +...content goes here... +</body> +</html> +</code></pre> + + <h2>Viewport meta tag</h2> + <p>Note above that there is a meta <code>viewport</code> tag in the <code>head</code> to specify how the browser should display the page zoom level and dimensions. If this isn't set, many mobile browsers will use a "virtual" page width around 900 pixels to make it work well with existing desktop sites but the screens may look zoomed out and too wide. By setting the viewport attributes to <code>content="width=device-width, initial-scale=1"</code>, the width will be set to the pixel width of the device screen. </p> + + <pre><code><meta name="viewport" content="width=device-width, initial-scale=1"> </code></pre> + + <p>These settings do not disable the user's ability to zoom the pages, which is nice from an accessibility perspective. There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but this will hopefully be fixed in a future release. You can set other viewport values to disable zooming if required since this is part of your page content, not the library. </p> + + <h2>Inside the body: Pages</h2> + <p>Inside the <code><body></code> tag, each view or "page" on the mobile device is identified with an element (usually a <code>div</code>) with the <code> data-role="page"</code> attribute. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to pages.</p> + +<div class="highlight"> +<pre><span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">></span> + ... +<span class="nt"></div></span> +</pre> +</div> + + <p>Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>.</p> + +<div class="highlight"> +<pre><span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">></span> + <span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">></span>...<span class="nt"></div></span> + <span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">></span>...<span class="nt"></div></span> + <span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">></span>...<span class="nt"></div></span> +<span class="nt"></div></span> +</pre> +</div> + + +<h2>Putting it together: Basic single page template</h2> + +<p>Putting it all together, this is the standard boilerplate page template you should start with on a project: </p> + +<pre><code> +<!DOCTYPE html> +<html> + <head> + <title>Page Title</title> + + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> + <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> + <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> +</head> +<body> + +<div data-role="page"> + + <div data-role="header"> + <h1>Page Title</h1> + </div><!-- /header --> + + <div data-role="content"> + <p>Page content goes here.</p> + </div><!-- /content --> + + <div data-role="footer"> + <h4>Page Footer</h4> + </div><!-- /footer --> +</div><!-- /page --> + +</body> +</html> +</code></pre> + + <a href="page-template.html" data-inline="true" data-theme="b" data-role="button">View boilerplate template</a> + + + <h2>Multi-page template structure</h2> + + <p>A single HTML document can contain multiple 'pages' that are loaded together by stacking multiple divs with a <code> data-role</code> of <code>"page"</code>. Each 'page' block needs a unique ID (<code>id="foo"</code>) that will be used to link internally between 'pages' (<code>href="#foo"</code>). When a link is clicked, the framework will look for an internal 'page' with the ID and transition it into view.</p> + + <p>Here is an example of a 2 "page" site built with two jQuery Mobile divs navigated by linking to an ID placed on each page wrapper. Note that the IDs on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document. Here is what two pages look inside the <code>body</code> element.</p> + +<pre><code> +<body> + +<!-- Start of first page --> +<div data-role="page" id="foo"> + + <div data-role="header"> + <h1>Foo</h1> + </div><!-- /header --> + + <div data-role="content"> + <p>I'm first in the source order so I'm shown as the page.</p> + <p>View internal page called <a href="#bar">bar</a></p> + </div><!-- /content --> + + <div data-role="footer"> + <h4>Page Footer</h4> + </div><!-- /footer --> +</div><!-- /page --> + + +<!-- Start of second page --> +<div data-role="page" id="bar"> + + <div data-role="header"> + <h1>Bar</h1> + </div><!-- /header --> + + <div data-role="content"> + <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p> + <p><a href="#foo">Back to foo</a></p> + </div><!-- /content --> + + <div data-role="footer"> + <h4>Page Footer</h4> + </div><!-- /footer --> +</div><!-- /page --> +</body> +</code></pre> + + <a href="../../docs/pages/multipage-template.html" data-inline="true" data-theme="b" data-role="button" rel="external">View multi-page template</a> + + <p> </p> + + <p>PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax 'pages', it's not currently possible to deep link to an anchor (<code>index.html#foo</code>) on a page in jQuery Mobile, because the framework will look for a 'page' with an <code>ID</code> of <code>#foo</code> instead of the native behavior of scrolling to the content with that <code>ID</code>.</p> + + +<h2>Conventions, not requirements</h2> + +<p>Although the page structure outlined above is a recommended approach for a standard web app built with jQuery Mobile, the framework is very flexible with document structure. The page, header, content, and footer data-role elements are optional and are mostly helpful for providing some basic formatting and structure. The page wrapper that used to be required for auto-initialization to work is now optional for single page documents, so there isn't any required markup at all. For a web page with a custom layout, all of these structural elements can be omitted and the Ajax navigation and all widgets will work just like they do in the boilerplate structure. Behind the scenes, the framework will inject the page wrapper if it's not included in the markup because it’s needed for managing pages, but the starting markup can now be extremely simple. </p> + +<p>Note that in a multi-page setup, you are required to have page wrappers in your markup in order to group the content into multiple pages.</p> + + + + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + + <li data-role="list-divider">Pages & Dialogs</li> + <li data-theme="a"><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="page-titles.html">Page titles</a></li> + <li><a href="page-links.html">Linking pages</a></li> + <li><a href="page-transitions.html">Page transitions</a></li> + <li><a href="page-dialogs.html">Dialogs</a></li> + <li><a href="page-cache.html">Prefetching & caching pages</a></li> + <li><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li><a href="page-scripting.html">Scripting pages</a></li> + <li><a href="phonegap.html">PhoneGap apps</a></li> + <li><a href="touchoverflow.html">touchOverflow feature</a></li> + <li><a href="pages-themes.html">Theming pages</a></li> + + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="c"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-cache.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-cache.html new file mode 100644 index 00000000..c51107ca --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-cache.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Prefetching & caching pages</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>Prefetching & caching pages</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + + + <h2>Prefetching pages</h2> + + <p>Usually, it's a good idea to store your app's pages in several single-page templates instead of one large multi-page template. This minimizes the size of the page's DOM.</p> + + <p>When using single-page templates, you can prefetch pages into the DOM so that they're available instantly when the user visits them. To prefetch a page, add the <code>data-prefetch</code> attribute to a link that points to the page. jQuery Mobile then loads the target page in the background after the primary page has loaded and the <code>pagecreate</code> event has triggered. For example:</p> + +<pre><code> +<a href="prefetchThisPage.html" data-prefetch> ... </a> +</code></pre> + + <p>You can prefetch as many linked pages as you like. Just add <code>data-prefetch</code> to all the links you want to prefetch.</p> + + <p>Alternatively, you can prefetch a page programmatically using <code>$.mobile.loadPage()</code>:</p> + +<pre><code> +$.mobile.loadPage( <var>pageUrl</var>, { showLoadMsg: false } ); +</code></pre> + + <p>Another advantage of prefetching a page is that the user doesn't see the Ajax loading message when visiting the prefetched page. The Ajax loading message only appears if the framework hasn't finished prefetching the page by the time the link is followed.</p> + + <p>Prefetching pages naturally creates additional HTTP requests and uses bandwidth, so it's wise to use this feature only in situations where it's highly likely that the prefetched page will be visited. A common scenario is a photo gallery, where you can prefetch the "previous" and "next" photo pages so that the user can move quickly between photos.</p> + + + <h2>DOM size management</h2> + + <p>For animated page transitions to work, the pages you're transitioning from and to both need to be in the DOM. However, keeping old pages in the DOM quickly fills the browser's memory, and can cause some mobile browsers to slow down or even crash.</p> + + <p>jQuery Mobile therefore has a simple mechanism to keep the DOM tidy. Whenever it loads a page via Ajax, jQuery Mobile flags the page to be removed from the DOM when you navigate away from it later (technically, on the <code>pagehide</code> event). If you revisit a removed page, the browser may be able to retrieve the page's HTML file from its cache. If not, it refetches the file from the server. (In the case of nested list views, jQuery Mobile removes all the pages that make up the nested list once you navigate to a page that's not part of the list.)</p> + + <p>Pages inside a multi-page template aren't affected by this feature at all - jQuery Mobile only removes pages loaded via Ajax.</p> + + + <h2>Caching pages in the DOM</h2> + + <p>If you prefer, you can tell jQuery Mobile to keep previously-visited pages in the DOM instead of removing them. This lets you cache pages so that they're available instantly if the user returns to them.</p> + + <p>To keep all previously-visited pages in the DOM, set the <code>domCache</code> option on the page plugin to <code>true</code>, like this:</p> + +<pre><code> +$.mobile.page.prototype.options.domCache = true; +</code></pre> + + <p>Alternatively, to cache just a particular page, you can add the <code>data-dom-cache="true"</code> attribute to the page's container:</p> + +<pre><code> +<div data-role="page" id="cacheMe" data-dom-cache="true"> +</code></pre> + + <p>You can also cache a page programmatically like this:</p> + +<pre><code> +<var>pageContainerElement</var>.page({ domCache: true }); +</code></pre> + + <p>The drawback of DOM caching is that the DOM can get very large, resulting in slowdowns and memory issues on some devices. If you enable DOM caching, take care to manage the DOM yourself and test thoroughly on a range of devices.</p> + + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="page-titles.html">Page titles</a></li> + <li><a href="page-links.html">Linking pages</a></li> + <li><a href="page-transitions.html">Page transitions</a></li> + <li><a href="page-dialogs.html">Dialogs</a></li> + <li data-theme="a"><a href="page-cache.html">Prefetching & caching pages</a></li> + <li><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li><a href="page-scripting.html">Scripting pages</a></li> + <li><a href="phonegap.html">PhoneGap apps</a></li> + <li><a href="touchoverflow.html">touchOverflow feature</a></li> + <li><a href="pages-themes.html">Theming pages</a></li> + + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="c"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-customtransitions.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-customtransitions.html new file mode 100644 index 00000000..6e6df977 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-customtransitions.html @@ -0,0 +1,297 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Transitions</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>Transitions</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + + <h2>Creating custom CSS-based transitions</h2> + + + <p>To create a custom CSS transition, select a class name that corresponds to the name of your transition, for example "slide", and then define your "in" and "out" CSS rules to take advantage of transitions or animation keyframes:</p> + + <pre><code> + .slide.in { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -webkit-animation-name: slideinfromright; + -moz-animation-name: slideinfromright; + } + + .slide.out { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + -webkit-animation-name: slideouttoleft; + -moz-animation-name: slideouttoleft; + } + + @-webkit-keyframes slideinfromright { + from { -webkit-transform: translateX(100%); } + to { -webkit-transform: translateX(0); } + } + + @-webkit-keyframes slideouttoleft { + from { -webkit-transform: translateX(0); } + to { -webkit-transform: translateX(-100%); } + } + + @-moz-keyframes slideinfromright { + from { -moz-transform: translateX(100%); } + to { -moz-transform: translateX(0); } + } + + @-moz-keyframes slideouttoleft { + from { -moz-transform: translateX(0); } + to { -moz-transform: translateX(-100%); } + } + + </code></pre> + + <p>During a CSS-based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. It then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above. As of jQuery Mobile version 1.1, animation class additions are queued, rather than simultaneous, producing an out-then-in sequence, which is friendlier for mobile rendering than our previous simultaneous transition sequence.</p> + + <p>If your transition supports a reverse direction, you need to create CSS rules that use the <code>reverse</code> class in addition to the transition class name and the "in" and "out" classes:</p> + + <pre><code> + .slide.in.reverse { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -webkit-animation-name: slideinfromleft; + -moz-animation-name: slideinfromleft; + } + + .slide.out.reverse { + -webkit-transform: translateX(100%); + -moz-transform: translateX(100%); + -webkit-animation-name: slideouttoright; + -moz-animation-name: slideouttoright; + } + + @-webkit-keyframes slideinfromleft { + from { -webkit-transform: translateX(-100%); } + to { -webkit-transform: translateX(0); } + } + + @-webkit-keyframes slideouttoright { + from { -webkit-transform: translateX(0); } + to { -webkit-transform: translateX(100%); } + } + + @-moz-keyframes slideinfromleft { + from { -moz-transform: translateX(-100%); } + to { -moz-transform: translateX(0); } + } + + @-moz-keyframes slideouttoright { + from { -moz-transform: translateX(0); } + to { -moz-transform: translateX(100%); } + } + + </code></pre> + + <p>After the CSS rules are in place, you simply specify the name of your transition within the @data-transition attribute of a navigation link:</p> + + <pre><code><a href="#page2" data-transition="slide">Page 2</a> + </code></pre> + + <p>When the user clicks on the navigation link, jQuery Mobile will invoke your transition when it navigates to the page mentioned within the link.</p> + + <p>In case you were wondering why none of the CSS rules above specified any easing or duration, it's because the CSS for jQuery Mobile defines the default easing and duration in the following rules:</p> + + <pre><code> + .in { + -webkit-animation-timing-function: ease-out; + -webkit-animation-duration: 350ms; + -moz-animation-timing-function: ease-out; + -moz-animation-duration: 350ms; + } + + .out { + -webkit-animation-timing-function: ease-in; + -webkit-animation-duration: 225ms; + -moz-animation-timing-function: ease-in; + -moz-animation-duration: 225; + } + </code></pre> + + <p>If you need to specify a different easing or duration, simply add the appropriate CSS3 property to your custom page transition rules.</p> + + + <h2>Creating custom JavaScript-based transitions</h2> + + <p>When a user clicks on a link within a page, jQuery Mobile checks if the link specifies a <code>@data-transition</code> attribute. The value of this attribute is the name of the transition to use when displaying the page referred to by the link. If there is no <code>@data-transition</code> attribute, the transition name specified by the configuration option <code>$.mobile.defaultPageTransition</code> is used for pages, and <code>$.mobile.defaultDialogTransition</code> is used for dialogs.</p> + + <p>After the new page is loaded, the <code>$.mobile.transitionHandlers</code> dictionary is used to see if any transition handler function is registered for the given transition name. If a handler is found, that handler is invoked to start and manage the transition. If no handler is found the handler specified by the configuration option <code>$.mobile.defaultTransitionHandler</code> is invoked.</p> + + <p>By default, the <code>$.mobile.transitionHandlers</code> dictionary is only populated with a single handler entry called "default". This handler plays a dual purpose of either executing a "none" transition, which removes the <code>"ui-page-active"</code> class from the page we are transitioning "from", and places it on the page we are transitioning "to", or a Queued CSS3 Animated Transition, such as the one explained above. If the transition is "none", it will be instantaneous; no animation, no fanfare.</p> + + <p>The <code>$.mobile.defaultTransitionHandler</code> points to a handler function that assumes the name is a CSS class name, and implements the "Pure CSS3 Based Transitions" section above.</p> + + <p>The default transition handler is available on the $.mobile namespace:</p> + + <pre><code> +$.mobile.transitionHandlers[ "default" ]; + </code></pre> + + <h3>Transition Handlers</h3> + + <p>A transition handler is a function with the following call signature:</p> + + <pre><code> +function myTransitionHandler(name, reverse, $to, $from) +{ + var deferred = new $.Deferred(); + + // Perform any actions or set-up necessary to kick-off + // your transition here. The only requirement is that + // whenever the transition completes, your code calls + // deferred.resolve(name, reverse, $to, $from). + + // Return a promise. + return deferred.promise(); +} + </code></pre> + + <p>Your handler must create a Deferred object and return a promise to the caller. The promise is used to communicate to the caller when your transition is actually complete. It is up to you to call <code>deferred.resolve()</code> at the correct time. If you are new to Deferred objects, you can find documentation <a href="http://api.jquery.com/category/deferred-object/" rel="nofollow">here</a>.</p> + + <h3>Registering and Invoking Your Transition Handler</h3> + + <p>Once you have created a transition handler function, you need to tell jQuery Mobile about it. To do this, simply add your handler to the <code>$.mobile.transitionHandlers</code> dictionary. Remember, the key used should be the name of your transition. This name is also the same name that will be used within the <code>@data-transition</code> attribute of any navigation links.</p> + + <pre><code> +// Define your transition handler: + +function myTransitionHandler(name, reverse, $to, $from) +{ + var deferred = new $.Deferred(); + + // Perform any actions or set-up necessary to kick-off + // your transition here. The only requirement is that + // whenever the transition completes, your code calls + // deferred.resolve(name, reverse, $to, $from). + + // Return a promise. + return deferred.promise(); +} + +// Register it with jQuery Mobile: + +$.mobile.transitionHandlers["myTransition"] = myTransitionHandler; + </code></pre> + + <p>Once you've registered your handler, you can invoke your transition by placing a <code>data-transition</code> attribute on a link:</p> + + <pre><code><a href="#page2" data-transition="myTransition">Page 2</a> + </code></pre> + + <p>When the user clicks the link above, your transition handler will be invoked after the page is loaded and it is ready to be shown.</p> + + <h3>Overriding a CSS Transition With Your Own Handler</h3> + + <p>As previously mentioned the default transition handler assumes that any transition name other than "none" is a CSS class to be placed on the "from" and "to" elements to kick off a CSS3 animation. If you would like to override one of these built-in CSS transitions, you simply register your own handler with the same name as the CSS page transition you want to override. So for example, if I wanted to override the built-in "slide" CSS transition with my own JavaScript based transition, I would simply do the following:</p> + + <pre><code>// Define your transition handler: + +function myTransitionHandler(name, reverse, $to, $from) +{ + var deferred = new $.Deferred(); + + // Perform any actions or set-up necessary to kick-off + // your transition here. The only requirement is that + // whenever the transition completes, your code calls + // deferred.resolve(name, reverse, $to, $from). + + // Return a promise. + return deferred.promise(); +} + +// Register it with jQuery Mobile: + +$.mobile.transitionHandlers["slide"] = myTransitionHandler; + </code></pre> + + <p>Once you do this, anytime the "slide" transition is invoked, your handler, instead of the default one, will be called to perform the transition.</p> + + <h3>Overriding the Default Transition Handler</h3> + + <p>The <code>$.mobile.css3TransitionHandler</code> function is the default transition handler that gets invoked when a transition name is used and not found in the <code>$.mobile.transitionHandlers</code> dictionary. If you want to install your own custom default handler, you simply set the <code>$.mobile.defaultTransitionHandler</code> to your handler:</p> + + <pre><code>// Define your default transition handler: + +function myTransitionHandler(name, reverse, $to, $from) +{ + var deferred = new $.Deferred(); + + // Perform any actions or set-up necessary to kick-off + // your transition here. The only requirement is that + // whenever the transition completes, your code calls + // deferred.resolve(name, reverse, $to, $from). + + // Return a promise. + return deferred.promise(); +} + +$.mobile.defaultTransitionHandler = myTransitionHandler; + </code></pre> + + <p>Once you do this, your handler will be invoked any time a transition name is used but not found within the <code>$.mobile.transitionHandlers</code> dictionary.</p> + + <h2>A model for Custom transition handler development</h2> + <p>Transition handlers involve a number of critical operations, such as hiding any existing page, showing the new page, scrolling either to the top or a remembered scroll position on that new page, setting focus on the new page, and any animation and timing sequences you'd like to add. During development, we would recommend using <code>jquery.mobile.transitions.js</code> as a coding reference.</p> + + <h2>Transitions and scroll position</h2> + <p>One of the key things jQuery Mobile does is store your scroll position before starting a transition so it can restore you to the same place once you return to the page when hitting the Back button or closing a dialog. Here are the same buttons from the top to test the scrolling logic.</p> + + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="page-titles.html">Page titles</a></li> + <li><a href="page-links.html">Linking pages</a></li> + <li><a href="page-transitions.html">Page transitions</a></li> + <li><a href="page-dialogs.html">Dialogs</a></li> + <li><a href="page-cache.html">Prefetching & caching pages</a></li> + <li><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li><a href="page-scripting.html">Scripting pages</a></li> + <li><a href="phonegap.html">PhoneGap apps</a></li> + <li><a href="touchoverflow.html">touchOverflow feature</a></li> + <li><a href="pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + +</body> +</html> + diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-dialogs.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-dialogs.html new file mode 100644 index 00000000..bf9b8ad1 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-dialogs.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Dialogs</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>Dialogs</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content" class="ui-body"> + <div class="content-primary"> + <h2>Creating dialogs</h2> + <p>Any page can be presented as a modal dialog by adding the <code>data-rel="dialog"</code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.</p> + + <p> + <code> + <a href="foo.html" data-rel="dialog">Open dialog</a> + </code> + </p> + + <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a> + + + + <h2>Transitions</h2> + <p>By default, the dialog will open with a 'pop' transition. Like all pages, you can specify any page transition you want on the dialog by adding the <code>data-transition</code> attribute to the link. To make it feel more dialog-like, we recommend specifying a transition of "pop", "slideup" or "flip".</p> + +<code> +<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a> +</code> + + <div> + <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">data-transition="pop"</a> + <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">data-transition="slidedown"</a> + <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="flip">data-transition="flip"</a> + </div> + + + <h2>Closing dialogs</h2> + <p>When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the <code>data-rel="back"</code> attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.</p> + <p>For JavaScript-generated links, you can simply set the href attribute to "#" and use the <code>data-rel="back"</code> attribute. You can also call the dialog's <code>close()</code> method to programmatically close dialogs, for example: <code>$('.ui-dialog').dialog('close')</code>. </p> + + <h3>Setting the close button text</h3> + <p>Just like the page plugin, you can set a dialog's close button text through an option or data attribute. The option can be configured for all dialogs by binding to the <code>mobileinit</code> event and setting the <code>$.mobile.dialog.prototype.options.closeBtnText</code> property to a string of your choosing, or you can place the data attribute <code>data-close-btn-text</code> to configure the text from your markup.</p> + + <h2>History & Back button behavior</h2> + <p>Since dialogs are typically used to support actions within a page, the framework does not include dialogs in the hash state history tracking. This means that dialogs will not appear in your browsing history chronology when the Back button is clicked. For example, if you are on a page, click a link to open a dialog, close the dialog, then navigate to another page, if you were to click the browser's Back button at that point you will navigate back to the first page, not the dialog.</p> + + <h2>Styling & theming</h2> + <p>Dialogs can be styled with different theme swatches, just like any page by adding <code>data-theme</code> attributes to the header, content, or footer containers. Here is an example of a different dialog design:</p> + <a href="dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">An alternate color scheme</a> + + <p>Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch A content color by default, but the <code>data-overlay-theme</code> attribute can be added to the page wrapper to set the overlay to any swatch letter. Here is an example of a dialog with the overlay set to swatch e:</p> + <a href="dialog-overlay.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Custom overlay swatch</a> + + + <p>Dialogs can also be used more like a control sheet to offer multiple buttons if you simply remove the top margin from the dialog's inner container element. For example, if your dialog page had a class of <code>my-dialog</code>, you could add this CSS to pin that dialog to the top: <code>.ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }</code>, or you could just apply that style to all dialogs with <code>.ui-dialog .ui-dialog-contain { margin-top: 0 }</code>.</p> + <a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">Share photos...</a> + + <h2>Dialog width and margins</h2> + <p>For the sake of readability, dialogs have a default <code>max-width</code> of 500 pixels (plus 15px padding on each side). There is also a 10% top <code>margin</code> to give dialogs larger top margin on larger screens, but collapse to a small margin on smartphones. To override these styles, add the following CSS override rule to your stylesheet and tweak as needed:</p> + +<code><pre> +.ui-dialog .ui-header, +.ui-dialog .ui-content, +.ui-dialog .ui-footer { +<strong> max-width: 500px; + margin: 10% auto 15px auto; </strong> +} +</pre></code> + + + + + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="page-titles.html">Page titles</a></li> + <li><a href="page-links.html">Linking pages</a></li> + <li><a href="page-transitions.html">Page transitions</a></li> + <li data-theme="a"><a href="page-dialogs.html">Dialogs</a></li> + <li><a href="page-cache.html">Prefetching & caching pages</a></li> + <li><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li><a href="page-scripting.html">Scripting pages</a></li> + <li><a href="phonegap.html">PhoneGap apps</a></li> + <li><a href="touchoverflow.html">touchOverflow feature</a></li> + <li><a href="pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + +</div><!-- /content --> + +<div data-role="footer" class="footer-docs" data-theme="c"> + <p>© 2011-12 The jQuery Foundation</p> +</div> + +</div><!-- /page --> + +</body> +</html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-dynamic.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-dynamic.html new file mode 100644 index 00000000..deac20a6 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-dynamic.html @@ -0,0 +1,300 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Dynamically Injecting Pages</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>Dynamically Injecting Pages</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + <h2>jQuery Mobile and Dynamic Page Generation</h2> + <p>jQuery Mobile allows pages to be pulled into the DOM dynamically via its default click hijacking behavior, or through manual calls to <code>$.mobile.changePage()</code>. This is great for applications that generate HTML pages/fragments on the server-side, but there are sometimes cases where an application needs to dynamically generate page content on the client-side from JSON or some other format. This may be necessary for bandwidth/performance reasons, or because it is the data format of choice for the server they are interacting with.</p> + <p>For applications that need to generate page markup on the client-side, it's important to know about the notifications that are triggered during a <code>$.mobile.changePage()</code> call because they can be used as hooks into the navigation system that will allow you to generate your content at the appropriate time.</p> + <p>A call to <code>changePage()</code> will usually trigger the following event notifications:</p> + <ul> + <li><code>pagebeforechange</code> + <ul> + <li>Fired off before any page loading or transition.</li> + <li>NOTE: This event was formerly known as "beforechangepage".</li> + </ul> + </li> + <li><code>pagechange</code> + <ul> + <li>Fired off after all page loading and transitions.</li> + <li>NOTE: this event was formerly known as "changepage".</li> + </ul> + </li> + <li><code>pagechangefailed</code> + <ul> + <li>Fired off if an error has occurred while attempting to dynamically load a new page. </li> + </ul> + </li> + </ul> + <p>These notifications are triggered on the parent container element (<code>$.mobile.pageContainer</code>) of pages, and will bubble all the way up to the document element and window.</p> +<p>For applications wishing to inject pages, or radically modify the content of an existing page, based on some non-HTML data, such as JSON or in-memory JS object, the <code>pagebeforechange</code> event is very useful since it gives you a hook for analyzing the URL or page element the application is being asked to load or switch to, and short-circuit the default <code>changePage()</code> behavior by simply calling <code>preventDefault()</code> on the <code>pagebeforechange</code> event.</p> +<p>To illustrate this technique, take a look at this <a href="dynamic-samples/sample-reuse-page.html" rel="external">working sample</a>. In this sample, the main page starts off with a list of categories that the user can navigate into. The actual items in each category are stored in a JavaScript object in memory, for illustrative purposes, but the data can really come from anywhere.</p> +<pre><code> +var categoryData = { + animals: { + name: "Animals", + description: "All your favorites from aardvarks to zebras.", + items: [ + { + name: "Pets" + }, + { + name: "Farm Animals" + }, + { + name: "Wild Animals" + } + ] + }, + colors: { + name: "Colors", + description: "Fresh colors from the magic rainbow.", + items: [ + { + name: "Blue" + }, + { + name: "Green" + }, + { + name: "Orange" + }, + { + name: "Purple" + }, + { + name: "Red" + }, + { + name: "Yellow" + }, + { + name: "Violet" + } + ] + }, + vehicles: { + name: "Vehicles", + description: "Everything from cars to planes.", + items: [ + { + name: "Cars" + }, + { + name: "Planes" + }, + { + name: "Construction" + } + ] + } +}; +</code></pre> +<p>The application uses links with urls that contain a hash that tells the application what category items to display:</p> +<pre> +<code> + <h2>Select a Category Below:</h2> + <ul data-role="listview" data-inset="true"> + <li><a href="#category-items?category=animals">Animals</a></li> + <li><a href="#category-items?category=colors">Colors</a></li> + <li><a href="#category-items?category=vehicles">Vehicles</a></li> + </ul> +</code> +</pre> +<p>Internally, when the user clicks on one of these links, the application intercepts the internal <code>$.mobile.changePage()</code> call that is invoked by the frameworks' default link hijacking behavior. It then analyzes the URL for the page about to be loaded, and then decides whether or not it should handle the loading itself, or to let the normal <code>changePage()</code> code handle things.</p> +<p>The application was able to insert itself into the <code>changePage()</code> flow by binding to the <code>pagebeforechange</code> event at the document level:</p> +<pre> +<code> +// Listen for any attempts to call changePage(). +$(document).bind( "pagebeforechange", function( e, data ) { + + // We only want to handle changePage() calls where the caller is + // asking us to load a page by URL. + if ( typeof data.toPage === "string" ) { + + // We are being asked to load a page by URL, but we only + // want to handle URLs that request the data for a specific + // category. + var u = $.mobile.path.parseUrl( data.toPage ), + re = /^#category-item/; + + if ( u.hash.search(re) !== -1 ) { + + // We're being asked to display the items for a specific category. + // Call our internal method that builds the content for the category + // on the fly based on our in-memory category data structure. + showCategory( u, data.options ); + + // Make sure to tell changePage() we've handled this call so it doesn't + // have to do anything. + e.preventDefault(); + } + } +}); +</code> +</pre> +<p>So why listen at the document level? In short, because of deep-linking. We need our binding to be active before the jQuery Mobile framework initializes and decides how to process the initial URL that invoked the application.</p> +<p>When the callback for the <code>pagebeforechange</code> binding is invoked, the 2nd argument to the callback will be a data object that contains the arguments that were passed to the initial <code>$.mobile.changePage()</code> call. The properties of this object are as follows:</p> +<ul> + <li><code>toPage</code> + <ul> + <li>Can be either a jQuery collection object containing the page to be transitioned to, <b>OR</b> a URL reference for a page to be loaded/transitioned to.</li> + </ul> + </li> + <li>options + <ul> + <li>Object containing the options that were passed in by the caller of the <code>$.mobile.changePage()</code> function.</li> + <li>A list of the options can be found <a href="../api/methods.html">here</a>.</li> + </ul> + </li> + </ul> +<p>For our sample application, we are only interested in <code>changePage()</code> calls where URLs are initially passed in, so the first thing our callback does is check the type for the <code>toPage</code>. Next, with the help of some URL parsing utilities, it checks to make sure if the URL contains a hash that we are interested in handling ourselves. If so, it then calls an application function called <code>showCategory()</code> which will dynamically create the content for the category specified by the URL hash, and then it calls <code>preventDefault()</code> on the event.</p> +<p>Calling <code>preventDefault()</code> on a <code>pagebeforechange</code> event causes the originating <code>$.mobile.changePage()</code> call to exit without performing any work. Calling the <code>preventDefault()</code> method on the event is the equivalent of telling jQuery Mobile that you have handled the <code>changePage()</code> request yourself.</p> +<p>If <code>preventDefault()</code> is not called, <code>changePage()</code> will continue on processing as it normally does. One thing to point out about the data object that is passed into our callback, is that any changes you make to the <code>toPage</code> property, or options properties, will affect <code>changePage()</code> processing if <code>preventDefault()</code> is not called. So for example, if we wanted to redirect or map a specific URL to another internal/external page, our callback could simply set the <code>data.toPage</code> property in the callback to the URL or DOM element of the page to redirect to. Likewise, we could set, or un-set any option from within our callback, and <code>changePage()</code> would use the new settings.</p> +<p>So now that we know how to intercept <code>changePage()</code> calls, let's take a closer look at how this sample actually generates the markup for a page. Our example actually uses, or we should say, re-uses the same page to display each of the categories. Each time one of our special links is clicked, the function <code>showCategory()</code> gets invoked:</p> +<pre><code> +// Load the data for a specific category, based on +// the URL passed in. Generate markup for the items in the +// category, inject it into an embedded page, and then make +// that page the current active page. +function showCategory( urlObj, options ) +{ + var categoryName = urlObj.hash.replace( /.*category=/, "" ), + + // Get the object that represents the category we + // are interested in. Note, that at this point we could + // instead fire off an ajax request to fetch the data, but + // for the purposes of this sample, it's already in memory. + category = categoryData[ categoryName ], + + // The pages we use to display our content are already in + // the DOM. The id of the page we are going to write our + // content into is specified in the hash before the '?'. + pageSelector = urlObj.hash.replace( /\?.*$/, "" ); + + if ( category ) { + // Get the page we are going to dump our content into. + var $page = $( pageSelector ), + + // Get the header for the page. + $header = $page.children( ":jqmData(role=header)" ), + + // Get the content area element for the page. + $content = $page.children( ":jqmData(role=content)" ), + + // The markup we are going to inject into the content + // area of the page. + markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>", + + // The array of items for this category. + cItems = category.items, + + // The number of items in the category. + numItems = cItems.length; + + // Generate a list item for each item in the category + // and add it to our markup. + for ( var i = 0; i < numItems; i++ ) { + markup += "<li>" + cItems[i].name + "</li>"; + } + markup += "</ul>"; + + // Find the h1 element in our header and inject the name of + // the category into it. + $header.find( "h1" ).html( category.name ); + + // Inject the category items markup into the content element. + $content.html( markup ); + + // Pages are lazily enhanced. We call page() on the page + // element to make sure it is always enhanced before we + // attempt to enhance the listview markup we just injected. + // Subsequent calls to page() are ignored since a page/widget + // can only be enhanced once. + $page.page(); + + // Enhance the listview we just injected. + $content.find( ":jqmData(role=listview)" ).listview(); + + // We don't want the data-url of the page we just modified + // to be the url that shows up in the browser's location field, + // so set the dataUrl option to the URL for the category + // we just loaded. + options.dataUrl = urlObj.href; + + // Now call changePage() and tell it to switch to + // the page we just modified. + $.mobile.changePage( $page, options ); + } +} +</code></pre> +<p>In our sample app, the hash of the URL we handle contains 2 parts:</p> +<pre><code> +#category-items?category=vehicles +</code></pre> +<p>The first part, before the '?' is actually the id of the page to write content into, the part after the '?' is info the app uses to figure out what data it should use when generating the markup for the page. The first thing <code>showCategory()</code> does is deconstruct this hash to extract out the id of the page to write content into, and the name of the category it should use to get the correct set of data from our in-memory JavaScript category object. After it figures out what category data to use, it then generates the markup for the category, and then injects it into the header and content area of the page, wiping out any other markup that previously existed in those elements.</p> +<p>After it injects the markup, it then calls the appropriate jQuery Mobile widget calls to enhance the list markup it just injected. This is what turns the normal list markup into a fully styled listview with all its behaviors.</p> +<p>Once that's done, it then calls <code>$.mobile.changePage()</code>, passing it the DOM element of the page we just modified, to tell the framework that it wants to show that page.</p> +<p>Now an interesting problem here is that jQuery Mobile typically updates the browser's location hash with the URL associated with the page it is showing. Because we are re-using the same page for each category, this wouldn't be ideal, because the URL for that page has no specific category info associated with it. To get around this problem, <code>showCategory()</code> simply sets the <code>dataUrl</code> property on the options object it passes into <code>changePage()</code> to tell it to display our original URL instead.</p> +<p>That's the sample in a nutshell. It should be noted that this particular sample and its usage is not a very good example of an app that degrades gracefully when JavaScript is turned off. That means it probably won't work very well on C-Grade browsers. We will be posting other examples that demonstrate how to degrade gracefully in the future. Check this <a href="http://jquerymobile.com/test/docs/pages/dynamic-samples/">page</a> for updates.</p> + </div> + <!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="page-titles.html">Page titles</a></li> + <li><a href="page-links.html">Linking pages</a></li> + <li><a href="page-transitions.html">Page transitions</a></li> + <li><a href="page-dialogs.html">Dialogs</a></li> + <li><a href="page-cache.html">Prefetching & caching pages</a></li> + <li><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li data-theme="a"><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li><a href="page-scripting.html">Scripting pages</a></li> + <li><a href="phonegap.html">PhoneGap apps</a></li> + <li><a href="touchoverflow.html">touchOverflow feature</a></li> + <li><a href="pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="c"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-links.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-links.html new file mode 100644 index 00000000..a5f41b36 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-links.html @@ -0,0 +1,147 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Linking Pages</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>Linking pages</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + <h2>Linking pages</h2> + + <p>jQuery Mobile is designed to work with simple page linking conventions. Essentially, you can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible. When Ajax isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal http request is used instead.</p> + + <p>The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p> + + <h2>Default link behavior: Ajax</h2> + + <p>To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's <code>href</code> to formulate an Ajax request (Hijax) and displays the loading spinner. All this happens automatically by jQuery Mobile.</p> + + <p>If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.</p> + + <p>If the Ajax request fails, the framework will display a small error message overlay (styled in the "e" swatch) that disappears after a brief time so this doesn't break the navigation flow. View an <a href="notapage.html">example of the error message</a>.</p> + + <p><strong>Note:</strong> You cannot link <strong>to</strong> a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a <a href="https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget" rel="external">subpage plugin</a> that makes it possible to load in multi-page documents.</p> + + +<h2>Linking without Ajax</h2> + + <p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-ajax="false"</code> or <code>target</code> attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (<code>rel="external"</code> and <code>data-ajax="false"</code>) have the same effect, but a different semantic meaning: <code>rel="external"</code> should be used when linking to another site or domain, while <code>data-ajax="false"</code> is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.</p> + <p>In version 1.1, we've added support for using <code>data-ajax="false"</code> on a parent container which allows you to excluded a large number of links from the Ajax navigation system. This avoids the need to add this attribute to every link in a container.</p> + <p>Note: When building a jQuery Mobile application where the Ajax navigation system is disabled globally or frequently disabled on individual links, we recommend disabling the <code>$.mobile.pushStateEnabled</code> global <a href="../api/globalconfig.html">configuration option</a> to avoid inconsistent navigation behavior in some browsers.</p> + + + + <h2>Linking within a multi-page document</h2> + + <p>A single HTML document can contain one or many 'page' containers simply by stacking multiple divs with a <code> data-role</code> of <code>"page"</code>. This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.</p> + + <p>If a link in a multi-page document points to an anchor (<code>#foo</code>), the framework will look for a page wrapper with that ID (<code>id="foo"</code>). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking. </p> + + <p>It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a <code>rel="external"</code> or <code>data-ajax="false"</code> to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (<code>#</code>) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.</p> + + <p>For example, a link to a page containing multiple internal pages would look like this:</p> + + <code><a href="multipage.html" rel="external">Multi-page link</a></code> + + + + <h2>"Back" button links</h2> + <p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default <code>href</code>. This is particularly useful when generating "back" buttons with JavaScript, such as a button to close a dialog. + When using this feature in your source markup, although browsers that support this feature will not use the specified <code>href</code> attribute, <strong>be sure to still provide a meaningful value that actually points to the URL of the referring page to allow the feature to work for users in C-Grade browsers</strong>. If users can reach this page from more than one referring pages, specify a sensible <code>href</code> so that the navigation remains logical for all users. + Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute instead. + Note: <code>data-direction="reverse"</code> is meant to simply run the backwards version of the transition that will run on that page change, while <code>data-rel="back"</code> makes the link functionally equivalent to the browser's back button and all the standard back button logic applies. Adding <code>data-direction="reverse"</code> to a link with <code>data-rel="back"</code> <b>will not</b> reverse the reversed page transition and produce the "normal" version of the transition. + </p> + + + <h2>Redirects and linking to directories</h2> + + <p>When linking to directory indexes (such as href="typesofcats/" instead of href="typesofcats/index.html"), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced.</p> + + <p>However, you can work around this issue by returning your page div with a <code>data-url</code> attribute already specified. When you do this, jQuery Mobile will use that attribute's value for updating the URL, instead of the url used to request that page. This also allows you to return urls that change as the result of a redirect, for example, you might post a form to "/login.html" but return a page from the url "/account" after a successful submission. This tool allows you to take control of the jQuery Mobile history stack in these situations. Here's an example:</p> + + <p>The following link points to "docs-links-urltest/index.html": <a href="docs-links-urltest/index.html">Test Link</a> which is a directory with an index page. The return page will update the hash as "/docs/pages/docs-links-urltest/" with a trailing slash. This is done via the data-url attribute in that page's source. Keep in mind that the value will replace the entire hash, and it is up to you to replace it with a URL that actually resolves to the correct page when requested via refresh or deep link.</p> + + <p>Learn more about the technical details of the navigation model and <a href="page-navmodel.html">Ajax, hashes and history</a> in jQuery mobile.</p> + + + + <h2>Link examples</h2> + <p>All standard HTML link types are supported in jQuery Mobile in addition to the types outlined above. Here is a sampler of many common link types:</p> + + <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d"> + <li data-role="list-divider">Links that will be Ajax-loaded with page transitions</li> + <li><a href="../../index.html">Link in the same domain</a></li> + <li><a href="../pages/dialog.html" data-rel="dialog">Dialog link: data-rel="dialog" (not tracked in history)</a></li> + <li data-role="list-divider">Links that will refresh the page</li> + <li><a href="http://www.jquery.com">External domain</a></li> + <li><a href="../../index.html" rel="external">Link with rel="external"</a></li> + <li><a href="index.html" data-ajax="false">link with [data-ajax="false"]</a></li> + <li><a href="../../index.html" target="foo">Link with target="foo"</a></li> + <li data-role="list-divider">Email links</li> + <li><a href="mailto:jdoe@foo.com">Basic email: mailto:jdoe@foo.com</a></li> + <li><a href="mailto:jdoe@foo.com?cc=bill@bar.com&bcc=mark@abc.com&subject=Happy%20Birthday&body=Best%20wishes!">Mailto with a cc:, bcc:, subject and body pre-filled</a></li> + + <li data-role="list-divider">Phone links</li> + <li><a href="tel:15555555555">Phone: tel:15555555555</a></li> + <li data-role="list-divider">Other</li> + <li><a href="#">A href="#" will return false</a></li> + </ul> + + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="page-titles.html">Page titles</a></li> + <li data-theme="a"><a href="page-links.html">Linking pages</a></li> + <li><a href="page-transitions.html">Page transitions</a></li> + <li><a href="page-dialogs.html">Dialogs</a></li> + <li><a href="page-cache.html">Prefetching & caching pages</a></li> + <li><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li><a href="page-scripting.html">Scripting pages</a></li> + <li><a href="phonegap.html">PhoneGap apps</a></li> + <li><a href="touchoverflow.html">touchOverflow feature</a></li> + <li><a href="pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="c"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-navmodel.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-navmodel.html new file mode 100644 index 00000000..d267f826 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-navmodel.html @@ -0,0 +1,182 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Ajax, hashes & history</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>Ajax, hashes & history</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + <h2>jQuery Mobile's navigation model</h2> + + <p>A "page" in jQuery Mobile consists of an element (usually a <code>div</code>) with a <code> data-role</code> attribute set to <code>"page"</code>, which generally contains <code>div</code> elements with roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>, each containing common markup, forms, and custom jQuery Mobile widgets.</p> + + <p>The basic workflow with page loading is as follows: first, a page is requested with a normal HTTP request, and subsequent "pages" are then requested and injected into that page's DOM. Because of this, the DOM may have a number of "pages" in it at a time, each of which can be re-visited by linking to its <code>data-url</code> attribute.</p> + + <p>When a url is initially requested, there may be one or more "pages" in the response, and only the first one will be shown. The advantage of storing more than one "page" is that it allows you to pre-fetch static pages that are likely to be visited.</p> + + <h2>Hash and Ajax driven page navigation</h2> + + <p>By default all navigation within jQuery Mobile is based on changes and updates to <code>location.hash</code>. Whenever possible, page changes will use a smooth transition between the current "page" and the next, whether it is either already present in the DOM, or is automatically loaded via Ajax.</p> + + <p>Hash values created by jQuery Mobile are normalized as full paths relative to the URL of the first "real" page that was loaded. The hash is always maintained as a valid URL, so any "page" in jQuery mobile can be bookmarked or referenced in a link. To retrieve a non-hash-based URL, simply remove the # from the address and refresh the page.</p> + + <p>In general, hash changes are created whenever a link is clicked in jQuery mobile. When a link is clicked, jQuery mobile will make sure that the link is referencing a local URL, and if so, it'll prevent the link's default click behavior from occurring and request the referenced url via Ajax instead. When the page returns successfully, it will set the <code>location.hash</code> to the new page's relative url. </p> + + <p>Hash changes that occur independently of a click, such as when a user clicks the back button, are handled through the <code>hashchange</code> event, which is bound to the window object using Ben Alman's <code>hashchange</code> special event plugin (included in jQuery Mobile). When a hash change occurs (and also when the first page loads), the <code>hashchange</code> event handler will send the <code>location.hash</code> to the <code>$.mobile.changePage()</code> function, which in turn either loads or reveals the referenced page.</p> + + + <p>Once the referenced page is present in the DOM, the <code>$.mobile.changePage()</code> function applies a transition between the current active page and the new page. Page transitions happen through adding and removing classes that apply CSS animations. For example, in a slide-left transition, the exiting page is given the classes <code>"slideleft"</code> and <code>"out"</code>, and the entering page is given the classes <code>"slideleft"</code> and <code>"in"</code>, as well as a class of <code>"ui-page-active"</code> to mark it as the new "active" page being viewed. When the animation is complete, the <code>"in"</code> and <code>"out"</code> classes are removed, and the exited page loses its <code>"ui-page-active"</code> class.</p> + + <h2>pushState plugin</h2> + + <p>There is an optional feature that converts the longer, hash-based URLs mentioned in the previous section into the full document path which is cleaner and makes the Ajax tracking transparent in the URL structure. This is built as an enhancement on top of the hash-based URL system for Ajax links. Note that despite the name, this feature technically converts hash-based urls by using <code>history.replaceState</code> (not <code>history.pushState</code>) in the current release because this works more reliably across our target platforms. For browsers that do not support <code>history.replaceState</code>, or if this feature is disabled, hash-based URLs will be used instead. </p> + + <p>Since the plugin initializes when the DOM is fully loaded you can enable and disable it manually by setting <code>$.mobile.pushStateEnabled</code> global <a href="../api/globalconfig.html">configuration option</a> to <code>false</code> anytime before document ready.</p> + + <div class="ui-body ui-body-e"> + <h4 style="margin:.5em 0">Important: rel="external" and $.mobile.ajaxEnabled=false</h4> + <p>Slightly different implementations of the replaceState API in various browsers can cause odd behavior in specific scenarios. For example, some browser implementations (including desktop browsers) implement the <code>popstate</code> event differently when linking externally and moving back to a page onto which state has already been pushed/replaced. When building a jQuery Mobile application where the ajax navigation is being explicitly disabled, either through the frequent use of <code>rel="external"</code> on links or by disabling Ajax navigation completely via the <code>$.mobile.ajaxEnabled=false</code>, we recommend disabling the pushState feature to fall back to the hash based navigation for more consistent behavior.</p> + </div> + + <h2>changePage</h2> + + <p>Within the framework, page changes - both for pages already in the DOM and for pages that need to be loaded via Ajax - use the <code>$.mobile.changePage()</code> function. <code>$.mobile.changePage()</code> contains all of the logic for finding pages to transition to and from, and how to handle various response conditions such as a page not found. <code>$.mobile.changePage()</code> can be called externally and accepts the following arguments (to, transition, back, changeHash). The <code>to</code> argument can accept either a string (such as a file url or local element's ID), an array (in which the first array item is any local page you'd like to transition from, and the second array item is the <code>to</code> page), or an object (with expected properties: url, type ("get" or "post"), and data (for serialized parameters)), the latter of which is useful for loading pages that expect form data. The <code>transition</code> argument accepts a string representing a named transition, such as "slide". The <code>back</code> argument accepts a boolean representing whether the transition should go forward or in reverse. Lastly, the <code>changeHash</code> argument accepts a boolean for whether you'd like the url to be updated upon a successful page change.</p> + + <p>The <code>$.mobile.changePage()</code> function is used in a number of places in jQuery Mobile. For example, when a link is clicked, its <code>href</code> attribute is normalized and then <code>$.mobile.changePage()</code> handles the rest. When forms are submitted, jQuery Mobile simply gathers a few of the form's attributes, serializes its data, and once again, <code>$.mobile.changePage()</code> is used to handle the submission and response. Also, links that create dialogs use <code>$.mobile.changePage()</code>to open a referenced page without updating the hash, which is useful for keeping dialogs out of history tracking. </p> + + <h2>Base element</h2> + + <p>Another key ingredient to jQuery Mobile's page navigation model is the <code>base</code> element, which is injected into the <code>head</code> and modified on every page change to ensure that any assets (images, CSS, JS, etc.) referenced on that page will be requested from a proper path. In browsers that don't support dynamic updates to the <code>base</code> element (such as Firefox 3.6), jQuery Mobile loops through all of the referenced assets on the page and prefixes their <code>href</code> and <code>src</code> attributes with the base path.</p> + + + <h2>Developer explanation of base url management:</h2> + + <p>jQuery Mobile manages http requests using a combination of generated absolute URL paths and manipulating a generated <code><base></code> element's href attribute. The combination of these two approaches allows us to create URLs that contain full path information for loading pages, and a base element to properly direct asset requests made by those loaded pages (such as images and stylesheets).</p> + +<p><strong>TODO: update description of internal base and urlHistory objects</strong></p> + + <h2>Data-url storage</h2> + + <p>The navigation model maintains a <code>data-url</code> attribute on all <code>data-role="page"</code> elements. This <code>data-url</code> attribute is used to track the origin of the page element. Pages embedded within the main application document all have their <code>data-url</code> parameter set to the ID of their element with <code>data-role="page"</code>. The only exception to this is the first-page in the document. The first-page is special because it can be addressed by its <code>id</code> if it has one, or by the document or base URL (with no hash fragment).</p> + + <p>Pages that are external to the application document get pulled in dynamically via ajax, and their data-url is set to the site relative path to the external page. If you are running in an environment where loading an external page from a different domain is allowed, then the data-url is set to the absolute URL.</p> + + <h2>Auto-generated pages and sub-hash urls</h2> + + <p>Some plugins may choose to dynamically break a page's content into separate navigable pages, which can then be reached via deep links. One example of this would be the Listview plugin, which will break a nested UL (or OL) into separate pages, which are each given a <code>data-url</code> attribute so they can be linked to like any normal "page" in jQuery Mobile. However, in order to link to these pages, the page that generates them must first be requested from the server. To make this work, pages that are auto-generated by plugins use the following special data-url structure: + <code><div data-url="page.html&subpageidentifier"></code></p> + + <p>So, for example, a page generated by the listview plugin may have a <code>data-url</code> attribute like this: <code>data-url="artists.html&ui-page=listview-1"</code></p> + + <p>When a page is requested, jQuery Mobile knows to split the URL at "&ui-page" and make an HTTP request to the portion of the URL before that key. In the case of the listview example mentioned above, the URL would look like this: http://example.com/artists.html&ui-page=listview-1 + ...and jQuery Mobile would request artists.html, which would then generate its sub-pages, creating the <code>div</code> with <code>data-url="artists.html&ui-page=listview-1"</code>, which it will then display as the active page.</p> + + <p><em>Note that the <code>data-url</code> attribute of the element contains the full URL path, not just the portion after &ui-page=. This allows jQuery Mobile to use a single consistent mechanism that matches URLs to page <code>data-url</code> attributes.</em></p> + + <h2>Cases when Ajax navigation will not be used</h2> + + <p>Under certain conditions, normal http requests will be used instead of Ajax requests. One case where this is true is when linking to pages on external websites. You can also specify that a normal http request be made through the following link attributes:</p> + + <ul> + <li><p><code>rel=external</code></p></li> + <li><p><code>target</code> (with any value, such as <code>"_blank"</code>)</p></li> + + </ul><h2>Form submissions</h2> + + <p>Form submissions are handled automatically through the navigation model as well. Visit the <a href="../forms/forms-sample.html">forms section</a> for more information.</p> + + <h2>Using the Application Cache</h2> + + <p>When using the application cache with jQuery Mobile there is at least one important issue to consider. Some browsers, when making requests to the cache will report an http status of 0 on success. This causes jQuery Core's <code>$.ajax</code> to trigger error handlers. The suggested workaround for users leveraging the application cache is to use a jQuery ajax pre-filter. Something like the following (credit to <a href="https://github.com/jquery/jquery-mobile/issues/1579#issuecomment-1209338" rel="external">jammus</a> for the snippet):</p> + + <pre><code> + +$.ajaxPrefilter( function(options, originalOptions, jqXHR) { + if ( applicationCache && + applicationCache.status != applicationCache.UNCACHED && + applicationCache.status != applicationCache.OBSOLETE ) { + // the important bit + options.isLocal = true; + } +}); + + </code></pre> + + <p>Setting <code>isLocal</code> to true for your ajax requests will alert jQuery Core that it should handle the 0 return values differently. Local requests exhibit similar behavior (ie 0 statuses), and Core will then fall back to determining success based on the presence of content in the xhr <code>responseText</code> attribute.</p> + + <p>One important issue to note with the above is that it will set <code>isLocal</code> to <code>true</code> for all requests made via ajax regardless of whether they are in the manifest or not so long as the cache is valid. This works for now because Core only consults the <code>isLocal</code> value when the status is in fact 0 which doesn't affect uncached results. There is no long term guarantee that <code>isLocal</code> will remain isolated in its purpose for handling 0 status values. If that changes it may break your application.</p> + + <h2>Known limitations</h2> + + <p>The non-standard environment created by jQuery Mobile's page navigation model introduces some conditions of which you should be aware when building pages:</p> + + <ul> + <li><p>When linking to directories, without a filename url, (such as <code>href="typesofcats/"</code> instead of <code>href="typesofcats/index.html"</code>), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced.</p></li> + <li><p>Documents loaded via Ajax will select the first page in the DOM of that document to be loaded as a JQM page element. As a result the developer must make sure to manage the ID attributes of the loaded page and child elements to prevent confusion when manipulating the DOM.</p></li> + <li><p>If you link to multipage document, you must use a <code>data-ajax="false"</code> attribute on the link to cause a full page refresh due to the limitation above where we only load the first page node in an Ajax request due to potential hash collisions. There is currently a <a href="https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget" rel="external">subpage plugin</a> that makes it possible to load in multi-page documents. </p></li> + <li><p>Any unique assets referenced by pages in a jQuery Mobile-driven site should be placed inside the "page" element (the element with a <code>data-role</code> attribute of <code>"page"</code>). For example, links to styles and scripts that are specific to a particular page can be referenced inside that <code>div</code>. However, a better approach is to use jQuery Mobile's page events to trigger specific scripting when certain pages load. <strong>Note: </strong> you can return a page from the server with a <code>data-url</code> already specified in the markup, and jQuery Mobile will use that for the hash update. This allows you to ensure directory paths resolve with a trailing slash and will therefore be used in the base url path for future requests.</p></li> + <li><p>Conversely, any non-unique assets (those used site-wide) should be referenced in the <code><head></code> section of an HTML document, or at the very least, outside of the "page" element, to prevent running scripts more than once.</p></li> + <li><p>The <code>"ui-page"</code> key name used in sub-hash url references can be set to any value you'd like, so as to blend into your URL structure. This value is stored in <code>jQuery.mobile.subPageUrlKey</code>.</p></li> + <li><p>When traveling back to a previously loaded jQuery Mobile document from an external <b>or</b> internal document with the push state plugin enabled, some browsers load and trigger the <code>popstate</code> event on the wrong document or for the wrong reasons (two edge cases recorded so far). If you are regularly linking to external documents and find the application behaving erratically try disabling pushstate support.</p></li> + <li><p>jQuery Mobile does not support query parameter passing to internal/embedded pages but there are two plugins that you can add to your project to support this feature. There is a lightweight <a href="https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params" rel="external">page params plugin</a> and a more fully featured <a href="https://github.com/azicchetti/jquerymobile-router" rel="external">jQuery Mobile router plugin</a> for use with backbone.js or spine.js.</p></li> + <li><p>Since we use the URL hash to preserve Back button behavior, using page anchors to jump down to a position on the page isn't supported by using the traditional anchor link (#foo). Use the <a href="../api/methods.html"><code>silentScroll</code></a> method to scroll to a particular Y position without triggering scroll event listeners. You can pass in a <code>yPos</code> arguments to scroll to that Y location.</p></li> + </ul> + + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="page-titles.html">Page titles</a></li> + <li><a href="page-links.html">Linking pages</a></li> + <li><a href="page-transitions.html">Page transitions</a></li> + <li><a href="page-dialogs.html">Dialogs</a></li> + <li><a href="page-cache.html">Prefetching & caching pages</a></li> + <li data-theme="a"><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li><a href="page-scripting.html">Scripting pages</a></li> + <li><a href="phonegap.html">PhoneGap apps</a></li> + <li><a href="touchoverflow.html">touchOverflow feature</a></li> + <li><a href="pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="c"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-scripting.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-scripting.html new file mode 100644 index 00000000..18cef74a --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-scripting.html @@ -0,0 +1,156 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Scripting pages</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>Scripting pages</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + <h2>Scripting pages in jQuery Mobile</h2> + <p>Since jQuery Mobile uses an Ajax-powered navigation system, there are a few helpful things to know when writing scripts that manipulate your content. You can explore the mobile API in more detail by reading up on <a href="../api/globalconfig.html">global configuration options</a>, <a href="../api/events.html">events</a>, and <a href="../api/methods.html">methods</a> or dig into the technical details of the <a href="page-navmodel.html">Ajax navigation model</a>.</p> + + <h2>Scripts & styles in the head</h2> + + <p>When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's <code>href</code> to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that <code>href</code> with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the <em>contents of the response's <code>body</code> element (or more specifically the <code>data-role="page"</code> element, if it's provided)</em>, meaning nothing in the <code>head</code> of the page will be used (with the exception of the page title, which is fetched specifically). Please note that script's loaded dynamically in this fashion do not guarantee a load order in the same way they would if the page was loaded via a normal http request.</p> + + <p> This means that any scripts and styles referenced the <code>head</code> of a page won't have any effect <em>when a page is loaded via Ajax</em>, but they <strong>will execute if the page is requested normally via HTTP</strong>. When scripting jQuery Mobile sites, both scenarios need to be considered. The reason that the <code>head</code> of a page is ignored when requested via Ajax is that the potential of re-executing the same JavaScript is very high (it's common to reference the same scripts in every page of a site). Due to the complexity of attempting to work around that issue, we leave the task of executing page-specific scripts to the developer, and assume <code>head</code> scripts are only expected to execute once per browsing session.</p> + + <p>The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the <code>pageInit</code> event (details below) to run necessary code when a specific page is created (which can be determined by its <code>id</code> attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.</p> + + <p>Another approach for page-specific scripting would be to include scripts at the end of the <code>body</code> element when no <code>data-role=page</code> element is defined, or inside the first <code>data-role=page</code> element. If you include your custom scripting this way, be aware that these scripts will execute when that page is loaded via Ajax or regular HTTP, so if these scripts are the same on every page, you'll likely run into problems. If you're including scripts this way, we'd recommend enclosing your page content in a <code>data-role="page"</code> element, and placing scripts that are referenced on every page outside of that element. Scripts that are unique to that page can be placed in that element, to ensure that they execute when the page is fetched via Ajax.</p> + + <h2>pageinit = DOM ready</h2> + + <p>One of the first things people learn in jQuery is to use the <code>$(document).ready()</code> function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the <code>onload</code> event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the <a href="../api/events.html"><code>pageinit</code></a> event. </p> + + <p>The <code>pageinit</code> event is triggered on a page when it is initialized, right after initialization occurs. Most of jQuery Mobile's official widgets auto-initialize themselves based on this event, and you can set up your code to do the same.</p> +<pre><code> +$( document ).delegate("#aboutPage", "pageinit", function() { + alert('A page with an ID of "aboutPage" was just created by jQuery Mobile!'); +}); +</code></pre> + + <p>If you'd like to manipulate a page's contents <em>before</em> the pageinit event fires and widgets are auto-initialized, you can instead bind to the <code>pagebeforecreate</code> event:</p> + +<pre><code> +$( document ).delegate("#aboutPage", "pagebeforecreate", function() { + alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!'); +}); +</code></pre> + + <h4 style="margin:.5em 0">Important note: <code>pageCreate()</code> vs <code>pageInit()</code></h4> + <p>Prior to Beta 2 the recommendation to users wishing to manipulate jQuery Mobile enhanced page and child widget markup was to bind to the <code>pagecreate</code> event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the <code>pagecreate</code> event in place of direct calls to the widget methods. As a result, users binding to the <code>pagecreate</code> in <code>mobileinit</code> would find their binding executing before the markup had been enhanced by each of the plugins. In keeping with the lifecycle of the jQuery UI Widget Factory, the initialization method is invoked <strong>after</strong> the create method, so the <code>pageinit</code> event provides the correct timing for post enhancement manipulation of the DOM and/or Javascript objects. + + In short, if you were previously using <code>pagecreate</code> to manipulate the enhanced markup before the page was shown, it's very likely you'll want to migrate to 'pageinit'. + </p> + + + <h2>Changing pages</h2> + <p>If you want to change the current active page with JavaScript, you can use the <a href="../api/methods.html"><code>changePage</code></a> method. There are a lot of methods and properties that you can set when changing pages, but here are two simple examples:</p> + <pre><code> +<strong>//transition to the "about us" page with a slideup transition</strong> +$.mobile.changePage( "about/us.html", { transition: "slideup"} ); + +<strong>//transition to the "search results" page, using data from a form with an ID of "search"" </strong> +$.mobile.changePage( "searchresults.php", { + type: "post", + data: $("form#search").serialize() +}); +</code></pre> + + <h2>Loading pages</h2> + <p>To load an external page, enhance its content, and insert it into the DOM, use the <a href="../api/methods.html"><code>loadPage</code> method</a>. There are a lot of methods and properties that you can set when loading pages, but here is a simple example:</p> + <pre><code> +//load the "about us" page into the DOM +$.mobile.loadPage( "about/us.html" ); +</code></pre> + + <h2>Enhancing new markup</h2> + <p>The page plugin dispatches a <code>pageInit</code> event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.</p> + <p>However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the <code>create</code> event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page <code>div</code> itself), saving you the task of manually initializing each plugin (listview button, select, etc.).</p> + <p>For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the <code>create</code> event to automatically transform all the widgets it contains (<a href="http://jquerymobile.com/test/docs/forms/textinputs/index.html">inputs</a> and <a href="http://jquerymobile.com/test/docs/buttons/index.html">buttons</a> in this case) into the enhanced versions. The code for this scenario would be:</p> +<pre style="margin: 25px 0;"><code style="font-size: 12px;">$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" ); +</code></pre> + + <h2>Create vs. refresh: An important distinction</h2> + <p>Note that there is an important difference between the <code>create</code> event and <code>refresh</code> method that some widgets have. The <code>create</code> event is suited for enhancing <em>raw markup</em> that contains one or more widgets. The <code>refresh</code> method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.</p> + + <p>For example, if you had a page where you dynamically appended a new unordered list with <code>data-role=listview</code> attribute after page creation, triggering <code>create</code> on a parent element of that list would transform it into a <a href="http://jquerymobile.com/test/docs/lists/index.html">listview</a> styled widget. If more list items were then programmatically added, calling the listview’s <code>refresh</code> method would update just those new list items to the enhanced state and leave the existing list items untouched.</p> + + + <h2>Scrolling to a position within a page</h2> + <p>Since we use the URL hash to preserve Back button behavior, using page anchors to jump down to a position on the page isn't supported by using the traditional anchor link (#foo). Use the <a href="../api/methods.html"><code>silentScroll</code></a> method to scroll to a particular Y position without triggering scroll event listeners. You can pass in a <code>yPos</code> arguments to scroll to that Y location. For example:</p> +<pre><code> +//scroll to Y 300px +$.mobile.silentScroll(300); +</code></pre> + + <h2>Binding to mouse and touch events</h2> + <p>One inportant consideration in mobile is handling mouse and touch events. These events differ significantly across mobile platforms, but the common denominator is that click events will work everywhere, but usually after a significant delay of 500-700ms. This delay is necessary for the browser to wait for double tap, scroll and extended hold tap events to potentially occur. To avoid this delay, it's possible to bind to touch events (ex. touchstart) but the issue with this approach is that some mobile platforms (WP7, Blackberry) don't support touch. To compound this issue, some platforms will emit <em>both</em> touch and mouse events so if you bind to both types, duplicate events will be fired for a single interaction.</p> + <p>Our solution is to create a set of <a href="../api/events.html">virtual events</a> that normalize mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. This still retains the order of event firing in the traditional mouse environment, should multiple handlers be registered on the same element for different events. The virtual mouse system exposes the following virtual events to jQuery bind methods: <code>vmouseover</code>, <code>vmousedown</code>, <code>vmousemove</code>, <code>vmouseup</code>, <code>vclick</code>, and <code>vmousecancel</code></p> + + + <h2>Passing parameters between pages</h2> + <p>jQuery Mobile does not support query parameter passing to internal/embedded pages. For example, if the framework sees a link to "#somePage?someId=1" it interpret that as "#somePage" and navigate to the internal page div with an ID of <code>somePage</code> and apply a data-url of <code>#somePage?someId=1</code> to that page container. Subsequent calls to other params such as "#somePage?someId=2" will find the same div because jQuery Mobile refers to the data-url on the div which is only set once and will remain at <code>#somePage?someId=1</code>.</p> + + <p>There are two plugins that you can add to your project if query parameters are needed between pages. There is a lightweight <a href="https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params" rel="external">page params plugin</a> and a more fully featured <a href="https://github.com/azicchetti/jquerymobile-router" rel="external">jQuery Mobile router plugin</a> for use with backbone.js or spine.js.</p> + + + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="page-titles.html">Page titles</a></li> + <li><a href="page-links.html">Linking pages</a></li> + <li><a href="page-transitions.html">Page transitions</a></li> + <li><a href="page-dialogs.html">Dialogs</a></li> + <li><a href="page-cache.html">Prefetching & caching pages</a></li> + <li><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li data-theme="a"><a href="page-scripting.html">Scripting pages</a></li> + <li><a href="phonegap.html">PhoneGap apps</a></li> + <li><a href="touchoverflow.html">touchOverflow feature</a></li> + <li><a href="pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="c"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-template.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-template.html new file mode 100755 index 00000000..88e15ecc --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-template.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Single page template</title> + <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> + <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> + <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> +</head> + +<body> + +<div data-role="page"> + + <div data-role="header"> + <h1>Single page</h1> + </div><!-- /header --> + + <div data-role="content"> + <p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p> + <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p> + <p>This template is standard HTML document with a single "page" container inside, unlike a <a href="multipage-template.html" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p> + </div><!-- /content --> + + <div data-role="footer"> + <h4>Footer content</h4> + </div><!-- /footer --> + +</div><!-- /page --> + +</body> +</html>
\ No newline at end of file diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-titles.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-titles.html new file mode 100644 index 00000000..a7aad704 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-titles.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Page titles</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>Page titles</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + + <h2>Titles in Ajax navigation</h2> + + <p>When you load the first page of a jQuery Mobile based site, then click a link or submit a form, Ajax is used to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions, but one downside of this approach is that the page title is always that of the first page, not the subsequent page you’re viewing.</p> + <p>To remedy this, jQuery Mobile automatically parses the <code>title</code> of the page pulled via Ajax and changes the <code>title</code> attribute of the parent document to match.</p> + + <h2>Titles in multi-page templates</h2> + + <p>On multi-page documents, we follow a similiar convention, but since all the pages share a common <code>title</code>, we have a <code>data-title</code> attribute that can be added to each page container within a multi-page template to manually define a title. The title of the HTML document will be automatically updated to match the <code>data-title</code> of the page currently in view.</p> + +<pre><code> +<div data-role="page" id="foo" <strong>data-title="Page Foo"</strong>> + +</div><!-- /page --> +</code></pre> + + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li data-theme="a"><a href="page-titles.html">Page titles</a></li> + <li><a href="page-links.html">Linking pages</a></li> + <li><a href="page-transitions.html">Page transitions</a></li> + <li><a href="page-dialogs.html">Dialogs</a></li> + <li><a href="page-cache.html">Prefetching & caching pages</a></li> + <li><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li><a href="page-scripting.html">Scripting pages</a></li> + <li><a href="phonegap.html">PhoneGap apps</a></li> + <li><a href="touchoverflow.html">touchOverflow feature</a></li> + <li><a href="pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="c"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions-dialog.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions-dialog.html new file mode 100644 index 00000000..88d65628 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions-dialog.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Framework - Dialog</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" id="dialog-success" data-dom-cache="true"><!-- dialog--> + + <div data-role="header" data-theme="e"> + <h1>Dialog</h1> + </div><!-- /header --> + + <div data-role="content" data-theme="e"> + <p>That was an animated page transition effect to a dialog that we added with a <code>data-transition</code> attribute on the link.</p> + <p>Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.</p> + + <a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back">Take me back</a> + </div> + </div> + + <div data-role="page" id="page-success"><!-- dialog--> + +</body> +</html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions-page.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions-page.html new file mode 100644 index 00000000..daf91001 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions-page.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Framework - Page</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + + + <div data-role="page" id="page-success" data-dom-cache="true"><!-- page--> + <div data-role="header" data-theme="a"> + <h1>Page</h1> + </div><!-- /header --> + + <div data-role="content" data-theme="d"> + <p>That was an animated page transition effect to a page that we added with a <code>data-transition</code> attribute on the link. This uses a different background theme swatch to see how that looks with the transitions.</p> + <p>Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.</p> + + <form action="#" method="get"> + <h2>Here's a few form elements</h2> + + <p>These are here to see if this slows down rendering.</p> + + <div data-role="fieldcontain"> + <label for="name">Text Input:</label> + <input type="text" name="name" id="name" value="" /> + </div> + + <div data-role="fieldcontain"> + <label for="textarea">Textarea:</label> + <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> + </div> + + <div data-role="fieldcontain"> + <label for="slider2">Flip switch:</label> + <select name="slider2" id="slider2" data-role="slider"> + <option value="off">Off</option> + <option value="on">On</option> + </select> + </div> + + <div data-role="fieldcontain"> + <label for="slider">Slider:</label> + <input type="range" name="slider" id="slider" value="0" min="0" max="100" data-highlight="true" /> + </div> + + </form> + + <a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back" data-inline="true">Take me back</a> + </div> + + <div data-role="footer" data-theme="d"> + <div style="margin:5px 10px;"><!-- To add a bit of spacing --> + <label for="search" class="ui-hidden-accessible">Search:</label> + <input type="search" name="password" id="search" placeholder="Search..." value="" /> + </div> + </div><!-- /footer --> + </div> +</body> +</html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions.html b/libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions.html new file mode 100644 index 00000000..01932f27 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/page-transitions.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Transitions</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>Transitions</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + <h2>Page transitions</h2> + + <p>The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation: </p> + + <style> + table { width:100%; border-bottom:1px solid #ccc; border-collapse: collapse; } + th { text-align:left; } + th h3 { margin:.6em 0; } + th, td { vertical-align:top; border-top:1px solid #ccc; padding: 1px 3px; } + td .ui-btn { margin:.4em 0 .5em 0; } + td .ui-btn-inner { padding: .4em 15px; } + </style> + + <table margin="0"> + <tr> + <th><h3>fade</h3></th> + <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td> + <td><a href="page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td> + </tr> + <tr> + <th><h3>pop</h3></th> + <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td> + <td><a href="page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td> + </tr> + <tr> + <th><h3>flip</h3></th> + <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td> + <td><a href="page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td> + </tr> + <tr> + <th><h3>turn</h3></th> + <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td> + <td><a href="page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td> + </tr> + <tr> + <th><h3>flow</h3></th> + <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td> + <td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td> + </tr> + <tr> + <th><h3>slidefade</h3></th> + <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td> + <td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td> + </tr> + <tr> + <th><h3>slide</h3></th> + <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td> + <td><a href="page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td> + </tr> + <tr> + <th><h3>slideup</h3></th> + <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td> + <td><a href="page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td> + </tr> + <tr> + <th><h3>slidedown</h3></th> + <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td> + <td><a href="page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td> + </tr> + <tr> + <th><h3>none</h3></th> + <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td> + <td><a href="page-transitions-page.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">page</a></td> + </tr> + </table> + + +<p><strong>Only seeing fade transitions?</strong> To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).</p> + +<p><strong>Transitions were originally inspired by <a href="http://www.jqtouch.com/">jQtouch</a></strong> They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.</p> + + <h2>Setting a transition on a link or form submit</h2> + <p>By default, the framework applies a <strong>fade</strong> transition. To set a custom transition effect, add the <code>data-transition</code> attribute to the link. </p> + +<code><code> +<a href="index.html" <strong>data-transition="pop"</strong>>I'll pop</a> +</code></code> + + <p>When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the <code>data-direction="reverse"</code> attribute to a link.</p> + + <h2>Global configuration of transitions</h2> + + <p>Set the <code>defaultPageTransition</code> <a href="../api/globalconfig.html">global option</a> if you'd prefer a different default transition. Dialogs have a different option called <code>defaultDialogTransition</code> that can also set configured.</p> + + + <h2>Browser support and performance</h2> + <p>All transitions are built with CSS keyframe animations and include both <code>-webkit</code> vendor prefixed rules for iOS, Blackberry, Android, Safari and Chrome browsers and <code>-moz</code> rules for Firefox browsers. Support for keyframe animations and transition smoothness is determined by the browser version and hardware and will safely fall back to no transition if animations aren't supported. To proactively exclude transition in situations with poor performance, we exclude browsers that lack 3D transforms and provide a fallback transition and apply a max width for when transitions are applied.</p> + + <h2>Defining fallback transitions for non-3D support</h2> + <p>By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.</p> + + <p>The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":</p> + <code>$.mobile.transitionFallbacks.slideout = "none"</code> + + <h2>Setting a max width for transitions</h2> + <p>By default, transitions can be disabled (set to "none") when the window width is greater than a certain pixel width. This feature is useful because transitions can be distracting or perform poorly on larger screens. This value is configurable via the global option <code>$.mobile.maxTransitionWidth</code>, which defaults to <code>false</code>. The option accepts any number representing a pixel width or <code>false</code> value. If it's not <code>false</code>, the handler will use a "none" transition when the window width is wider than the specified value.</p> + + + + + + <h2>Creating custom transitions</h2> + + <p>jQuery Mobile allows for the addition of <a href="page-customtransitions.html">custom transitions</a> to the <code>$.mobile.transitionHandlers</code> dictionary so you can expand the selection of transitions on your site or app. + + + + + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="page-titles.html">Page titles</a></li> + <li><a href="page-links.html">Linking pages</a></li> + <li data-theme="a"><a href="page-transitions.html">Page transitions</a></li> + <li><a href="page-dialogs.html">Dialogs</a></li> + <li><a href="page-cache.html">Prefetching & caching pages</a></li> + <li><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li><a href="page-scripting.html">Scripting pages</a></li> + <li><a href="phonegap.html">PhoneGap apps</a></li> + <li><a href="touchoverflow.html">touchOverflow feature</a></li> + <li><a href="pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="c"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes.html b/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes.html new file mode 100644 index 00000000..92f8876b --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes.html @@ -0,0 +1,150 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Theming Pages</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>Theming pages</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + + <ul data-role="controlgroup" data-type="horizontal" class="localnav"> + <li><a href="pages-themes.html" data-role="button" data-transition="fade" class="ui-btn-active">Theme Overview</a></li> + + <li><a href="pages-themes/theme-a.html" data-role="button" data-transition="fade">A </a></li> + <li><a href="pages-themes/theme-b.html" data-role="button" data-transition="fade">B </a></li> + <li><a href="pages-themes/theme-c.html" data-role="button" data-transition="fade">C </a></li> + <li><a href="pages-themes/theme-d.html" data-role="button" data-transition="fade">D </a></li> + <li><a href="pages-themes/theme-e.html" data-role="button" data-transition="fade">E </a></li> + </ul> + + <h2>Page Theming</h2> + + <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages are styled. There is detailed theming documentation within each page widget, but let's look at a few high-level examples of how theming is applied.</p> + + <p>The <code> data-theme</code> attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. While the <code>data-theme</code> attribute could be added to the content container, we recommend adding it instead to <code>div</code> or container that has been assigned the <code> data-role="page"</code> attribute to ensure that the background color is applied to the full page. When this is done, all widgets on the page will also inherit the theme specified in the page container. However, headers and footers will default to theme "a". If you want to have a page with, for example, only theme "b" for all its elements, including its header and footer, you will need to specify <code>data-theme="b"</code> to the page <code>div</code> as well as the header and footer <code>divs</code>. </p> + + <p>The default Theme mixes styles from multiple swatches to create visual texture and present the various elements in optimal contrast to one another:</p> + + <div data-role="header"> + <h1>Default Theme</h1> + </div> + + <div class="ui-body ui-body-c"> + <h3>Default Theme Content Header</h3> + <p>This is the default content color swatch and a preview of a <a href="#" class="ui-link">link</a>.</p> + + <a href="#" data-role="button" data-inline="true">Button</a> + </div> + + <p>And each of the five "swatches" applies its style consistently across all page elements, as shown below:</p> + + <h2>Swatch A</h2> + <div data-role="header"> + <h1>Header A</h1> + </div> + + + <div class="ui-body ui-body-a"> + <h3>Header</h3> + <p>This is content color swatch "A" and a preview of a <a href="#" class="ui-link">link</a>.</p> + <a href="#" data-role="button" data-inline="true">Button</a> + </div> + + + <h2>Swatch B</h2> + <div data-role="header" data-theme="b"> + <h1>Header B</h1> + </div> + <div class="ui-body ui-body-b"> + <h3>Header</h3> + <p>This is content color swatch "B" and a preview of a <a href="#" class="ui-link">link</a>.</p> + <a href="#" data-role="button" data-inline="true">Button</a> + </div> + + <h2>Swatch C</h2> + <div data-role="header" data-theme="c"> + <h1>Header C</h1> + </div> + <div class="ui-body ui-body-c"> + <h3>Header</h3> + <p>This is content color swatch "C" and a preview of a <a href="#" class="ui-link">link</a>.</p> + <a href="#" data-role="button" data-inline="true">Button</a> + </div> + + <h2>Swatch D</h2> + <div data-role="header" data-theme="d"> + <h1>Header D</h1> + </div> + <div class="ui-body ui-body-d"> + <h3>Header</h3> + <p>This is content color swatch "D" and a preview of a <a href="#" class="ui-link">link</a>.</p> + <a href="#" data-role="button" data-inline="true">Button</a> + </div> + + <h2>Swatch E</h2> + <div data-role="header" data-theme="e"> + <h1>Header E</h1> + </div> + <div class="ui-body ui-body-e"> + <h3>Header</h3> + <p>This is content color swatch "E" and a preview of a <a href="#" class="ui-link">link</a>.</p> + <a href="#" data-role="button" data-inline="true">Button</a> + </div> + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="page-titles.html">Page titles</a></li> + <li><a href="page-links.html">Linking pages</a></li> + <li><a href="page-transitions.html">Page transitions</a></li> + <li><a href="page-dialogs.html">Dialogs</a></li> + <li><a href="page-cache.html">Prefetching & caching pages</a></li> + <li><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li><a href="page-scripting.html">Scripting pages</a></li> + <li><a href="phonegap.html">PhoneGap apps</a></li> + <li><a href="touchoverflow.html">touchOverflow feature</a></li> + <li data-theme="a"><a href="pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="c"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-a.html b/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-a.html new file mode 100644 index 00000000..9aae998f --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-a.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Theming Pages</title> + <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/> + <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script> + <script src="../../../js/jquery.js"></script> + <script src="../../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior" data-theme="a"> + + <div data-role="header"> + <h1>Theming pages</h1> + <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + + <ul data-role="controlgroup" data-type="horizontal" class="localnav"> + <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li> + + <li><a href="theme-a.html" data-role="button" data-transition="fade" class="ui-btn-active">A </a></li> + <li><a href="theme-b.html" data-role="button" data-transition="fade">B </a></li> + <li><a href="theme-c.html" data-role="button" data-transition="fade">C </a></li> + <li><a href="theme-d.html" data-role="button" data-transition="fade">D </a></li> + <li><a href="theme-e.html" data-role="button" data-transition="fade">E </a></li> + </ul> + + <h2>Theme A Sample Page</h2> + + <p>This is an example of <code>data-theme="a"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p> + + <div data-role="fieldcontain"> + <label for="name-a">Text Input:</label> + <input type="text" name="name" id="name-a" value="" /> + </div> + + <div data-role="fieldcontain"> + <label for="switch-a">Flip switch:</label> + <select name="switch-a" id="switch-a" data-role="slider"> + <option value="off">Off</option> + <option value="on">On</option> + </select> + </div> + + <div data-role="fieldcontain"> + <label for="slider-a">Slider:</label> + <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" /> + </div> + + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup" data-type="horizontal"> + <legend>Font styling:</legend> + <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" /> + <label for="checkbox-6a">b</label> + + <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" /> + <label for="checkbox-7a"><em>i</em></label> + + <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" /> + <label for="checkbox-8a">u</label> + </fieldset> + </div> + + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup"> + <legend>Choose a pet:</legend> + <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" /> + <label for="radio-choice-1a">Cat</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" /> + <label for="radio-choice-2a">Dog</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" /> + <label for="radio-choice-3a">Hamster</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" /> + <label for="radio-choice-4a">Lizard</label> + </fieldset> + </div> + + <div data-role="fieldcontain"> + <label for="select-choice-a" class="select">Choose shipping method:</label> + <select name="select-choice-a" id="select-choice-a"> + <option value="standard">Standard: 7 day</option> + <option value="rush">Rush: 3 days</option> + <option value="express">Express: next day</option> + <option value="overnight">Overnight</option> + </select> + </div> + + <h2>Collapsible Sets</h2> + <div data-role="collapsible-set"> + <div data-role="collapsible" data-collapsed="false"> + <h3>Section 1</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p> + </div> + <div data-role="collapsible"> + <h3>Section 2</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p> + + </div> + <div data-role="collapsible"> + <h3>Section 3</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p> + + </div> + </div> + + <h2>Inset List</h2> + <ul data-role="listview" data-inset="true"> + <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li> + <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li> + <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li> + <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li> + <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li> + </ul> + + </div><!--/content-primary --> + + <div class="content-secondary"> + <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="a" data-dividertheme="a"> + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="../page-anatomy.html">Anatomy of a page</a></li> + <li><a href="../page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="../page-titles.html">Page titles</a></li> + <li><a href="../page-links.html">Linking pages</a></li> + <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li> + <li><a href="../page-dialogs.html">Dialogs</a></li> + <li><a href="../page-cache.html">Prefetching & caching pages</a></li> + <li><a href="../page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li> + <li><a href="../page-scripting.html">Scripting pages</a></li> + <li data-theme="b"><a href="../pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-b.html b/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-b.html new file mode 100644 index 00000000..7803d1da --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-b.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Theming Pages</title> + <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/> + <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script> + <script src="../../../js/jquery.js"></script> + <script src="../../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior" data-theme="b"> + + <div data-role="header" data-theme="b"> + <h1>Theming pages</h1> + <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + + <ul data-role="controlgroup" data-type="horizontal" class="localnav"> + <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li> + + <li><a href="theme-a.html" data-role="button" data-transition="fade">A </a></li> + <li><a href="theme-b.html" data-role="button" data-transition="fade" class="ui-btn-active">B </a></li> + <li><a href="theme-c.html" data-role="button" data-transition="fade">C </a></li> + <li><a href="theme-d.html" data-role="button" data-transition="fade">D </a></li> + <li><a href="theme-e.html" data-role="button" data-transition="fade">E </a></li> + </ul> + + <h2>Theme B Sample Page</h2> + + <p>This is an example of <code>data-theme="b"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p> + + <div data-role="fieldcontain"> + <label for="name-a">Text Input:</label> + <input type="text" name="name" id="name-a" value="" /> + </div> + + <div data-role="fieldcontain"> + <label for="switch-a">Flip switch:</label> + <select name="switch-a" id="switch-a" data-role="slider"> + <option value="off">Off</option> + <option value="on">On</option> + </select> + </div> + + <div data-role="fieldcontain"> + <label for="slider-a">Slider:</label> + <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" /> + </div> + + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup" data-type="horizontal"> + <legend>Font styling:</legend> + <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" /> + <label for="checkbox-6a">b</label> + + <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" /> + <label for="checkbox-7a"><em>i</em></label> + + <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" /> + <label for="checkbox-8a">u</label> + </fieldset> + </div> + + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup"> + <legend>Choose a pet:</legend> + <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" /> + <label for="radio-choice-1a">Cat</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" /> + <label for="radio-choice-2a">Dog</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" /> + <label for="radio-choice-3a">Hamster</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" /> + <label for="radio-choice-4a">Lizard</label> + </fieldset> + </div> + + <div data-role="fieldcontain"> + <label for="select-choice-a" class="select">Choose shipping method:</label> + <select name="select-choice-a" id="select-choice-a"> + <option value="standard">Standard: 7 day</option> + <option value="rush">Rush: 3 days</option> + <option value="express">Express: next day</option> + <option value="overnight">Overnight</option> + </select> + </div> + + <h2>Collapsible Sets</h2> + <div data-role="collapsible-set"> + <div data-role="collapsible" data-collapsed="false"> + <h3>Section 1</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p> + </div> + <div data-role="collapsible"> + <h3>Section 2</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p> + + </div> + <div data-role="collapsible"> + <h3>Section 3</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p> + + </div> + </div> + + <h2>Inset List</h2> + <ul data-role="listview" data-inset="true"> + <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li> + <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li> + <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li> + <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li> + <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li> + </ul> + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="b"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="b" data-dividertheme="b"> + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="../page-anatomy.html">Anatomy of a page</a></li> + <li><a href="../page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="../page-titles.html">Page titles</a></li> + <li><a href="../page-links.html">Linking pages</a></li> + <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li> + <li><a href="../page-dialogs.html">Dialogs</a></li> + <li><a href="../page-cache.html">Prefetching & caching pages</a></li> + <li><a href="../page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li> + <li><a href="../page-scripting.html">Scripting pages</a></li> + <li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="b"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-c.html b/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-c.html new file mode 100644 index 00000000..2bbdd2fd --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-c.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Theming Pages</title> + <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/> + <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script> + <script src="../../../js/jquery.js"></script> + <script src="../../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior" data-theme="c"> + + <div data-role="header" data-theme="c"> + <h1>Theming pages</h1> + <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + + <ul data-role="controlgroup" data-type="horizontal" class="localnav"> + <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li> + + <li><a href="theme-a.html" data-role="button" data-transition="fade">A </a></li> + <li><a href="theme-b.html" data-role="button" data-transition="fade">B </a></li> + <li><a href="theme-c.html" data-role="button" data-transition="fade" class="ui-btn-active">C </a></li> + <li><a href="theme-d.html" data-role="button" data-transition="fade">D </a></li> + <li><a href="theme-e.html" data-role="button" data-transition="fade">E </a></li> + </ul> + + <h2>Theme C Sample Page</h2> + + <p>This is an example of <code>data-theme="c"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p> + + <div data-role="fieldcontain"> + <label for="name-a">Text Input:</label> + <input type="text" name="name" id="name-a" value="" /> + </div> + + <div data-role="fieldcontain"> + <label for="switch-a">Flip switch:</label> + <select name="switch-a" id="switch-a" data-role="slider"> + <option value="off">Off</option> + <option value="on">On</option> + </select> + </div> + + <div data-role="fieldcontain"> + <label for="slider-a">Slider:</label> + <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" /> + </div> + + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup" data-type="horizontal"> + <legend>Font styling:</legend> + <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" /> + <label for="checkbox-6a">b</label> + + <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" /> + <label for="checkbox-7a"><em>i</em></label> + + <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" /> + <label for="checkbox-8a">u</label> + </fieldset> + </div> + + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup"> + <legend>Choose a pet:</legend> + <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" /> + <label for="radio-choice-1a">Cat</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" /> + <label for="radio-choice-2a">Dog</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" /> + <label for="radio-choice-3a">Hamster</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" /> + <label for="radio-choice-4a">Lizard</label> + </fieldset> + </div> + + <div data-role="fieldcontain"> + <label for="select-choice-a" class="select">Choose shipping method:</label> + <select name="select-choice-a" id="select-choice-a"> + <option value="standard">Standard: 7 day</option> + <option value="rush">Rush: 3 days</option> + <option value="express">Express: next day</option> + <option value="overnight">Overnight</option> + </select> + </div> + + <h2>Collapsible Sets</h2> + <div data-role="collapsible-set"> + <div data-role="collapsible" data-collapsed="false"> + <h3>Section 1</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p> + </div> + <div data-role="collapsible"> + <h3>Section 2</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p> + + </div> + <div data-role="collapsible"> + <h3>Section 3</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p> + + </div> + </div> + + <h2>Inset List</h2> + <ul data-role="listview" data-inset="true"> + <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li> + <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li> + <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li> + <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li> + <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li> + </ul> + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="c"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="c"> + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="../page-anatomy.html">Anatomy of a page</a></li> + <li><a href="../page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="../page-titles.html">Page titles</a></li> + <li><a href="../page-links.html">Linking pages</a></li> + <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li> + <li><a href="../page-dialogs.html">Dialogs</a></li> + <li><a href="../page-cache.html">Prefetching & caching pages</a></li> + <li><a href="../page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li> + <li><a href="../page-scripting.html">Scripting pages</a></li> + <li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="c"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-d.html b/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-d.html new file mode 100644 index 00000000..91e21369 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-d.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Theming Pages</title> + <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/> + <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script> + <script src="../../../js/jquery.js"></script> + <script src="../../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior" data-theme="d"> + + <div data-role="header" data-theme="d"> + <h1>Theming pages</h1> + <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + + <ul data-role="controlgroup" data-type="horizontal" class="localnav"> + <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li> + + <li><a href="theme-a.html" data-role="button" data-transition="fade">A </a></li> + <li><a href="theme-b.html" data-role="button" data-transition="fade">B </a></li> + <li><a href="theme-c.html" data-role="button" data-transition="fade">C </a></li> + <li><a href="theme-d.html" data-role="button" data-transition="fade" class="ui-btn-active">D </a></li> + <li><a href="theme-e.html" data-role="button" data-transition="fade">E </a></li> + </ul> + + <h2>Theme D Sample Page</h2> + + <p>This is an example of <code>data-theme="d"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p> + + <div data-role="fieldcontain"> + <label for="name-a">Text Input:</label> + <input type="text" name="name" id="name-a" value="" /> + </div> + + <div data-role="fieldcontain"> + <label for="switch-a">Flip switch:</label> + <select name="switch-a" id="switch-a" data-role="slider"> + <option value="off">Off</option> + <option value="on">On</option> + </select> + </div> + + <div data-role="fieldcontain"> + <label for="slider-a">Slider:</label> + <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" /> + </div> + + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup" data-type="horizontal"> + <legend>Font styling:</legend> + <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" /> + <label for="checkbox-6a">b</label> + + <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" /> + <label for="checkbox-7a"><em>i</em></label> + + <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" /> + <label for="checkbox-8a">u</label> + </fieldset> + </div> + + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup"> + <legend>Choose a pet:</legend> + <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" /> + <label for="radio-choice-1a">Cat</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" /> + <label for="radio-choice-2a">Dog</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" /> + <label for="radio-choice-3a">Hamster</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" /> + <label for="radio-choice-4a">Lizard</label> + </fieldset> + </div> + + <div data-role="fieldcontain"> + <label for="select-choice-a" class="select">Choose shipping method:</label> + <select name="select-choice-a" id="select-choice-a"> + <option value="standard">Standard: 7 day</option> + <option value="rush">Rush: 3 days</option> + <option value="express">Express: next day</option> + <option value="overnight">Overnight</option> + </select> + </div> + + <h2>Collapsible Sets</h2> + <div data-role="collapsible-set"> + <div data-role="collapsible" data-collapsed="false"> + <h3>Section 1</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p> + </div> + <div data-role="collapsible"> + <h3>Section 2</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p> + + </div> + <div data-role="collapsible"> + <h3>Section 3</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p> + + </div> + </div> + + <h2>Inset List</h2> + <ul data-role="listview" data-inset="true"> + <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li> + <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li> + <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li> + <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li> + <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li> + </ul> + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="../page-anatomy.html">Anatomy of a page</a></li> + <li><a href="../page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="../page-titles.html">Page titles</a></li> + <li><a href="../page-links.html">Linking pages</a></li> + <li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li> + <li><a href="../page-dialogs.html">Dialogs</a></li> + <li><a href="../page-cache.html">Prefetching & caching pages</a></li> + <li><a href="../page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li> + <li><a href="../page-scripting.html">Scripting pages</a></li> + <li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="d"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-e.html b/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-e.html new file mode 100644 index 00000000..b06458a6 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/pages-themes/theme-e.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Theming Pages</title> + <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/> + <script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script> + <script src="../../../js/jquery.js"></script> + <script src="../../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior" data-theme="e"> + + <div data-role="header" data-theme="e"> + <h1>Theming pages</h1> + <a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + + <ul data-role="controlgroup" data-type="horizontal" class="localnav"> + <li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li> + + <li><a href="theme-a.html" data-role="button" data-transition="fade">A </a></li> + <li><a href="theme-b.html" data-role="button" data-transition="fade">B </a></li> + <li><a href="theme-c.html" data-role="button" data-transition="fade">C </a></li> + <li><a href="theme-d.html" data-role="button" data-transition="fade">D </a></li> + <li><a href="theme-e.html" data-role="button" data-transition="fade" class="ui-btn-active">E </a></li> + </ul> + + <h2>Theme E Sample Page</h2> + + <p>This is an example of <code>data-theme="e"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p> + + <div data-role="fieldcontain"> + <label for="name-a">Text Input:</label> + <input type="text" name="name" id="name-a" value="" /> + </div> + + <div data-role="fieldcontain"> + <label for="switch-a">Flip switch:</label> + <select name="switch-a" id="switch-a" data-role="slider"> + <option value="off">Off</option> + <option value="on">On</option> + </select> + </div> + + <div data-role="fieldcontain"> + <label for="slider-a">Slider:</label> + <input type="range" name="slider" id="slider-a" value="0" min="0" max="100" /> + </div> + + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup" data-type="horizontal"> + <legend>Font styling:</legend> + <input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" /> + <label for="checkbox-6a">b</label> + + <input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" /> + <label for="checkbox-7a"><em>i</em></label> + + <input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" /> + <label for="checkbox-8a">u</label> + </fieldset> + </div> + + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup"> + <legend>Choose a pet:</legend> + <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" /> + <label for="radio-choice-1a">Cat</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" /> + <label for="radio-choice-2a">Dog</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" /> + <label for="radio-choice-3a">Hamster</label> + + <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" /> + <label for="radio-choice-4a">Lizard</label> + </fieldset> + </div> + + <div data-role="fieldcontain"> + <label for="select-choice-a" class="select">Choose shipping method:</label> + <select name="select-choice-a" id="select-choice-a"> + <option value="standard">Standard: 7 day</option> + <option value="rush">Rush: 3 days</option> + <option value="express">Express: next day</option> + <option value="overnight">Overnight</option> + </select> + </div> + + <h2>Collapsible Sets</h2> + <div data-role="collapsible-set"> + <div data-role="collapsible" data-collapsed="false"> + <h3>Section 1</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm visible by default because I have the <code>data-collapsed="false"</code> attribute; to collapse me, either click my header or expand another header in my set.</p> + </div> + <div data-role="collapsible"> + <h3>Section 2</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p> + + </div> + <div data-role="collapsible"> + <h3>Section 3</h3> + <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p> + + </div> + </div> + + <h2>Inset List</h2> + <ul data-role="listview" data-inset="true"> + <li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li> + <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li> + <li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li> + <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li> + <li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li> + </ul> + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="e" data-content-theme="e"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="e" data-dividertheme="e"> + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="../../page-anatomy.html">Anatomy of a page</a></li> + <li><a href="../../page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="../../multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="../../page-titles.html">Page titles</a></li> + <li><a href="../../page-links.html">Linking pages</a></li> + <li><a href="../../page-transitions.html" data-ajax="false">Page transitions</a></li> + <li><a href="../../page-dialogs.html">Dialogs</a></li> + <li><a href="../../page-cache.html">Prefetching & caching pages</a></li> + <li><a href="../../page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="../../page-dynamic.html">Dynamically Injecting Pages</a></li> + <li><a href="../../page-scripting.html">Scripting pages</a></li> + <li data-theme="a"><a href="../../pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="e"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/phonegap.html b/libs/js/jquery-mobile-1.1.0/docs/pages/phonegap.html new file mode 100644 index 00000000..51a53b31 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/phonegap.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - Phonegap</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>PhoneGap apps</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + + + <h2>Building PhoneGap apps with jQuery Mobile</h2> + + <p><a href="http://phonegap.com/" rel="external">PhoneGap</a> is an HTML5 app platform that allows developers to author native applications with web technologies and get access to APIs and app stores. Applications are built as normal HTML pages and packaged up to run as a native application within a UIWebView or WebView (a chromeless browser, referred to hereafter as a webview). Since PhoneGap is frequently used in conjunction with jQuery Mobile, we wanted to offer a few tips and recommendations to help you get staretd. </p> + + <p>The initial application document is loaded by the PhoneGap application by a local file:// URL. This means that if you want to pull in pages from your company's remote server (phone home) you will have to refer to them with absolute URLs to your server. Because your document originates from a file:// URL, loading pages or assets from your remote server is considered a cross-domain request that can be blocked in certain scenarios. </p> + + <p>Your ability to access cross-domain pages from within a Phone Gap jQuery Mobile application is controlled by two key things: <code>$.support.cors</code> and <code>$.mobile.allowCrossDomainPages</code>, and can also be influenced by the white list feature in later builds of PhoneGap.</p> + + <h2>$.support.cors</h2> + + <p>In jQuery core, there is a <a href="http://api.jquery.com/jQuery.support/" rel="external">$.support.cors</a> boolean that indicates whether or not jQuery thinks the browser supports the W3C "<a hre="http://www.w3.org/TR/cors/" rel="external">Cross-Origin Resource Sharing</a>" feature to support cross-domain requests.</p> + + <p>Since jQuery Mobile relies on jQuery core's $.ajax() functionality, <code>$.support.cors</code> must be set to <code>true</code> to tell <code>$.ajax</code> to load cross-domain pages. We've heard reports that webviews on some platforms, like BlackBerry, support cross-domain loading, but that jQuery core incorrectly sets <code>$.support.cors</code> value to <code>false</code> which disables cross-domain $.ajax() requests and will cause the page or assets to fail to load. </p> + + <h2>$.mobile.buttonMarkup.hoverDelay</h2> + + <p>If you find that the button down/hover state (lists, buttons, links etc) feels sluggish the <code>$.mobile.buttonMarkup.hoverDelay</code> setting might be of use. It will decrease the time between the touch event and the application of the relevant class but will also result in a higher chance that the same class will be applied even when the user is scrolling (eg, over a long list of links).</p> + + <h2>$.mobile.allowCrossDomainPages</h2> + + <p>When jQuery Mobile attempts to load an external page, the request runs through <code>$.mobile.loadPage()</code>. This will only allow cross-domain requests if the <code>$.mobile.allowCrossDomainPages</code> configuration option is set to <code>true</code>. Because the jQuery Mobile framework tracks what page is being viewed within the browser's location hash, it is possible for a cross-site scripting (XSS) attack to occur if the XSS code in question can manipulate the hash and set it to a cross-domain URL of its choice. This is the main reason that the default setting for <code>$.mobile.allowCrossDomainPages</code> is set to <code>false</code>.</p> + + <p>So in PhoneGap apps that must "phone home" by loading assets off a remote server, both the <code>$.support.cors</code> AND <code>$.mobile.allowCrossDomainPages</code> must be set to <code>true</code>. The <code>$.mobile.allowCrossDomainPages</code> option must be set before any cross-domain request is made so we recommend wrapping this in a <code>mobileinit</code> handler:</p> + +<pre><code>$( document ).bind( "mobileinit", function() { + // Make your jQuery Mobile framework configuration changes here! + + $.mobile.allowCrossDomainPages = true; +});</code></pre> + + <h2>PhoneGap White Listing</h2> + + <p>PhoneGap 1.0 introduced the idea of white-listing servers that its internal webview is allowed to make cross-domain requests to. You can find info about it here on the <a href="http://wiki.phonegap.com/w/page/40796976/Install%20the%20latest%20%28trunk%29%20source%20of%20iOS%20PhoneGap">PhoneGap wiki</a>:</p> + + <p>However, not all platforms support this white-listing feature so check the PhoneGap documentation for details. Older versions of PhoneGap prior to 1.0 defaulted to allowing cross-domain requests to any server.</p> + + <h2>Still having issues?</h2> + + <p>Here are a few more tips that aren't specifically related to PhoneGap but are good to know:</p> + + <p><strong>We recommend disabling the <a href="../api/globalconfig.html">pushState feature</a> for installed apps </strong>because there are edge cases where this feature can cause unexpected navigation behavior and since URLs aren't visible in a webview, it's not worth keeping this active in these situations. </p> + + <p><strong>Android enforces a timeout when loading URLs in a webview</strong> which may be too short for your needs. You can change this timeout by editing a Java class generated by the Eclipse plugin for Android:</p> + + <code>super.setIntegerProperty("loadUrlTimeoutValue", 60000);</code> + + + + </div> + <!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="page-titles.html">Page titles</a></li> + <li><a href="page-links.html">Linking pages</a></li> + <li><a href="page-transitions.html">Page transitions</a></li> + <li><a href="page-dialogs.html">Dialogs</a></li> + <li><a href="page-cache.html">Prefetching & caching pages</a></li> + <li><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li><a href="page-scripting.html">Scripting pages</a></li> + <li data-theme="a"><a href="phonegap.html">PhoneGap apps</a></li> + <li><a href="touchoverflow.html">touchOverflow feature</a></li> + <li><a href="pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="c"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/touchoverflow.html b/libs/js/jquery-mobile-1.1.0/docs/pages/touchoverflow.html new file mode 100644 index 00000000..e552a840 --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/touchoverflow.html @@ -0,0 +1,127 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Docs - touchOverflow</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + + <div data-role="page" class="type-interior"> + + <div data-role="header" data-theme="f"> + <h1>touchOverflow</h1> + <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a> + <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a> + </div><!-- /header --> + + <div data-role="content"> + <div class="content-primary"> + + <div class="ui-body ui-body-e"> + <h2>touchOverflowEnabled: Deprecated in 1.1.0</h2> + + <p>Prior to jQuery Mobile 1.1, true fixed toolbar support was contingent on native browser support for the CSS property <code>overflow-scrolling: touch</code>, which is currently only supported in iOS5. As of version 1.1, jQuery Mobile no longer uses this CSS property at all. We've removed all internal usage of this property in the framework, but we've left it defined globally on the $.mobile object to reduce the risk that its removal will cause trouble with existing applications. This property is flagged for removal, so please update your code to no longer use it. The support test for this property, however, remains defined under <code>$.support</code> and we have no plans to remove that test at this time. </p> + </div> + + <h2 id="ios5">touchOverflow: Improved page transitions and true fixed toolbars</h2> + + <p>Currently, both the page you're viewing and the one you're navigating to are sitting next to each other in the viewport, which lets us leverage native scrolling for the broadest possible device support. The downside to this approach is that since both pages share the same viewport, when a page transition starts, we must first scroll to the top of the document, then start animating to ensure that the pages are lined up vertically. If you hit the Back button, we need to scroll up, transition, then restore the previous scroll position. Since mobile browsers are pretty slow, these scroll movements can detract from the flow of the experience.</p> + + <p>The way to really improve this situation is to have both pages in separate containers, each with its own internal scroll bar. The means no more scrolling the document or needing to restore scroll positions for a smoother experience. It also has the benefit of making fixed toolbars very easy to implement by simply placing them outside the containers with internal scrolling.<p> + + <h2>How it works</h2> + + <p>To leverage iOS5′s support for a touch-targeted version of <code>overflow:auto</code> which allows for internal scrolling regions with the native momentum scrolling, we've added a feature called touchOverflow that leverages these new CSS capabilities to enable us to bring both true “fixed” toolbars and super smooth transitions to iOS5, all by using web standards and very little additional code.</p> + + <p>A feature called <code>touchOverflowEnabled</code> is designed to leverage the upcoming wave of browsers that support overflow scrolling in CSS. Note that this feature is off by default to give us more time to test and debug this for best performance but we hope to turn it on by default at a later point. Here's how to enable this <a href="../api/globalconfig.html">global option</a>:</p> + +<pre><code><script> +$(document).bind("mobileinit", function(){ +<strong> $.mobile.touchOverflowEnabled = true; +</strong>}); +</script></code></pre> + + <p>When this feature is activated, the framework looks for browser support for both the <code>overflow:</code> and <code>-webkit-overflow-scrolling:touch</code> CSS properties. In browsers that support both, it switches to a dual page container model with native overflow: scrolling within each, which brings true fixed toolbars smooth transitions. Coupled with iOS’s already excellent hardware-accelerated transitions, it's now possible to build interfaces that are very close to native performance.</p> + + <p>To demo this feature, check out <a href="../config/touchOverflow.html">this page</a> in iOS5.</p> + + <h2>A few downsides</h2> + + <p>Nothing is perfect, especially a new feature, so there are a few downsides to keep in mind. When activating this feature:</p> + + <ul> + <li>Sometimes child elements like lists and forms wouldn't render when embedded in a page with <code>overflow:</code> in iOS5. This was a pretty random phenomenon but is not acceptable so we've added a <code>translate-z</code> CSS property which forces iOS to render the contents. The downside with this fix is that when a transform is applied, all elements are set to position:relative which can cause issues in your layout.</li> + <li>The <code>-webkit-overflow-scrolling:touch</code> property seems to disable the events to scroll you to the top of the page when the time is tapped in the status bar. We hope Apple fixes this because it's a very useful feature.</li> + <li>When <code>overflow:</code> and <code>-webkit-overflow-scrolling:touch</code> properties are set, iOS appears to ignore any overflow:hidden properties on the parent, which is the page in our case. So if you have an image or code block that is wider than the viewport, horizontal scrolling will be seen. </li> + <li>When this feature is active, we are disabling user zoom by manipulating the meta viewport tag because both the toolbars and page content can easily be zoomed to an odd size and it's very difficult to zoom back out. Even though we believe in allowing users to zoom the page, alleviating the usability concerns we have with fixed toolbars and overflow containers is more important.</li> + <li>Scroll position can be lost when going back to a page that has been re-loaded. If DOM caching is on, this shouldn't be as much of an issue.</li> + <li>This is still an experimental feature, so not all the kinks have been worked out yet. Use with caution and test thoroughly.</li> + </ul> + + + + <h2>Don’t other mobile platforms already support overflow?</h2> + <p>Yes, but there’s a catch. Both Android Honeycomb and the Blackberry PlayBook support <code>overflow:</code> properties, but we found in testing that their implementation of overflow wasn't smooth enough, so pages would stutter and hang during scrolling, leading to an unusable experience. We're working with device makers to ensure that they are included when performance improves.</p> + <p>More importantly, targeting overflow correctly is a major issue. If we simply placed an <code>overflow: auto</code> CSS rule on the pages, other popular mobile platforms like older versions of Android and iOS would essentially just clip off the content and make it effectively inaccessible (yes, you can do a two-finger scroll gesture in iOS but nobody knows that). The smart thing about Apple’s implementation for iOS5 is that they added an additional CSS property <code>-webkit-overflow-scrolling:touch</code> that allows us to test for this touch scrolling property and, if supported, add in the <code>overflow</code> rules for just those browsers. This is the only safe way to target overflow without resorting to complex and unmaintainable user agent detection.</p> + <p>We will be working with device and browser makers to encourage support for <em>both</em> these CSS-based properties because we strongly believe that this a critical piece needed to build rich mobile web apps. The project will add any vendor-prefixed additions to touch scrolling property if, for example, Opera, Firefox or Microsoft added this support. Once people see how much better page transitions and fixed toolbars are on iOS5, we’re hoping this will be supported quickly by other browsers. JS-based scroller scripts may still have a place in this new world as a polyfill for browsers that don’t yet support these new CSS capabilities but we see this as a brief, interim tool in the evolution of the mobile web.</p> + + + + <h2>Debugging touchOverflow</h2> + <p>Generally touchOverflow is only enabled on devices that support touch-scrolling of overflow areas, not desktop browsers. This can make it difficult to debug problems with the touchOverflow feature. To enable touchOverflow on all browsers, use the following code: + +<pre><code><script> +$(document).bind("mobileinit", function() { + <strong>$.support.touchOverflow = true;</strong> + $.mobile.touchOverflowEnabled = true; +}); +</script></code></pre> + + + </div><!--/content-primary --> + + <div class="content-secondary"> + + <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d"> + + <h3>More in this section</h3> + + <ul data-role="listview" data-theme="c" data-dividertheme="d"> + + <li data-role="list-divider">Pages & Dialogs</li> + <li><a href="page-anatomy.html">Anatomy of a page</a></li> + <li><a href="page-template.html" data-ajax="false">Single page template</a></li> + <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li> + <li><a href="page-titles.html">Page titles</a></li> + <li><a href="page-links.html">Linking pages</a></li> + <li><a href="page-transitions.html">Page transitions</a></li> + <li><a href="page-dialogs.html">Dialogs</a></li> + <li><a href="page-cache.html">Prefetching & caching pages</a></li> + <li><a href="page-navmodel.html">Ajax, hashes & history</a></li> + <li><a href="page-dynamic.html">Dynamically injecting pages</a></li> + <li><a href="page-scripting.html">Scripting pages</a></li> + <li><a href="phonegap.html">PhoneGap apps</a></li> + <li data-theme="a"><a href="touchoverflow.html">touchOverflow feature</a></li> + <li><a href="pages-themes.html">Theming pages</a></li> + </ul> + </div> + </div> + + </div><!-- /content --> + + <div data-role="footer" class="footer-docs" data-theme="c"> + <p>© 2011-12 The jQuery Foundation</p> + </div> + + </div><!-- /page --> + + </body> + </html> diff --git a/libs/js/jquery-mobile-1.1.0/docs/pages/transition-success.html b/libs/js/jquery-mobile-1.1.0/docs/pages/transition-success.html new file mode 100644 index 00000000..23eac4aa --- /dev/null +++ b/libs/js/jquery-mobile-1.1.0/docs/pages/transition-success.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery Mobile Framework - Dialog Example</title> + <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" /> + <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> + + <script src="../../js/jquery.js"></script> + <script src="../../docs/_assets/js/jqm-docs.js"></script> + <script src="../../js/"></script> + +</head> +<body> + +<div data-role="page"> + + <div data-role="header" data-theme="e"> + <h1>Ta-da!</h1> + </div><!-- /header --> + + <div data-role="content" data-theme="e"> + <p>That was an animated page transition effect that we added with a <code>data-transition</code> attribute on the link.</p> + <p>Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.</p> + <p>What do you think?</p> + <a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back">I like it</a> + </div> +</div> + + +</body> +</html> |