RubyGems - RubyApp - Versions diffs - 0.6.67 → 0.6.68 - Mend

RubyApp 0.6.67 → 0.6.68

Files changed (460) hide show

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/pages/page-dialogs.html DELETED Viewed

@@ -1,129 +0,0 @@
-<!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-1.1.0.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/jquery.mobile-1.1.0.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>
-			&lt;a href=&quot;foo.html&quot; data-rel=&quot;dialog&quot;&gt;Open dialog&lt;/a&gt;
-			</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>
-&lt;a href=&quot;foo.html&quot; data-rel=&quot;dialog&quot; data-transition=&quot;pop&quot;&gt;Open dialog&lt;/a&gt;
-</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 &amp; 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 &amp; 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 &amp; 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 &amp; caching pages</a></li>
-								<li><a href="page-navmodel.html">Ajax, hashes &amp; 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>&copy; 2011-12 The jQuery Foundation</p>
-</div>
-</div><!-- /page -->
-</body>
-</html>

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/pages/page-dynamic.html DELETED Viewed

@@ -1,300 +0,0 @@
-<!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-1.1.0.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/jquery.mobile-1.1.0.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 &quot;beforechangepage&quot;.</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 &quot;changepage&quot;.</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: &quot;Animals&quot;,
-		description: &quot;All your favorites from aardvarks to zebras.&quot;,
-		items: [
-			{
-				name: &quot;Pets&quot;
-			},
-			{
-				name: &quot;Farm Animals&quot;
-			},
-			{
-				name: &quot;Wild Animals&quot;
-			}
-		]
-	},
-	colors: {
-		name: &quot;Colors&quot;,
-		description: &quot;Fresh colors from the magic rainbow.&quot;,
-		items: [
-			{
-				name: &quot;Blue&quot;
-			},
-			{
-				name: &quot;Green&quot;
-			},
-			{
-				name: &quot;Orange&quot;
-			},
-			{
-				name: &quot;Purple&quot;
-			},
-			{
-				name: &quot;Red&quot;
-			},
-			{
-				name: &quot;Yellow&quot;
-			},
-			{
-				name: &quot;Violet&quot;
-			}
-		]
-	},
-	vehicles: {
-		name: &quot;Vehicles&quot;,
-		description: &quot;Everything from cars to planes.&quot;,
-		items: [
-			{
-				name: &quot;Cars&quot;
-			},
-			{
-				name: &quot;Planes&quot;
-			},
-			{
-				name: &quot;Construction&quot;
-			}
-		]
-	}
-};
-</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>
-  	&lt;h2&gt;Select a Category Below:&lt;/h2&gt;
-  	&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot;&gt;
-    	&lt;li&gt;&lt;a href=&quot;#category-items?category=animals&quot;&gt;Animals&lt;/a&gt;&lt;/li&gt;
-    	&lt;li&gt;&lt;a href=&quot;#category-items?category=colors&quot;&gt;Colors&lt;/a&gt;&lt;/li&gt;
-    	&lt;li&gt;&lt;a href=&quot;#category-items?category=vehicles&quot;&gt;Vehicles&lt;/a&gt;&lt;/li&gt;
-    &lt;/ul&gt;
-</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( &quot;pagebeforechange&quot;, 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 === &quot;string&quot; ) {
-		// 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=/, &quot;&quot; ),
-		// 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( /\?.*$/, &quot;&quot; );
-	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( &quot;:jqmData(role=header)&quot; ),
-			// Get the content area element for the page.
-			$content = $page.children( &quot;:jqmData(role=content)&quot; ),
-			// The markup we are going to inject into the content
-			// area of the page.
-			markup = &quot;&lt;p&gt;&quot; + category.description + &quot;&lt;/p&gt;&lt;ul data-role='listview' data-inset='true'&gt;&quot;,
-			// 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 &lt; numItems; i++ ) {
-			markup += &quot;&lt;li&gt;&quot; + cItems[i].name + &quot;&lt;/li&gt;&quot;;
-		}
-		markup += &quot;&lt;/ul&gt;&quot;;
-		// Find the h1 element in our header and inject the name of
-		// the category into it.
-		$header.find( &quot;h1&quot; ).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( &quot;:jqmData(role=listview)&quot; ).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 &amp; 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 &amp; caching pages</a></li>
-								<li><a href="page-navmodel.html">Ajax, hashes &amp; 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>&copy; 2011-12 The jQuery Foundation</p>
-			</div>
-			</div><!-- /page -->
-			</body>
-			</html>

data/lib/ruby_app/resources/elements/mobile/document/jquery.mobile-1.1.0/demos/docs/pages/page-links.html DELETED Viewed

@@ -1,147 +0,0 @@
-<!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-1.1.0.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/jquery.mobile-1.1.0.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 &mdash; where ordinary links will "just work" without any special configuration &mdash; 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>&lt;a href=&quot;multipage.html&quot; rel=&quot;external&quot;&gt;Multi-page link&lt;/a&gt;</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 &amp; 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 &amp; caching pages</a></li>
-								<li><a href="page-navmodel.html">Ajax, hashes &amp; 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>&copy; 2011-12 The jQuery Foundation</p>
-			</div>
-			</div><!-- /page -->
-			</body>
-			</html>