28 demos/map-geolocation/index.php
View file
@@ -16,47 +16,47 @@
<script src="../../js/"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
/*
* Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
/*
* Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
* Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
*/

$( document ).on( "pageinit", "#map-page", function() {
var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434); // Default to Hollywood, CA when no geolocation support

if ( navigator.geolocation ) {
function success(pos) {
// Location found, show map with these coordinates
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}

function fail(error) {
drawMap(defaultLatLng); // Failed to find location, show default map
}

// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
} else {
drawMap(defaultLatLng); // No geolocation support, show default map
drawMap(defaultLatLng); // No geolocation support, show default map
}

function drawMap(latlng) {
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Greetings!"
});
}

});
</script>
</head>
@@ -81,7 +81,7 @@ function drawMap(latlng) {
<li>How to plot a point on the map using your current location.</li>
<li>How to display a default location (Hollywood, CA) if Geolocation is unavailable or a user declines to share it.</li>
</ul>

<a href="#map-page" data-ajax="false" role="button" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini ui-icon-arrow-r ui-btn-icon-right">Open demo</a>

<div data-demo-html="#map-page" data-demo-js="true" data-demo-css="true"></div><!--/demo-html -->
@@ -101,11 +101,11 @@ function drawMap(latlng) {
<div data-role="header" data-theme="c">
<h1>Maps</h1>
</div>

<div data-role="content" id="map-canvas">
<!-- map loads here... -->
</div>
</div>

</body>
</html>
32 demos/map-list-toggle/index.php
View file
@@ -8,17 +8,17 @@
<style>
.segmented-control { text-align:center; }
.segmented-control .ui-controlgroup { display:inline; margin:.2em 0px; }

#map-page { width:100%; height:100%; }
#map-canvas { width:100%; height:100%; margin-top:-30px; padding:0px!important; }
#gmap-marker-link { color:#00a0df; text-decoration:none; }

.ui-gmap-canvas { width:100%; height:100%; }
.ui-gmap-infobox { display:none; }

#show-more .ui-li-heading { text-align:center; }
#show-more .ui-icon { visibility:hidden; }

.ui-li-has-count .ui-li-count { border-color:transparent; }
.wrap { white-space:normal; }
</style>
@@ -35,31 +35,31 @@
$listSwitch = $( "#list-switch" ),
$map = $( "#map-canvas" ),
$list = $( "#list-canvas" );

$mapSwitch.on( "click", function( e ){
$map.show();
$map.gmap();
$list.hide();
});

$listSwitch.on( "click", function( e ){
$list.show();
$map.hide();
});

$( "#show-more a" ).on( "click", function( e ){
// Assume we already have a cached geolocation because it's not necessary for this example.
var location = location || {};
location.coords = location.coords || {};
location.coords.latitude = location.coords.latitude || {};
location.coords.longitude = location.coords.longitude || {};

JQM.geo.startIndex = $( "#list-results li" ).size() -1; // exclude show more list item
JQM.geo.showMore( location );
e.preventDefault();
});
});

/**
* Geolocation configuration
*/
@@ -68,11 +68,11 @@
location: "",
zip: "",
startIndex: "",

