Demos: Added links to API docs

Fixes jquery-archivegh-7441
Closes jquery-archivegh-7450

Author: jaspermdegroot

demos/_assets/css/jqm-demos.css

@@ -279,6 +279,11 @@
     font-weight: 300;
 }
 
+/* API docs links */
+.jqm-api-docs-link {
+	float: right;
+}
+
 /* Quick links */
 .jqm-demos .jqm-content .jqm-deeplink {
 	display: block;

demos/_assets/js/jqm-demos.js

@@ -55,7 +55,10 @@ $( document ).on( "pagecreate", ".jqm-demos", function( event ) {
 		words = version.split( "-" ),
 		ver = words[0],
 		str = words[1] || "",
-		text = ver;
+		text = ver,
+		versionNumbers = ver.split( "." ),
+		apiVersion = versionNumbers[ 0 ] + "." + versionNumbers[ 1 ],
+		href;
 
 	// Insert jqm version in header
 	if ( str.indexOf( "rc" ) == -1 ) {
@@ -70,6 +73,15 @@ $( document ).on( "pagecreate", ".jqm-demos", function( event ) {
 
 	$( ".jqm-version" ).html( text );
 
+	// Insert version in API documentation links
+	if ( version !== "dev" ) {
+		$( ".jqm-api-docs-link" ).each(function() {
+			href = $( this ).attr( "href" ).replace( "api.jquerymobile.com/", "api.jquerymobile.com/" + apiVersion + "/" );
+
+			$( this ).attr( "href", href );
+		});
+	}
+
 	// Global navmenu panel
 	$( ".jqm-navmenu-panel ul" ).listview();
 

demos/button-markup/index.php

@@ -30,7 +30,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Button markup</h1>
+		<h1>Button markup <a href="http://api.jquerymobile.com/classes/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>Add classes to style <code>a</code> and <code>button</code> elements. <code>input</code> buttons are enhanced by the button widget. See <a href="../button/" data-ajax="false">this page</a> for examples.</p>
 

demos/button/index.php

@@ -24,7 +24,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Input buttons</h1>
+		<h1>Input buttons <a href="http://api.jquerymobile.com/button/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>Examples of how to style input buttons; <code>input</code> elements with <code>type="button"</code>, <code>type="submit"</code>, or <code>type="reset"</code>. See <a href="../button-markup/">button markup</a> for examples of <code>a</code> and <code>button</code> elements.</p>
 

demos/checkboxradio-checkbox/index.php

@@ -24,7 +24,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Checkbox</h1>
+		<h1>Checkbox <a href="http://api.jquerymobile.com/checkboxradio/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>Checkbox inputs are used to provide a list of options where more than one can be selected. Checkbox buttons are enhanced by the checkboxradio widget.</p>
 

demos/checkboxradio-radio/index.php

@@ -24,7 +24,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Radio buttons</h1>
+		<h1>Radio buttons <a href="http://api.jquerymobile.com/checkboxradio/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>Radio inputs are used to provide a list of options where only a single option can be selected. Radio buttons are enhanced by the checkboxradio widget.</p>
 

demos/collapsible/index.php

@@ -27,7 +27,7 @@
 
     <div role="main" class="ui-content jqm-content">
 
-        <h1>Collapsible</h1>
+        <h1>Collapsible <a href="http://api.jquerymobile.com/collapsible/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
         <p>Collapsibles are simple widgets that allow you to expand or collapse content when tapped and are useful in mobile to provide a compact presentation of content.</p>
 

demos/collapsibleset/index.php

@@ -24,7 +24,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Collapsible set</h1>
+		<h1>Collapsible set <a href="http://api.jquerymobile.com/collapsibleset/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>An accordion is created in jQuery Mobile by grouping a series of individual collapsibles into set.</p>
 

demos/controlgroup/index.php

@@ -33,7 +33,7 @@
 
 	    <div role="main" class="ui-content jqm-content">
 
-        <h1>Controlgroup</h1>
+        <h1>Controlgroup <a href="http://api.jquerymobile.com/controlgroup/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
         <p>Controlgroups are used to visually group a set of buttons to form a single block that looks contained like a navigation component.
         </p>

demos/filterable/index.php

@@ -24,7 +24,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Filterable</h1>
+		<h1>Filterable <a href="http://api.jquerymobile.com/filterable/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>
 			The children of any element can be filtered by setting the attribute <code>data-filter="true"</code> on the element. By default, the text contained in each child is used for filtering, however, you also have the option of setting the attribute <code>data-filtertext</code> to a string value on any child that will be considered for filtering to associate custom filter text instead.</p>

demos/flipswitch/index.php

@@ -59,7 +59,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Flip switch</h1>
+		<h1>Flip switch <a href="http://api.jquerymobile.com/flipswitch/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element.
 			</p>

demos/grids-custom-responsive/index.php

@@ -118,7 +118,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-        <h1>Custom responsive grid</h1>
+        <h1>Custom responsive grid <a href="http://api.jquerymobile.com/responsive-grid/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
         <p>It's easy to extend the basic grid styles into a custom responsive layout by using CSS media queries to adjust the layout and design across various screen width breakpoints.</p>
 

demos/grids/index.php

@@ -24,7 +24,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Grids</h1>
+		<h1>Grids <a href="http://api.jquerymobile.com/grid-layout/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>The jQuery Mobile framework provides a simple way to build CSS-based columns that can also be responsive.
 			</p>

demos/icons/index.php

@@ -31,7 +31,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-        <h1>Icons</h1>
+        <h1>Icons <a href="http://api.jquerymobile.com/icons/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
         <p>A set of built-in icons in jQuery Mobile can be applied to buttons, collapsibles, listview buttons and more. There is an SVG and PNG image of each icon. By default the SVG icons, that look great on both SD and HD screens, are used. On platforms that don't support SVG the framework falls back to PNG icons.</p>
 

demos/listview/index.php

@@ -31,7 +31,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Listview</h1>
+		<h1>Listview <a href="http://api.jquerymobile.com/listview/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>A listview is coded as a simple unordered list (ul) or ordered list (ol) with a <code> data-role="listview"</code> attribute and has a wide range of features.
 			</p>

demos/loader/index.php

@@ -44,7 +44,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Loader</h1>
+		<h1>Loader <a href="http://api.jquerymobile.com/loader/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>A small loading overlay displayed when jQuery Mobile loads in content via Ajax, or for use in custom notifications.
 			</p>

demos/navbar/index.php

@@ -34,7 +34,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Navbar</h1>
+		<h1>Navbar <a href="http://api.jquerymobile.com/navbar/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar.</p>
 

demos/navigation/index.php

@@ -74,7 +74,7 @@
 	alterContent( data.state.url );
 });</code></pre>
 
-		<h2>Event Example </h2>
+		<h2>Event Example <a href="http://api.jquerymobile.com/navigate/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h2>
 
 		<p>jQuery Mobile provides the <code>navigate</code> event as a wrapper for both <code>hashchange</code> and <code>popstate</code>. That is, where a binding to both events would be required to support browsers with and without <code>popstate</code> only one binding to <code>navigate</code> is necessary. In this example, altering the hash will trigger the <code>popstate</code> or <code>hashchange</code> event depending on the browser, but only a single <code>navigate</code> binding is necessary. Make sure to use the back button after alterting the hash to see that the event is fired in both cases.</p>
 
@@ -95,7 +95,7 @@
 
     <a href="#" id="event-example" class="ui-shadow ui-btn ui-corner-all">Event Example</a>
 
-		<h2>Method Example </h2>
+		<h2>Method Example <a href="http://api.jquerymobile.com/jQuery.mobile.navigate/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h2>
 
     <p>jQuery Mobile provides the <code>$.mobile.navigate</code> method as a means to track history and receive additional information along with <code>navigate</code> events. In this example, when the method example link is clicked, the url will be changed twice. The first time will it will store additional aribitrary information along with the URL and hash stored by the method. The second time it will simply change the url and store the URL and hash. When the browser moves backward through history the <code>navigate</code> event is triggered as in the event example above <em>but</em> along with it comes information about the direction of history traversal, the url, the hash, and the arbitrary data stored with the first call to the navigate method.</p>
 

demos/pages/index.php

@@ -24,7 +24,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Pages</h1>
+		<h1>Pages <a href="http://api.jquerymobile.com/page/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>The page is the primary unit of interaction in jQuery Mobile and is used to group content into logical views that can be animated in and out of view with page transitions. A HTML document may start with a single "page" and the Ajax navigation system will load additional pages on demand into the DOM as users navigate around. Alternatively, a HTML document can be built with multiple "pages" inside it and the framework will transition between these local views with no need to request content from the server.</p>
 

demos/panel/index.php

@@ -36,7 +36,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Panel</h1>
+		<h1>Panel <a href="http://api.jquerymobile.com/panel/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>Flexible by design, panels can be used for navigation, forms, inspectors and more.</p>
 

demos/popup/index.php

@@ -49,7 +49,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Popup</h1>
+		<h1>Popup <a href="http://api.jquerymobile.com/popup/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>The popup widget can be used for various types of popups. From a small tooltip popup to a large photo lightbox.</p>
 

demos/rangeslider/index.php

@@ -24,7 +24,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Range slider</h1>
+		<h1>Range slider <a href="http://api.jquerymobile.com/rangeslider/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>Range slider offer two handles to set a min and max value along a numeric continuum.
 			</p>

demos/selectmenu/index.php

@@ -24,7 +24,7 @@
 
     <div role="main" class="ui-content jqm-content">
 
-        <h1>Select menu</h1>
+        <h1>Select menu <a href="http://api.jquerymobile.com/selectmenu/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
         <p>The select menu is based on a native select element, which is hidden from view and replaced with a custom-styled select button. Tapping it opens the native menu. There is also a <a href="../selectmenu-custom/">custom select menu</a> widget, which also replaces the native dropdown.
         </p>

demos/slider/index.php

@@ -41,7 +41,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Slider</h1>
+		<h1>Slider <a href="http://api.jquerymobile.com/slider/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>Sliders are used to enter numeric values along a continuum and can also be dual handle <a href="../rangeslider/">range sliders</a> or <a href="../slider-flipswitch/">flip switches</a>.
 			</p>

demos/table-column-toggle/index.php

@@ -24,7 +24,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Table: Column Toggle</h1>
+		<h1>Table: Column Toggle <a href="http://api.jquerymobile.com/table-columntoggle/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>The column toggle table mode selectively hides columns at narrower widths as a sensible default but also offers a menu to let users manually control which columns they want to see.</p>
 

demos/table-reflow/index.php

@@ -24,7 +24,7 @@
 
 	<div class="ui-content jqm-content" role="main">
 
-		<h1>Table: Reflow</h1>
+		<h1>Table: Reflow <a href="http://api.jquerymobile.com/table-reflow/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>The reflow table mode works by collapsing the table columns into a stacked presentation that looks like blocks of label/data pairs for each row.
 			</p>

demos/tabs/index.php

@@ -36,7 +36,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Tabs</h1>
+		<h1>Tabs <a href="http://api.jquerymobile.com/tabs/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>The jQuery mobile tabs widget is actually just an extension of the jQuery ui tabs widget and takes all the same options and methods.</p>
 		<h2>Use navbar for tabs</h2>

demos/textinput/index.php

@@ -24,7 +24,7 @@
 
     <div role="main" class="ui-content jqm-content">
 
-        <h1>Text inputs</h1>
+        <h1>Text inputs <a href="http://api.jquerymobile.com/textinput/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
         <p>Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device.
         </p>

demos/theme-default/index.php

@@ -59,7 +59,7 @@
 <div data-role="page" id="testpage">
 
 	<div data-role="header">
-		<h1>Default theme</h1>
+		<h1>Default theme <a href="http://api.jquerymobile.com/theme/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 		<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">Back</a>
 		<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-left ui-icon-gear">Button</a>
 		<div data-role="navbar">

demos/toolbar/index.php

@@ -24,7 +24,7 @@
 
 	<div role="main" class="ui-content jqm-content">
 
-		<h1>Toolbar</h1>
+		<h1>Toolbar <a href="http://api.jquerymobile.com/toolbar/" class="jqm-api-docs-link ui-btn ui-btn-icon-right ui-icon-carat-r ui-nodisc-icon ui-alt-icon ui-btn-inline ui-corner-all ui-mini">API</a></h1>
 
 		<p>The toolbar widget is used to enhance headers and footers.</p>