showMore: function(latlng) {
$.mobile.loading( "show" );
JQM.geo.location = latlng;

$.ajax({
url: "showMore.html?lat="+JQM.geo.location.coords.latitude+"&lon="+JQM.geo.location.coords.longitude+"&zip="+JQM.geo.zip+"&startIndex="+JQM.geo.startIndex,
success: function( response ) {
@@ -112,7 +112,7 @@
<li>How to load more list results and dynamically append them to an existing list.</li>
<li>How to display an info box on the map when a push pin is tapped.</li>
</ul>

<a href="#map-page" data-ajax="false" role="button" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini ui-icon-arrow-r ui-btn-icon-right">Open demo</a>

<div data-demo-html="#map-page" data-demo-js="true" data-demo-css="true"></div><!--/demo-html -->
@@ -139,7 +139,7 @@
</fieldset>
</div>
</div>
<div data-role="content" class="ui-content-list">
<div data-role="content" class="ui-content-list">
<div id="list-canvas">
<ul id="list-results" data-role="listview">
<li data-marker-info="44.811805,-93.176352">
@@ -212,16 +212,16 @@
</div>
</a>
</li>
<li id="show-more"><a href=""><h1>Show more</h1></a></li>
<li id="show-more"><a href=""><h1>Show more</h1></a></li>
</ul>
</div>
</div>
<div data-role="content" id="map-canvas" data-initial-view="44.80,-93.16,10" style="display:none;"></div>
<!-- Load map assets at bottom for performance -->
<script type="text/javascript" src="jquery.gmap.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.0/src/infobox_packed.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.0/src/infobox_packed.js"></script>
</div>

</body>
</html>
42 demos/map-list-toggle/jquery.gmap.js
View file
@@ -1,23 +1,23 @@
/* gmap plugin.
*
*
* $.gmap()
* $.gmap({ ...options... })
* $.gmap('addMarkers', data)
*
*
* The jQuery object being mapified must have an attribute: data-initial-view="lat,lng,zoom"
*
*
* Configuration options:
*
*
* loadingMessage: a string for the loading overlay. Default: "Loading..."
* autoAddMarkers: boolean. If true, a marker is automatically added for each item with the
* autoAddMarkers: boolean. If true, a marker is automatically added for each item with the
* attribute data-marker-info="lat,lng". If the element or any descendant has the class
* "ui-gmap-marker-content", then an infobox containing that content will be shown when
* the marker is clicked (this content is cloned). The HTML contents of a subelement with
* the marker is clicked (this content is cloned). The HTML contents of a subelement with
* class "ui-gmap-marker-title" will be used for the mouseover tooltip.
* infoWindowConfig: Object containing a list of properties for the info window (if applicable).
*
*
* Markup requirements:
*
*
* 1. The class "ui-gmap" will be added to each element to which the plugin is applied.
*/
(function($) {
@@ -30,7 +30,7 @@
if (parts.length != 2) throw 'Invalid lat/lng: "'+string+'"';
var lat = parseFloat(parts[0]);
var lng = parseFloat(parts[1]);
if (isNaN(lat) || lat < -90 || lat > 90 || isNaN(lng) || lng < -180 || lng > 180)
if (isNaN(lat) || lat < -90 || lat > 90 || isNaN(lng) || lng < -180 || lng > 180)
throw 'Invalid lat/lng: "'+string+'"';
return new google.maps.LatLng(lat, lng);
}
@@ -42,7 +42,7 @@
var lat = parseFloat(parts[0]);
var lng = parseFloat(parts[1]);
var zoom = parseInt(parts[2]);
if (isNaN(lat) || lat < -90 || lat > 90 || isNaN(lng) || lng < -180 || lng > 180 || zoom < 3 || zoom > 30)
if (isNaN(lat) || lat < -90 || lat > 90 || isNaN(lng) || lng < -180 || lng > 180 || zoom < 3 || zoom > 30)
throw 'Invalid lat/lng/zoom: "'+string+'"';
return { center: new google.maps.LatLng(lat, lng), zoom: zoom };
}
@@ -74,29 +74,29 @@
}

// propagate resize events
$canvas.resize(function(e) {
google.maps.event.trigger(map, 'resize');
$canvas.resize(function(e) {
google.maps.event.trigger(map, 'resize');
});

// ideally we would like to say: "resize the map if it or any parent goes from hidden->visible"
// but we don't have that event available, so the caller needs to be responsible for now
},
addMarkersFromDOM: function() {
var data = [];

$('[data-marker-info]').each(function() {
try {
var pos = parseLatLng($(this).attr('data-marker-info'));
data.push({ position: pos,
title: $(this).find('.ui-gmap-marker-title').html(),
data.push({ position: pos,
title: $(this).find('.ui-gmap-marker-title').html(),
content: $(this).find('.ui-gmap-marker-info').andSelf().filter('.ui-gmap-marker-info').clone().get(0)
});
}
catch (e) {
console.log(e);
}
});

var config = $(this).data(pluginName);
var map = $(this).data(pluginName + '.map');
var bounds = $(this).gmap('addMarkers', data);
@@ -116,7 +116,7 @@
var map = $(this).data(pluginName + '.map');
var bounds = new google.maps.LatLngBounds();
var info = new InfoBox({
boxStyle: {
boxStyle: {
border: "1px solid black",
background: "white",
width: "220px",
@@ -149,14 +149,14 @@
return bounds;
}
};

var defaultConfig = {
autoAddMarkers: true,
zoomForSingleMarker: 15,
infoWindowConfig: { maxWidth: 175 }
};
$.fn[pluginName] = function() {

$.fn[pluginName] = function() {
if (arguments.length == 0) {
var config = $.extend({}, defaultConfig);
$(this).each(function() {
@@ -182,4 +182,4 @@
}
return this;
};
})(jQuery);
})(jQuery);
2 demos/map-list-toggle/showMore.html
View file
@@ -25,4 +25,4 @@ <h1 class="ui-gmap-marker-title wrap">Peoria Urgent Care</h1>
<span>6.5 miles</span>
</div>
</a>
</li>
</li>
13 demos/navigation-php-redirect/index.php
View file
@@ -50,22 +50,21 @@
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left" role="button">Menu</a>
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right" role="button">Search</a>
</div><!-- /header -->

<div data-role="content" class="jqm-content">

<h1>Redirection example: Source Page</h1>

<p>Clicking the link below will cause a page to be loaded from the server which contains a special instruction that is captured in the sample code to load the final redirection target page. Note that both the initial page (which contains the redirect) as well as the final redirect target page contain an intentional delay that should simulate network congestion and should allow jQuery Mobile enough time to display the loading indicator.</p>

<div data-demo-html="true" data-demo-js="#redirectCode" data-demo-php="source.php">
<a href="redirect.php?to=redirect-target.php" role="button" class="ui-shadow ui-btn ui-corner-all ui-btn-inline">Redirect</a>
</div><!--/demo-html -->

<p>Note: This is a PHP demo that will only work on a server and not in a build (i.e. the demos that come with each release).</p>

<p>Note: This is a PHP demo that will only work on a server and not in a build (i.e. the demos that come with each release).</p>

</div><!-- /content -->

<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
<p>Copyright 2013 The jQuery Foundation</p>
12 demos/navigation-php-redirect/redirect-target.php
View file
@@ -4,15 +4,15 @@
<!DOCTYPE html>
<html>
<head>

<title>Redirect Target</title>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>

</head>
<body>
<div data-role="page">
8 demos/navigation-php-redirect/redirect.php
View file
@@ -5,10 +5,10 @@
// ************************************************************************
sleep(2);

$dst = ( isset( $_GET[ "to" ] )
? $_GET[ "to" ]
: ( isset( $_POST[ "to" ] )
? $_POST[ "to" ]
$dst = ( isset( $_GET[ "to" ] )
? $_GET[ "to" ]
: ( isset( $_POST[ "to" ] )
? $_POST[ "to" ]
: false ) );
if ( $dst ) {
// **********************************************************************
2 demos/navigation/demo.js
View file
@@ -35,4 +35,4 @@
window.history.back();
});
});
})( jQuery );
})( jQuery );
4 demos/old-faq-pages/how-configure-phonegap-cordova.php
View file
@@ -79,9 +79,9 @@
<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 pushState feature 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>Use to following code to disable pushState. Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded.</p>

<pre><code>
$(document).bind("mobileinit", function(){
$.mobile.pushStateEnabled = false;
16 demos/old-faq-pages/how-does-theming-work.php
View file
@@ -56,7 +56,6 @@

<p>Most theme changes can be done using ThemeRoller, but it's also simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme CSS file. Just copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors as you see fit.</p>


<h3>Bars</h3>
<p>The default theme contains the following five bar styles:</p>

@@ -70,26 +69,19 @@

<p>By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the <code> data-theme</code> attribute to your header or footer and specify an alternate swatch letter ("b" or "d", for example) and the specified theme swatch color will be applied. </p>



<h3>Content Blocks</h3>
<p>The default theme also includes color swatch values for use in content blocks, designed to coordinate with the header color swatches in the theme. </p>

<div class="swatch-preview">
<div class="swatch-preview">
<div class="ui-body ui-body-a">Block A - <a href="#">Link</a></div>
<div class="ui-body ui-body-b">Block B - <a href="#">Link</a></div>
<div class="ui-body ui-body-c">Block C - <a href="#">Link</a></div>
<div class="ui-body ui-body-d">Block D - <a href="#">Link</a></div>
<div class="ui-body ui-body-e">Block E - <a href="#">Link</a></div>
</div><!-- end swatch-bars -->


<p>If a theme isn't specified on a content block, the framework will default to "c" to maximize contrast against the default header "a".</p>





<h2>Lists &amp; Buttons</h2>
<p>Each swatch also includes default styles for interactive elements like list items and buttons. Each button has styles for normal, hover/focus and pressed states.</p>

@@ -101,14 +93,10 @@
<a href="index.html" class="ui-btn ui-corner-all ui-btn-e ui-btn-icon-left ui-icon-arrow-l">Button E</a>
</div><!-- end swatch-bars -->


<p>By default, any button that's placed in a bar is automatically assigned a swatch letter that matches its parent bar or content box. This behavior makes it easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. Since form elements use the button styles, they will also adapt to their parent container.</p>

<p>If you want to add visual emphasis to a button, an alternate swatch color can be set by adding a <code> data-theme="a"</code> to the anchor. Once an alternate swatch color is set on a button in the markup, the framework won't override that color if the parent theme is changed, because you made a conscious decision to set it.</p>




<h3>Global "Active" state</h3>
<p>The jQuery Mobile framework uses a swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the individual swatch of the given widget. We apply this in navigation and form controls whenever there is a need to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it cannot be overridden via the markup; it is set once in the theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the <code>ui-btn-active</code> style rules.</p>

@@ -120,7 +108,6 @@
<label for="radio-choice-b">Off</label>
</fieldset>


<h3>Icons</h3>
<p>There is a core set of <a href="../widgets/icons/">standard icons</a> included in the framework that can be assigned to any button. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.</p>

@@ -144,7 +131,6 @@
<h3>Overriding themes</h3>
<p>The themes are meant as a solid starting point, but are meant to be customized. Since everything is controlled by CSS, it's easy to use a web inspector tool to identify the style properties you want to modify. The set of of theme classes (global) and semantic structural classes (widget-specific) added to elements provide a rich set of possible selectors against which to target style overrides. We recommend adding an external stylesheet to the <code>head</code>, placed <strong>after</strong> the structure and theme stylesheet references, that contain all your style overrides. This allows you to easily update to newer versions of the library because overrides are kept separate from the library code.</p>


</div><!-- /content -->

<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
5 demos/pages-dialog/dialog-alt.html
View file
@@ -22,11 +22,10 @@ <h1>Dialog</h1>
<div data-role="content" data-theme="b">
<h1>I'm themed</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.php" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Good for you</a>
<a href="docs-dialogs.php" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Don't care, really</a>
<a href="pages-dialog.php" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Good for you</a>
<a href="pages-dialog.php" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Don't care, really</a>
</div>
</div>


</body>
</html>
12 demos/pages-dialog/dialog-buttons.html
View file
@@ -20,18 +20,16 @@

<div data-role="page" class="dialog-actionsheet" data-dialog="true">


<div data-role="content" data-theme="a">
<h3>Share Photos</h3>
<a href="dialog-success.html" role="button" data-transition="slidedown" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Email</a>
<a href="dialog-success.html" role="button" data-transition="slidedown" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Upload to flickr</a>
<a href="dialog-success.html" role="button" data-transition="slidedown" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Share on Facebook</a>
<a href="dialog-success.html" role="button" data-transition="slidedown" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Tweet photo</a>
<a href="dialog-success.html" role="button" data-transition="slidedown" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Email</a>
<a href="dialog-success.html" role="button" data-transition="slidedown" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Upload to flickr</a>
<a href="dialog-success.html" role="button" data-transition="slidedown" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Share on Facebook</a>
<a href="dialog-success.html" role="button" data-transition="slidedown" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Tweet photo</a>

<a href="index.html" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Cancel</a>
</div>
</div>


</body>
</html>
3 demos/pages-dialog/dialog-corners.html
View file
@@ -21,10 +21,9 @@ <h1>Dialog</h1>
<div data-role="content">
<h1>No rounded corners</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.php" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Ok, I get it</a>
<a href="docs-dialogs.php" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Ok, I get it</a>
</div>
</div>


</body>
</html>
3 demos/pages-dialog/dialog-noclosebtn.html
View file
@@ -21,10 +21,9 @@ <h1>Dialog</h1>
<div data-role="content">
<h1>No close button</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" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Ok, I get it</a>
<a href="docs-dialogs.html" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Ok, I get it</a>
</div>
</div>


</body>
</html>
3 demos/pages-dialog/dialog-overlay.html
View file
@@ -23,9 +23,8 @@ <h1>Custom overlay</h1>
<p>This dialog adds <code>data-overlay-theme="b"</code> to the page container to set the overlay swatch color.</p>
<a href="docs-dialogs.html" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-btn-inline">I like it</a>
</div>

</div>

</div>

</body>
</html>
3 demos/pages-dialog/dialog-rightclosebtn.html
View file
@@ -21,10 +21,9 @@ <h1>Dialog</h1>
<div data-role="content">
<h1>Right close button</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" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Ok, I get it</a>
<a href="docs-dialogs.html" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Ok, I get it</a>
</div>
</div>


</body>
</html>
1 demos/pages-dialog/dialog-success.html
View file
@@ -28,6 +28,5 @@ <h3>Photos posted successfully</h3>
</div>
</div>


</body>
</html>
17 demos/pages-dialog/dialog-with-select.html
View file
@@ -21,23 +21,17 @@ <h1>Dialog select test</h1>
<div data-role="content" >
<a href="#bar" role="button" class="ui-btn ui-shadow ui-corner-all">Open dialog</a>
</div>

</div>






</div>

<div data-role="page" id="bar" data-dialog="true">

<div data-role="header" data-theme="b">
<h1>Sample Dialogs</h1>
</div>

<div data-role="content">

<form action>
<div class="ui-field-contain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
@@ -48,7 +42,7 @@ <h1>Sample Dialogs</h1>
<option value="overnight">Overnight</option>
</select>
</div>

<div class="ui-field-contain">
<label for="select-choice-3" class="select">Your state:</label>
<select name="select-choice-3" id="select-choice-3" data-native-menu="false">
@@ -104,13 +98,12 @@ <h1>Sample Dialogs</h1>
<option value="WY">Wyoming</option>
</select>
</div>

<a href="#foo" role="button" class="ui-btn ui-shadow ui-corner-all" data-rel="back">Real Submit Would go here</a>
</form>
<a href="#foo" role="button" class="ui-btn ui-shadow ui-corner-all" data-rel="back">Cancel</a>
</div>
</div>


</body>
</html>
7 demos/pages-dialog/dialog.html
View file
@@ -14,19 +14,18 @@
<body>

<div data-role="page" data-dialog="true">

<div data-role="header" data-theme="b">
<h1>Dialog</h1>
</div>

<div data-role="content">
<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="dialog/index.html" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Sounds good</a>
<a href="dialog/index.html" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Cancel</a>
<a href="dialog/index.html" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Sounds good</a>
<a href="dialog/index.html" role="button" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Cancel</a>
</div>
</div>


</body>
</html>
20 demos/pages-dialog/index.php
View file
@@ -32,29 +32,28 @@
<h1>Dialogs</h1>

<p>Any page can be presented as a modal dialog that appears to be suspended above the page by adding an attribute to the link that leads to the dialog page.</p>
<p>Note: The dialog widget is deprecated in 1.4 and will be removed in 1.5. The page widget now has an option dialog. These dialog demos don't reflect this change yet.</p>

<p><strong>Note:</strong> The dialog widget is deprecated in 1.4 and will be removed in 1.5. The page widget now has the <code>dialog</code> option which, when set to <code>true</code> will apply dialog styling to a page.</p>

<h2>Basics</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. By default the framework will also add a close button if the dialog has a header.</p>
<p>Any page can be presented as a modal dialog by adding the <code>data-dialog="true"</code> attribute to the page. 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. By default the framework will also add a close button if the dialog has a header.</p>

<p>
<code>
&lt;a href=&quot;foo.html&quot; data-rel=&quot;dialog&quot;&gt;Open dialog&lt;/a&gt;
&lt;a href=&quot;dialog.html&quot; class=&quot;ui-shadow ui-btn ui-corner-all ui-btn-inline&quot; data-transition=&quot;pop&quot;&gt;Open dialog&lt;/a&gt;
</code>
</p>

<a href="dialog.html" role="button" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="pop">Open dialog</a>
<a href="dialog.html" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" 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 <a href="page-transitions.html">page transition</a> 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", "slidedown" or "flip".</p>
<p>By default, the dialog will open with the same transition as a regular page. Like all pages, you can specify any <a href="page-transitions.html">page transition</a> 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", "slidedown" 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;
&lt;a href=&quot;dialog.html&quot; role=&quot;button&quot; class=&quot;ui-shadow ui-btn ui-corner-all ui-btn-inline&quot; <strong>data-transition=&quot;slidedown&quot;</strong>&gt;data-transition=&quot;slidedown&quot;&lt;/a&gt;
</code>

<div>
<a href="dialog.html" role="button" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="pop">data-transition="pop"</a>
<a href="dialog.html" role="button" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="slidedown">data-transition="slidedown"</a>
<a href="dialog.html" role="button" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="flip">data-transition="flip"</a>
</div>
@@ -67,17 +66,14 @@
<a href="dialog-noclosebtn.html" role="button" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="pop">No close button</a>

<p>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>
<p>For JavaScript-generated links, you can simply set the href attribute to "#" and use the <code>data-rel="back"</code> attribute.</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.
This option is used to customize the text of the close button which is helpful for translating this into different languages. This is displayed as an icon-only button by default so the text isn't visible on-screen, but is read by screen readers so this is an important accessibility feature.
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>Chaining Dialogs</h2>
<p>Please note: If a dialog opens another dialog (chaining), closing the last one with a link of type <code>data-rel="back"</code> will always navigate to the previous dialog until the root-page of type <code>data-role="page"</code> is reached. This guarantees a consistent navigation between dialogs.</p>

10 demos/pages-single-page/index.html
View file
@@ -21,17 +21,17 @@
<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>
<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="../pages-multi-page/" 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>
</html>
11 demos/pages/index.php
View file
@@ -33,11 +33,11 @@
<h2>Mobile page structure</h2>

<p>A jQuery Mobile site must start with an HTML5 <code>doctype</code> 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 <code>head</code>, references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off. The easiest way to get started is to link to files hosted on the jQuery CDN or for best performance, <a href="http://jquerymobile.com/download-builder/" rel="external">build a custom bundle</a>.</p>

<p>Here is how you can link to the CDN, where [version] should be replaced by the actual version. See also the <a href="http://jquerymobile.com/download/" rel="external">download</a> page on the web site.</p>

<pre><code>
<strong>&lt;!DOCTYPE html&gt; </strong>
&lt;html&gt;
@@ -56,7 +56,7 @@
</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=&quot;width=device-width, initial-scale=1&quot;</code>, the width will be set to the pixel width of the device screen. </p>

<pre><code>
@@ -65,9 +65,8 @@

<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>&lt;body&gt;</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. </p>

<pre><code>
@@ -78,7 +77,6 @@

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


<pre><code>
&lt;div data-role="page"&gt;
&lt;div data-role="header"&gt;...&lt;/div&gt;
@@ -87,7 +85,6 @@
&lt;/div&gt;</span>
</code></pre>


<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>
19 demos/panel-examples/index.html
View file
@@ -34,25 +34,24 @@ <h1>Header index.html</h1>
</div><!-- /header -->

<div data-role="page" id="a">



<div data-role="content">

<h2>Page A</h2>

<p>Content</p>

<a href="#inside-a" role="button" clalss="ui-btn ui-shadow ui-corner-all ui-btn-inline">Open right panel</a>

</div><!-- /content -->

<div data-role="panel" id="inside-a" data-position="right" data-display="overlay" data-theme="b">
<ul data-role="listview">
<li data-icon="back"><a href="#" data-rel="close">Close</a></li>
<li>Overlay</li>
</ul>
</div>

<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
@@ -62,9 +61,9 @@ <h2>Page A</h2>
</ul>
</div>
</div><!-- /header -->

</div><!-- /page -->

<div data-role="panel" id="outside" data-theme="b">
<ul data-role="listview">
<li data-icon="back"><a href="#" data-rel="close">Close</a></li>
23 demos/panel-examples/page-b.html
View file
@@ -20,7 +20,7 @@
</script>
</head>
<body>

<div data-role="header" data-position="fixed" data-theme="a">
<h1>Header page-b.html</h1>
<a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
@@ -32,27 +32,26 @@ <h1>Header page-b.html</h1>
</ul>
</div>
</div><!-- /header -->

<div data-role="page" id="b">

<div data-role="content">

<h2>Page B</h2>

<p>Content</p>

<a href="#inside-b" role="button" class="ui-btn ui-shadow ui-corner-all ui-btn-inline">Open right panel</a>


</div><!-- /content -->

<div data-role="panel" id="inside-b" data-position="right" data-display="push" data-theme="b">
<ul data-role="listview">
<li data-icon="back"><a href="#" data-rel="close">Close</a></li>
<li>Push</li>
</ul>
</div>

<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
@@ -62,16 +61,16 @@ <h2>Page B</h2>
</ul>
</div>
</div><!-- /header -->

</div><!-- /page -->

<div data-role="panel" id="outside" data-display="overlay" data-theme="b">
<ul data-role="listview">
<li data-icon="back"><a href="#" data-rel="close">Close</a></li>
<li>Overlay</li>
<li>page-b.html</li>
</ul>
</div>

</body>
</html>
22 demos/panel-examples/page-c.html
View file
@@ -28,7 +28,7 @@
<li>page-c.html</li>
</ul>
</div>

<div data-role="header" data-position="fixed" data-theme="a">
<h1>Header page-c.html</h1>
<a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
@@ -40,26 +40,26 @@ <h1>Header page-c.html</h1>
</ul>
</div>
</div><!-- /header -->

<div data-role="page" id="c">

<div data-role="panel" id="inside-c" data-position="right" data-theme="b">
<ul data-role="listview">
<li data-icon="back"><a href="#" data-rel="close">Close</a></li>
<li>Reveal</li>
</ul>
</div>

<div data-role="content">

<h2>Page C</h2>

<p>Content</p>

<a href="#inside-c" role="button" class="ui-btn ui-shadow ui-corner-all ui-btn-inline">Open right panel</a>

</div><!-- /content -->

<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
@@ -69,8 +69,8 @@ <h2>Page C</h2>
</ul>
</div>
</div><!-- /header -->

</div><!-- /page -->

</body>
</html>
1 demos/panel-external/external-2.php
View file
@@ -70,7 +70,6 @@
<!-- Here are a bunch of panels at the end, just before the close page tag -->

<!-- leftpanel1 -->


<?php include( '../jqm-panels.php' ); ?>

5 demos/panel-external/external.php
View file
@@ -149,7 +149,7 @@
@media (min-width:35em){

/* wrap on wide viewports once open */

.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
@@ -166,7 +166,7 @@
.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal {
width: auto;
}

/* disable "dismiss" on wide viewports */
.ui-panel-dismiss {
display: none;
@@ -193,7 +193,6 @@
<!-- Here are a bunch of panels at the end, just before the close page tag -->

<!-- leftpanel1 -->


<?php include( '../jqm-panels.php' ); ?>

2 demos/panel-styling/index.php
View file
@@ -141,7 +141,7 @@
<li>Set a background image for a page that contains a panel.</li>
<li>Give the page a responsive layout with CSS columns.</li>
</ul>

<p>Click the "view source" button to see the CSS and markup of this demo and open the demo to see the result.</p>

<a href="#demo-page" role="button" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini ui-icon-carat-r ui-btn-icon-right">Open demo</a>
11 demos/panel/index.php
View file
@@ -138,22 +138,22 @@
@media ( min-width: 35em ) {

/* wrap on wide viewports once open */

.ui-panel-page-content-open.ui-panel-page-content-position-left {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right {
margin-left: 17em;
}
.ui-panel-page-content-open {
width: auto;
width: auto;
}

/* disable "dismiss" on wide viewports */
.ui-panel-dismiss {
display: none;
}

/* same as the above but for panels with display mode "push" only */

.ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
@@ -163,7 +163,7 @@
margin-left: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-display-push {
width: auto;
width: auto;
}

.ui-panel-dismiss-display-push {
@@ -209,7 +209,6 @@
</div><!-- /leftpanel2 -->

<!-- leftpanel3 -->


<!-- rightpanel1 -->
<div data-role="panel" id="rightpanel1" data-position="right" data-display="reveal" data-theme="b">
1 demos/popup-iframe/index.php
View file
@@ -57,7 +57,6 @@

<p>Note that the video will still be playing in the iframe when the popup is closed. If available you can use the 3rd party API to stop the video on the <code>popupafterclose</code> event. Another way is to create the iframe when the popup is opened and destroy it when the popup is closed, but this would drop support for browsers that have JavaScript disabled.</p>


<h2>Map example</h2>

<p>In the second example, an iframe is used to display <strong>Google Maps API</strong>. Using an iframe prevents issues with the controls of the map.</p>
6 demos/popup-iframe/map.html
View file
@@ -25,14 +25,14 @@
padding: 0;
height: 100%;
}
#map_canvas {
#map_canvas {
height: 100%;
}
}
</style>
</head>
<body onload="initialize()">

<div id="map_canvas"></div>

</body>
</html>
12 demos/popup-iframe/popup-iframe-map.js
View file
@@ -21,7 +21,7 @@ $( document ).on( "pagecreate", function() {
h = scrHeight;
w = ( scrHeight / ifrHeight ) * ifrWidth;
}

return {
'width': w - ( ifrPadding + ifrBorder ),
'height': h - ( ifrPadding + ifrBorder )
@@ -31,10 +31,10 @@ $( document ).on( "pagecreate", function() {
$( ".ui-popup iframe" )
.attr( "width", 0 )
.attr( "height", "auto" );

$( "#popupMap iframe" ).contents().find( "#map_canvas" )
.css( { "width" : 0, "height" : 0 } );

$( "#popupMap" ).on({
popupbeforeposition: function() {
var size = scale( 480, 320, 0, 1 ),
@@ -44,17 +44,17 @@ $( document ).on( "pagecreate", function() {
$( "#popupMap iframe" )
.attr( "width", w )
.attr( "height", h );

$( "#popupMap iframe" ).contents().find( "#map_canvas" )
.css( { "width": w, "height" : h } );
},
popupafterclose: function() {
$( "#popupMap iframe" )
.attr( "width", 0 )
.attr( "height", 0 );

$( "#popupMap iframe" ).contents().find( "#map_canvas" )
.css( { "width": 0, "height" : 0 } );
}
});
});
});
10 demos/popup-iframe/popup-iframe-video.js
View file
@@ -21,7 +21,7 @@ $( document ).on( "pagecreate", function() {
h = scrHeight;
w = ( scrHeight / ifrHeight ) * ifrWidth;
}

return {
'width': w - ( ifrPadding + ifrBorder ),
'height': h - ( ifrPadding + ifrBorder )
@@ -31,10 +31,10 @@ $( document ).on( "pagecreate", function() {
$( ".ui-popup iframe" )
.attr( "width", 0 )
.attr( "height", "auto" );

$( "#popupVideo" ).on({
popupbeforeposition: function() {
// call our custom function scale() to get the width and height
// call our custom function scale() to get the width and height
var size = scale( 497, 298, 15, 1 ),
w = size.width,
h = size.height;
@@ -46,7 +46,7 @@ $( document ).on( "pagecreate", function() {
popupafterclose: function() {
$( "#popupVideo iframe" )
.attr( "width", 0 )
.attr( "height", 0 );
.attr( "height", 0 );
}
});
});
});
2 demos/popup-image-scaling/popup-image-scaling.js
View file
@@ -5,4 +5,4 @@ $( document ).on( "pagecreate", function() {
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
});
});
2 demos/popup-outside-multipage/index.php
View file
@@ -42,7 +42,7 @@
<div data-role="content" class="jqm-content">

<h1>Using the same popup across multiple pages</h1>

<p>You can reuse the same popup on multiple pages if you declare it as a direct child of the <code>body</code> element. It can then appear on any page in the document.</p>
<p>If you define the popup outside of any page, then you must take care to instantiate the popup widget yourself. You can do this as early as DOMReady, because the popup is not on any page.</p>
<p>If you wish the popup to be opened from a set of links, then you must also handle that manually, because automatic handling via <code>data-rel="popup"</code> is restricted to popups on the active page.</p>
2 demos/popup/index.php
View file
@@ -336,6 +336,6 @@
</div>
</div>
</div><!-- /page -->

</body>
</html>
4 demos/slider-flipswitch/index.php
View file
@@ -48,9 +48,9 @@
</select>
</form>
</div><!-- /demo-html -->

<h2>Theme</h2>

<div data-demo-html="true">
<form>
<label for="flip-2">Flip toggle switch:</label>
2 demos/swipe-list/index.php
View file
@@ -145,7 +145,7 @@ function confirmAndDelete( listitem, transition ) {
<h1>Swipe to delete list item</h1>

<p>This demo shows how you can remove list items by swiping left or right. For devices without touchscreen there is a delete button. This demo also contains a custom styled confirmation popup.</p>

<p><a href="#demo-page" data-transition="fade" role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Open swipe list demo</a></p>

<div data-demo-html="#demo-page" data-demo-js="true" data-demo-css="true"></div>
8 demos/swipe-page/buenosaires.html
View file
@@ -19,26 +19,26 @@
<h1>Buenos Aires</h1>
<a href="./" data-ajax="false" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
</div><!-- /header -->

<div data-role="page" id="buenosaires" class="demo-page" data-title="Buenos Aires" data-dom-cache="true" data-theme="b" data-prev="newyork" data-next="paris">

<div data-role="content">

<div id="trivia-buenosaires" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
<a href="#" data-rel="back" class="ui-btn ui-btn-right ui-btn-b ui-btn-icon-notext ui-icon-delete ui-corner-all" role="button">Close</a>
<p>At 140 meters (16 lanes), Avenida 9 de Julio in Buenos Aires is the world’s widest avenue. Its name honors Argentina’s birthdate. (July 9, 1816). The avenue runs roughly one kilometer to the west of the Río de la Plata waterfront, from the Retiro district in the north to Constitución station in the south. <small>source:&nbsp;inautonews.com</small></p>
</div>

</div><!-- /content -->

</div><!-- /page -->

<div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true">
<a href="#" class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l" role="button">Previous</a>
<a href="#" class="next ui-btn ui-btn-icon-notext ui-icon-carat-r" role="button">Next</a>
</div>

<a href="#trivia-buenosaires" id="trivia-button" data-rel="popup" class="trivia-btn ui-btn ui-btn-right ui-btn-icon-left ui-icon-info ui-mini ui-corner-all" role="button">Trivia</a>
</div><!-- /footer -->

6 demos/swipe-page/capetown.html
View file
@@ -21,9 +21,9 @@ <h1>Cape Town</h1>
</div><!-- /header -->

<div data-role="page" id="capetown" class="demo-page" data-title="Cape Town" data-dom-cache="true" data-theme="b" data-prev="paris" data-next="seoul">

<div data-role="content">

<div id="trivia-capetown" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
<a href="#" data-rel="back" class="ui-btn ui-btn-right ui-btn-b ui-btn-icon-notext ui-icon-delete ui-corner-all" role="button">Close</a>
<p> Although it’s the youngest official language in the world, Afrikaans is most widely spoken and is home language for 40% of the Cape's population. The remainder of the population speaks either Xhosa or English as a home language. <small>source:&nbsp;gotravel24.com</small></p>
@@ -38,7 +38,7 @@ <h1>Cape Town</h1>
<a href="#" class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l" role="button">Previous</a>
<a href="#" class="next ui-btn ui-btn-icon-notext ui-icon-carat-r" role="button">Next</a>
</div>

<a href="#trivia-capetown" id="trivia-button" data-rel="popup" class="trivia-btn ui-btn ui-btn-right ui-btn-icon-left ui-icon-info ui-mini ui-corner-all" role="button">Trivia</a>
</div><!-- /footer -->

6 demos/swipe-page/newyork.html
View file
@@ -21,9 +21,9 @@ <h1>New York</h1>
</div><!-- /header -->

<div data-role="page" id="newyork" class="demo-page" data-title="New York" data-dom-cache="true" data-theme="b" data-next="buenosaires">

<div data-role="content">

<div id="trivia-newyork" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
<a href="#" data-rel="back" class="ui-btn ui-btn-right ui-btn-b ui-btn-icon-notext ui-icon-delete ui-corner-all" role="button">Close</a>
<p>Although many legends exist about the origin of New York City's nickname, the Big Apple, most historians agree that it can be traced back to a writer who covered horse racing in the 1920s. In The Morning Telegraph, he wrote that stable hands often referred to New York as the Big Apple, meaning that any thoroughbred that raced in New York had reached the pinnacle of racing. <small>source:&nbsp;nylady.hubpages.com</small></p>
@@ -38,7 +38,7 @@ <h1>New York</h1>
<a href="#" class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l" role="button">Previous</a>
<a href="#" class="next ui-btn ui-btn-icon-notext ui-icon-carat-r" role="button">Next</a>
</div>

<a href="#trivia-newyork" id="trivia-button" data-rel="popup" class="trivia-btn ui-btn ui-btn-right ui-btn-icon-left ui-icon-info ui-mini ui-corner-all" role="button">Trivia</a>
</div><!-- /footer -->

6 demos/swipe-page/paris.html
View file
@@ -21,9 +21,9 @@ <h1>Paris</h1>
</div><!-- /header -->

<div data-role="page" id="paris" class="demo-page" data-title="Paris" data-dom-cache="true" data-theme="b" data-prev="buenosaires" data-next="capetown">

<div data-role="content">

<div id="trivia-paris" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
<a href="#" data-rel="back" class="ui-btn ui-btn-right ui-btn-b ui-btn-icon-notext ui-icon-delete ui-corner-all" role="button">Close</a>
<p>Each year, 44 million tourists visit Paris and the surrounding Ile de France region. Paris is year after year the most visited city in the world. <small>source:&nbsp;parisdigest.com</small></p>
@@ -38,7 +38,7 @@ <h1>Paris</h1>
<a href="#" class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l" role="button">Previous</a>
<a href="#" class="next ui-btn ui-btn-icon-notext ui-icon-carat-r" role="button">Next</a>
</div>

<a href="#trivia-paris" id="trivia-button" data-rel="popup" class="trivia-btn ui-btn ui-btn-right ui-btn-icon-left ui-icon-info ui-mini ui-corner-all" role="button">Trivia</a>
</div><!-- /footer -->

6 demos/swipe-page/seoul.html
View file
@@ -21,7 +21,7 @@ <h1>Seoul</h1>
</div><!-- /header -->

<div data-role="page" id="seoul" class="demo-page" data-title="Seoul" data-dom-cache="true" data-theme="b" data-prev="capetown" data-next="sydney">

<div data-role="content">

<div id="trivia-seoul" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
@@ -31,14 +31,14 @@ <h1>Seoul</h1>

</div><!-- /content -->

</div><!-- /page -->
</div><!-- /page -->

<div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true">
<a href="#" class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l" role="button">Previous</a>
<a href="#" class="next ui-btn ui-btn-icon-notext ui-icon-carat-r" role="button">Next</a>
</div>

<a href="#trivia-seoul" id="trivia-button" data-rel="popup" class="trivia-btn ui-btn ui-btn-right ui-btn-icon-left ui-icon-info ui-mini ui-corner-all" role="button">Trivia</a>
</div><!-- /footer -->

4 demos/swipe-page/sydney.html
View file
@@ -30,15 +30,15 @@ <h1>Sydney</h1>
</div>

</div><!-- /content -->

</div><!-- /page -->

<div id="footer" data-id="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true">
<a href="#" class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l" role="button">Previous</a>
<a href="#" class="next ui-btn ui-btn-icon-notext ui-icon-carat-r" role="button">Next</a>
</div>

<a href="#trivia-sydney" id="trivia-button" data-rel="popup" class="trivia-btn ui-btn ui-btn-right ui-btn-icon-left ui-icon-info ui-mini ui-corner-all" role="button">Trivia</a>
</div><!-- /footer -->

8 demos/table-reflow/index.php
View file
@@ -146,21 +146,21 @@
<p>It's best to use a <code>class</code> on the table to apply the breakpoint. Add these rules to your custom stylesheet that is included in the <code>head</code> of the page. We recommend creating a set of custom breakpoint classes that can be used to apply standard table breakpoints in your project.</p>

<h2>Choosing a breakpoint</h2>

<p>The goal is to determine the minimum width at which the <em>entire table</em> will fit comfortably within the screen. Find this width by populating a table with realistic sample data, then adjust the browser window until the table completely fits and has a bit of extra space to account for rendering differences across devices. This is the natural place to set the breakpoint that switches between the stacked and tabular presentation modes. The breakpoint width is highly dependent on the number of columns in the table and content within each cell.</p>

<h2>Applying a preset breakpoint</h2>

<p>Even though we strongly encourage you to write custom breakpoints yourself, the framework includes a single pre-configured breakpoint that targets the stacked style to smaller phones and swaps to a tabular prsentation on larger phones, tablet and desktop devices. To use this preset breakpoint, add the <code>ui-responsive</code> class to the table to convert from the stacked presentation to a tabular presentation at 560px (35em). If this breakpoint doesn't work for your content, we encourage you to write a custom breakpoint as descibed above.</p>

<pre><code>
&lt;table data-role=&quot;table&quot; <strong>class=&quot;ui-responsive&quot;</strong>&gt;
</code></pre>

<h2>Grouped column headers</h2>

<p>It's fairly common to need to logically group multiple columns together under a heading group for financial or scientific data. The framework can support the most simple version of this by allowing for two rows of table headers (<code>TH</code>), with the first row containing simple <code>colspan</code> attributes to group the columns below. In this configuration, the framework will add a class to the label of the first cell in each group to allow you to style these differently and provide additional visual hierarchy.</p>

<div data-demo-html="true">
<table data-role="table" id="temp-table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
2 demos/tabs/ajax-content.php
View file
@@ -1 +1 @@
<div class="tabs-list-content">I am ajax tab content i was pulled in from ajax-content.php </div>
<div class="tabs-list-content">I am ajax tab content i was pulled in from ajax-content.php </div>
8 demos/tabs/index.php
View file
@@ -47,7 +47,7 @@
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
</ul>
</div>
</div>
<h2>Use inset listview for tabs</h2>
@@ -60,15 +60,15 @@
<div id="one" class="ui-body-d tabs-list-content">
<h1>First tab contents</h1>
</div>

<ul id="two" class="tabs-list-content" data-role="listview" data-inset="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
</ul>

</div>
<h2>Tabbed page content</h2>
<p>You can also use tabs to swap out an enitre pages content <a data-ajax="false" href="tabbed-content.php">Tabbed Content Pages</a></p>
4 demos/tabs/tabbed-content.php
View file
@@ -21,7 +21,7 @@
<li><a href="ajax-content.php" data-theme="a" data-ajax="false">three</a></li>
</ul>
</div>
<div id="one" class="ui-content">
<h1>First tab contents</h1>
</div>
@@ -32,7 +32,7 @@
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
29 demos/theme-classic/index.php
View file
@@ -14,7 +14,7 @@
$( document ).on( "pagecreate", function() {
$( "#theme-selector input" ).on( "change", function( event ) {
var themeClass = $( "#theme-selector input:checked" ).attr( "id" );
$( "#testpage" ).removeClass( "ui-page-theme-a ui-page-theme-b ui-page-theme-c ui-page-theme-d ui-page-theme-e" ).addClass( "ui-page-theme-" + themeClass );
$( "#ui-body-test" ).removeClass( "ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e" ).addClass( "ui-body-" + themeClass );
$( "#ui-bar-test, #ui-bar-form" ).removeClass( "ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e" ).addClass( "ui-bar-" + themeClass );
@@ -160,7 +160,7 @@
</fieldset>
</div>
</form>
<div id="ui-body-test" class="ui-body ui-body-a ui-corner-all" style="margin-bottom:1em;">
<p>I am a div with classes ui-body, ui-body-<span class="theme">a</span> and ui-corner-all.</p>
<p><a href="#">I am a link</a></p>
@@ -169,11 +169,11 @@
<a href="#panel-overlay" role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-mini">Overlay</a>
<a href="#panel-push" role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-mini">Push</a>
</div>
<div id="ui-bar-test" class="ui-bar ui-bar-a ui-corner-all" style="margin-bottom:1em;">
<p>I am a div with classes ui-bar, ui-bar-<span class="theme">a</span> and ui-corner-all. <a href="#">I am a link</a></p>
</div>
<a href="#" role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-carat-r ui-btn-icon-right">We</a>
<button class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-carat-r ui-btn-icon-right">are</button>
<input type="button" value="buttons" data-inline="true" data-icon="carat-r" data-iconpos="right">
@@ -191,7 +191,7 @@
<li><a href="#">have<span class="ui-li-count">4</span></a></li>
<li><a href="#">links</a></li>
</ul>
<ul data-role="listview" data-split-icon="gear" data-inset="true">
<li><a href="#">
<img src="../_assets/img/album-bb.jpg">
@@ -212,7 +212,7 @@
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
</ul>
<form>
<div class="ui-field-contain">
<label for="name2">Text Input:</label>
@@ -277,12 +277,11 @@
<input type="submit" id="submit-1" value="Send">
</div>
</form>
<a href="#" role="button" class="ui-btn ui-corner-all ui-shadow ui-icon-gear ui-btn-icon-left ui-btn-active">Active button</a>
<p>Form inside static list:</p>
<form>
<ul data-role="listview" data-inset="true">
<li class="ui-field-contain">
@@ -326,7 +325,7 @@
<h4>Heading</h4>
<p>I'm the collapsible content with a themed content block set to "<span class="theme">a</span>".</p>
</div>
<div data-role="collapsible-set" data-content-theme="a">
<div data-role="collapsible">
<h3>Section 1</h3>
@@ -341,9 +340,9 @@
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
@@ -365,7 +364,7 @@
<br><br>
<button class="ui-btn ui-corner-all ui-shadow">Button</button>
</div>
<div data-role="panel" id="panel-overlay" data-display="overlay">
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
@@ -376,7 +375,7 @@
<br><br>
<button class="ui-btn ui-corner-all ui-shadow">Button</button>
</div>
<div data-role="panel" id="panel-push" data-display="push">
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
22 demos/theme-classic/theme-classic.css
View file
@@ -213,7 +213,7 @@ html .ui-btn.ui-checkbox-on:after {
width: 8px;
height: 8px;
border-width: 5px;
border-style: solid;
border-style: solid;
}
.ui-alt-icon.ui-btn.ui-radio-on:after,
.ui-alt-icon .ui-btn.ui-radio-on:after {
@@ -264,7 +264,7 @@ html body .ui-group-theme-a .ui-bar-inherit {
background-image: -moz-linear-gradient( #444 /*{a-page-background-start}*/, #222 /*{a-page-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #444 /*{a-page-background-start}*/, #222 /*{a-page-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #444 /*{a-page-background-start}*/, #222 /*{a-page-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #444 /*{a-page-background-start}*/, #222 /*{a-page-background-end}*/);
background-image: linear-gradient( #444 /*{a-page-background-start}*/, #222 /*{a-page-background-end}*/);
border-color: #444 /*{a-page-border}*/;
color: #fff /*{a-page-color}*/;
text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #111 /*{a-page-shadow-color}*/;
@@ -283,7 +283,7 @@ html .ui-panel-page-container-a {
background-image: -moz-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/);
background-image: linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/);
border-color: #444 /*{a-body-border}*/;
color: #fff /*{a-body-color}*/;
text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ #111 /*{a-body-shadow-color}*/;
@@ -476,7 +476,7 @@ html body .ui-group-theme-b .ui-bar-inherit {
background-image: -moz-linear-gradient( #ddd /*{b-page-background-start}*/, #ccc /*{b-page-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #ddd /*{b-page-background-start}*/, #ccc /*{b-page-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #ddd /*{b-page-background-start}*/, #ccc /*{b-page-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #ddd /*{b-page-background-start}*/, #ccc /*{b-page-background-end}*/);
background-image: linear-gradient( #ddd /*{b-page-background-start}*/, #ccc /*{b-page-background-end}*/);
border-color: #999 /*{b-page-border}*/;
color: #222 /*{b-page-color}*/;
text-shadow: 0 /*{b-page-shadow-x}*/ 1px /*{b-page-shadow-y}*/ 0 /*{b-page-shadow-radius}*/ #fff /*{b-page-shadow-color}*/;
@@ -495,7 +495,7 @@ html .ui-panel-page-container-b {
background-image: -moz-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/);
background-image: linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/);
border-color: #999 /*{b-body-border}*/;
color: #222 /*{b-body-color}*/;
text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ #fff /*{b-body-shadow-color}*/;
@@ -688,7 +688,7 @@ html body .ui-group-theme-c .ui-bar-inherit {
background-image: -moz-linear-gradient( #f9f9f9 /*{c-page-background-start}*/, #eee /*{c-page-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #f9f9f9 /*{c-page-background-start}*/, #eee /*{c-page-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #f9f9f9 /*{c-page-background-start}*/, #eee /*{c-page-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #f9f9f9 /*{c-page-background-start}*/, #eee /*{c-page-background-end}*/);
background-image: linear-gradient( #f9f9f9 /*{c-page-background-start}*/, #eee /*{c-page-background-end}*/);
border-color: #aaa /*{c-page-border}*/;
color: #333 /*{c-page-color}*/;
text-shadow: 0 /*{c-page-shadow-x}*/ 1px /*{c-page-shadow-y}*/ 0 /*{c-page-shadow-radius}*/ #fff /*{c-page-shadow-color}*/;
@@ -707,7 +707,7 @@ html .ui-panel-page-container-c {
background-image: -moz-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/);
background-image: linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/);
border-color: #aaa /*{c-body-border}*/;
color: #333 /*{c-body-color}*/;
text-shadow: 0 /*{c-body-shadow-x}*/ 1px /*{c-body-shadow-y}*/ 0 /*{c-body-shadow-radius}*/ #fff /*{c-body-shadow-color}*/;
@@ -900,7 +900,7 @@ html body .ui-group-theme-d .ui-bar-inherit {
background-image: -moz-linear-gradient( #fff /*{d-page-background-start}*/, #fff /*{d-page-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #fff /*{d-page-background-start}*/, #fff /*{d-page-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #fff /*{d-page-background-start}*/, #fff /*{d-page-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #fff /*{d-page-background-start}*/, #fff /*{d-page-background-end}*/);
background-image: linear-gradient( #fff /*{d-page-background-start}*/, #fff /*{d-page-background-end}*/);
border-color: #bbb /*{d-page-border}*/;
color: #333 /*{d-page-color}*/;
text-shadow: 0 /*{d-page-shadow-x}*/ 1px /*{d-page-shadow-y}*/ 0 /*{d-page-shadow-radius}*/ #fff /*{d-page-shadow-color}*/;
@@ -919,7 +919,7 @@ html .ui-panel-page-container-d {
background-image: -moz-linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/);
background-image: linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/);
border-color: #bbb /*{d-body-border}*/;
color: #333 /*{d-body-color}*/;
text-shadow: 0 /*{d-body-shadow-x}*/ 1px /*{d-body-shadow-y}*/ 0 /*{d-body-shadow-radius}*/ #fff /*{d-body-shadow-color}*/;
@@ -1112,7 +1112,7 @@ html body .ui-group-theme-e .ui-bar-inherit {
background-image: -moz-linear-gradient( #fffadf /*{e-page-background-start}*/, #fff3a5 /*{e-page-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #fffadf /*{e-page-background-start}*/, #fff3a5 /*{e-page-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #fffadf /*{e-page-background-start}*/, #fff3a5 /*{e-page-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #fffadf /*{e-page-background-start}*/, #fff3a5 /*{e-page-background-end}*/);
background-image: linear-gradient( #fffadf /*{e-page-background-start}*/, #fff3a5 /*{e-page-background-end}*/);
border-color: #f7c942 /*{e-page-border}*/;
color: #222 /*{e-page-color}*/;
text-shadow: 0 /*{e-page-shadow-x}*/ 1px /*{e-page-shadow-y}*/ 0 /*{e-page-shadow-radius}*/ #fff /*{e-page-shadow-color}*/;
@@ -1131,7 +1131,7 @@ html .ui-panel-page-container-e {
background-image: -moz-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/);
background-image: linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/);
border-color: #f7c942 /*{e-body-border}*/;
color: #222 /*{e-body-color}*/;
text-shadow: 0 /*{e-body-shadow-x}*/ 1px /*{e-body-shadow-y}*/ 0 /*{e-body-shadow-radius}*/ #fff /*{e-body-shadow-color}*/;
29 demos/theme-default/index.php
View file
@@ -12,7 +12,7 @@
$( document ).on( "pagecreate", function() {
$( "#theme-selector input" ).on( "change", function( event ) {
var themeClass = $( "#theme-selector input:checked" ).attr( "id" );

$( "#testpage" ).removeClass( "ui-page-theme-a ui-page-theme-b" ).addClass( "ui-page-theme-" + themeClass );
$( "#ui-body-test" ).removeClass( "ui-body-a ui-body-b" ).addClass( "ui-body-" + themeClass );
$( "#ui-bar-test, #ui-bar-form" ).removeClass( "ui-bar-a ui-bar-b" ).addClass( "ui-bar-" + themeClass );
@@ -111,7 +111,7 @@
</fieldset>
</div>
</form>

<div id="ui-body-test" class="ui-body ui-body-a ui-corner-all" style="margin-bottom:1em;">
<p>I am a div with classes ui-body, ui-body-<span class="theme">a</span> and ui-corner-all.</p>
<p><a href="#">I am a link</a></p>
@@ -120,11 +120,11 @@
<a href="#panel-overlay" role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-mini">Overlay</a>
<a href="#panel-push" role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-mini">Push</a>
</div>

<div id="ui-bar-test" class="ui-bar ui-bar-a ui-corner-all" style="margin-bottom:1em;">
<p>I am a div with classes ui-bar, ui-bar-<span class="theme">a</span> and ui-corner-all. <a href="#">I am a link</a></p>
</div>

<a href="#" role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-carat-r ui-btn-icon-right">We</a>
<button class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-carat-r ui-btn-icon-right">are</button>
<input type="button" value="buttons" data-inline="true" data-icon="carat-r" data-iconpos="right">
@@ -142,7 +142,7 @@
<li><a href="#">have<span class="ui-li-count">4</span></a></li>
<li><a href="#">links</a></li>
</ul>

<ul data-role="listview" data-split-icon="gear" data-inset="true">
<li><a href="#">
<img src="../_assets/img/album-bb.jpg">
@@ -163,7 +163,7 @@
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
</ul>

<form>
<div class="ui-field-contain">
<label for="name2">Text Input:</label>
@@ -228,12 +228,11 @@
<input type="submit" id="submit-1" value="Send">
</div>
</form>



<a href="#" role="button" class="ui-btn ui-corner-all ui-shadow ui-icon-gear ui-btn-icon-left ui-btn-active">Active button</a>

<p>Form inside static list:</p>

<form>
<ul data-role="listview" data-inset="true">
<li class="ui-field-contain">
@@ -277,7 +276,7 @@
<h4>Heading</h4>
<p>I'm the collapsible content with a themed content block set to "<span class="theme">a</span>".</p>
</div>

<div data-role="collapsible-set" data-content-theme="a">
<div data-role="collapsible">
<h3>Section 1</h3>
@@ -292,9 +291,9 @@
<p>I'm the collapsible content for section 3</p>
</div>
</div>

</div><!-- /content -->

<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
@@ -316,7 +315,7 @@
<br><br>
<button class="ui-btn ui-corner-all ui-shadow">Button</button>
</div>

<div data-role="panel" id="panel-overlay" data-display="overlay">
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
@@ -327,7 +326,7 @@
<br><br>
<button class="ui-btn ui-corner-all ui-shadow">Button</button>
</div>

<div data-role="panel" id="panel-push" data-display="push">
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
2 demos/toolbar-external/index.php
View file
@@ -22,7 +22,7 @@
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>External header</h1>
</div><!-- /header -->

<div data-role="page" class="jqm-demos" data-quicklinks="true">

<div data-role="content" class="jqm-content">
2 demos/toolbar-fixed-external/index.php
View file
@@ -22,7 +22,7 @@
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>External fixed header</h1>
</div><!-- /header -->

<div data-role="page" class="jqm-demos">

<div data-role="content" class="jqm-content">
5 demos/toolbar-fixed/index.php
View file
@@ -46,7 +46,7 @@
</code></pre>

<h2>Fullscreen Toolbars</h2>

<p><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen</a> fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled. Instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions.</p>

<p>To enable this option on a fixed header or footer, add the <code>data-fullscreen</code> attribute to the element.</p>
@@ -99,9 +99,8 @@

<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><!-- /content -->

<div data-role="footer" data-position="fixed">
<h1>Fixed footer</h1>
</div><!-- /footer -->
5 demos/toolbar/index.php
View file
@@ -84,7 +84,6 @@

<p>See <a href="../toolbar-fixed-persistent/" data-ajax="false">persistent toolbars</a>.</p>


<h2>Buttons in toolbars</h2>

<p>The framework automatically enhances links in toolbars as buttons with inline and mini style, but this has been deprecated in version 1.4. The same goes for positioning the first two buttons in a header left and right if they are immediate child of the header. The demos below prepare you for the next version.</p>
@@ -124,7 +123,7 @@
<p>jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app webview. The framework automatically generates a "back" button on a header when the page plugin's <code>addBackBtn</code> option is true. This can also be set via markup if the page div has a <code>data-add-back-btn="true"</code> attribute.</p>

<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 href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, <strong>be sure to provide a meaningful href that actually points to the URL of the referring page. This will allow the feature to work for users in C-Grade browsers.</strong></p>

<p>If you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute.</p>

<h3>Customizing the back button text</h3>
@@ -137,7 +136,6 @@
<code>$.mobile.toolbar.prototype.options.backBtnTheme = "a";</code><br>
If you're doing this programmatically, set this option inside the <code>mobileinit</code> event handler.</p>


<h2>Navbars</h2>

<p>See <a href="../navbar/" data-ajax="false">navbar</a> for examples of navigation bars inside toolbars.</p>
@@ -175,7 +173,6 @@
</div>
</div>


</div><!-- /content -->

<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">