151 docs/demos/widgets/navigation/index.html
View file
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navigation - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../_assets/favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<script src="../../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../../js/"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div data-role="page" class="jqm-demos">
<div data-role="panel" id="ajaxnav-sections" class="jqm-nav-panel" data-position="right" data-display="overlay" data-theme="c">
<ul data-role="listview" data-inset="false" data-theme="d" data-divider-theme="d" class="jqm-list">
<li class="jqm-list-header">Jump to section</li>
<li><a href="#nav-intro" data-ajax="false">Introduction</a></li>
<li><a href="#nav-event-example" data-ajax="false">Event Example</a></li>
<li><a href="#nav-method-example" data-ajax="false">Method Example</a></li>
</ul>
</div>

<div data-role="header" class="jqm-header" data-theme="f">
<h1>jQuery Mobile</h1>
<a href="#panel-nav" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="../../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
</div><!-- /header -->

<div data-role="content" class="jqm-content">
<h1>AJAX Navigation</h1>

<p class="jqm-intro">The <code>$.mobile.navigate</code> method and the <code>navigate</code> event form the foundation of jQuery Mobile's navigation infrastructure. As such, they can function outside the confines of jQuery Mobile as a clean and intuitive navigation/history API.
<a href="#ajaxnav-sections" class="jqm-sections-link">Jump to section <span class="ui-icon ui-icon-bars">&nbsp;</span></a>
</p>

<h2 id="nav-intro">Introduction</h2>

<p>jQuery Mobile includes a navigation system to load pages into the DOM via AJAX, enhance the new content, then display <a href="../pages/">pages</a> with a rich set of animated <a href="page-transitions.html">transitions</a>. The navigation system uses progressive enhancement to automatically 'hijack' standard <a href="../links/">links</a> and form submissions and route them as an AJAX request.</p>

<p>One of jQuery Mobile's core features is the ability to load and view content from disparate pages into the initial document with support for standard navigation methods like anchors and the back button. To accomplish this the library has progressive support for <code>hashchange</code> and <code>popstate</code> coupled with internal history tracking which can be used à la carte.</p>

<p>An example use case would be something like Twitter's web client. The first step is to hijack link clicks on the page and use the URL that represents that UI state to track history with <code>$.mobile.navigate</code>. It's at this point that any additional information about the UI necessary for operation on return using the back button would be stored (see, <code>foo</code> property of the object argument to the navigate method).</p>

<pre>
<code>
// Define a click binding for all anchors in the page
$( "a" ).on( "click", function( event ){

// Prevent the usual navigation behavior
event.preventDefault();

// Alter the url according to the anchor's href attribute, and
// store the data-foo attribute information with the url
$.mobile.navigate( this.attr( "href" ), {
foo: this.attr("data-foo")
});

// Hypothetical content alteration based on the url. E.g, make
// an ajax request for JSON data and render a template into the page.
alterContent( this.attr("href") );
});</code></pre>

<p>Next, a <code>navigate</code> event binding helps in responding to backward and forward navigation via the browsers history API. Here the <code>alterContent</code> function can address the direction in which the browser is navigating as well as any additional information stored on the data object when <code>$.mobile.navigate</code> was invoked to store the corresponding history entry.</p>

<pre><code>
// Respond to back/forward navigation
$( window ).on( "navigate", function( event, data ){
if( data.state.foo ){
// Make use of the arbitrary data stored
}

if( data.state.direction == "back" ) {
// Make use of the directional information
}

// reset the content based on the url
alterContent( data.state.url );
});</code></pre>

<h2 id="nav-event-example">Event Example <a href="http://api.jquerymobile.com/navigate/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">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 exmaple, altering the hash will trigger <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>

<p><em>Note: when viewing the console output, some browsers (eg, Chrome) fire a popstate on the initial page load</em></p>

<pre><code>
// Bind to the navigate event
$( window ).on( "navigate", function() {
console.log( "navigated!" );
});

// Bind to the click of the example link
$( "#event-example" ).click(function( event ) {
event.preventDefault();
location.hash = "foo";
});
</code></pre>

<a href="#" id="event-example" data-role="button">Event Example</a>

<h2 id="nav-method-example">Method Example <a href="http://api.jquerymobile.com/jQuery.mobile.navigate/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">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>

<p><em>Note: The arbitrary state properties must be chosen carefully to avoid the url, hash, and direction properties. This is a shortcoming that will be addressed in future releases.</em></p>

<pre>
<code>
// Bind to the click of the example link
$( "#method-example" ).click(function( event ) {
// Append #bar
$.mobile.navigate( "#bar", {
info: "info about the #bar hash"
});

// Replace #bar with #baz
$.mobile.navigate( "#baz" );

// Log the results of the navigate event
$( window ).on( "navigate", function( event, data ){
console.log( data.state.info );
console.log( data.state.direction );
console.log( data.state.url );
console.log( data.state.hash );
});

// Go back to pop the state for #bar and log it
window.history.back();
});
</code>
</pre>

<a href="#" id="method-example" data-role="button">Method Example</a>
</div><!-- /content -->

<div data-role="footer" class="jqm-footer" data-theme="c">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /jqm-footer -->

<?php include( '../../nav.html' ); ?>

</div><!-- /page -->
</body>
</html>


260 docs/demos/widgets/pages/index.html
View file
@@ -0,0 +1,260 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pages - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../_assets/favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<script src="../../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../../js/"></script>
</head>
<body>
<div data-role="page" class="jqm-demos">

<div data-role="panel" id="header-sections" class="jqm-nav-panel" data-position="right" data-display="overlay" data-theme="c">

<ul data-role="listview" data-inset="false" data-theme="d" data-divider-theme="d" class="jqm-list">

</ul>
</div>

<div data-role="header" class="jqm-header" data-theme="f">
<h1>jQuery Mobile</h1>
<a href="#panel-nav" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="../../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
</div><!-- /header -->

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

<h1>Pages <a href="http://api.jquerymobile.com/header/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>


<p class="jqm-intro">The header is a toolbar at the top of the page that usually contains the page title text and optional buttons positioned to the left and/or right of the title for navigation or actions.
<a href="#header-sections" class="jqm-sections-link">Jump to section <span class="ui-icon ui-icon-bars">&nbsp;</span></a>
</p>

<h2>Mobile page structure</h2>

<p>A jQuery Mobile site must start with an HTML5 "doctype" to take full advantage of all of the framework's features. (Older devices with browsers that don't understand HTML5 will safely ignore the 'doctype' and various custom attributes.) </p>
<p>In the "head", references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off. jQuery Mobile 1.3 beta (1.3.0-beta.1) works with versions of jQuery core from 1.7.0 to 1.9.0. 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>

<pre><code>
<strong>&lt;!DOCTYPE html&gt; </strong>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css&quot; /&gt;
&lt;script src=&quot;http://code.jquery.com/jquery-1.9.0.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
...content goes here...
&lt;/body&gt;
&lt;/html&gt;
</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>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; </code></pre>

<p>These settings do not disable the user's ability to zoom the pages, which is nice from an accessibility perspective. There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but this will hopefully be fixed in a future release. You can set other viewport values to disable zooming if required since this is part of your page content, not the library. </p>

<h2>Inside the body: Pages</h2>
<p>Inside the <code>&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. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to pages.</p>

<div class="highlight">
<pre><span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">&gt;</span>
...
<span class="nt">&lt;/div&gt;</span>
</pre>
</div>

<p>Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>.</p>

<div class="highlight">
<pre><span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre>
</div>


<h2>Putting it together: Basic single page template</h2>

<p>Putting it all together, this is the standard boilerplate page template you should start with on a project: </p>

<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css&quot; /&gt;
&lt;script src=&quot;http://code.jquery.com/jquery-1.9.0.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div data-role=&quot;page&quot;&gt;

&lt;div data-role=&quot;header&quot;&gt;
&lt;h1&gt;Page Title&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;

&lt;div data-role=&quot;content&quot;&gt;
&lt;p&gt;Page content goes here.&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;

&lt;div data-role=&quot;footer&quot;&gt;
&lt;h4&gt;Page Footer&lt;/h4&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>



<h2>Multi-page template structure</h2>

<p>A single HTML document can contain multiple "pages" that are loaded together by stacking multiple divs with a <code>data-role</code> of <code>"page"</code>. Each "page" block needs a unique id (<code>id="foo"</code>) that will be used to link internally between "pages" (<code>href="#foo"</code>). When a link is clicked, the framework will look for an internal "page" with the id and transition it into view.</p>

<p>Here is an example of a two "page" site built with two jQuery Mobile divs navigated by linking to an id placed on each page wrapper. Note that the id's on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document. Here is what two pages look inside the <code>body</code> element.</p>

<pre><code>
&lt;body&gt;

&lt;!-- Start of first page --&gt;
&lt;div data-role=&quot;page&quot; id=&quot;foo&quot;&gt;

&lt;div data-role=&quot;header&quot;&gt;
&lt;h1&gt;Foo&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;

&lt;div data-role=&quot;content&quot;&gt;
&lt;p&gt;I&#x27;m first in the source order so I&#x27;m shown as the page.&lt;/p&gt;
&lt;p&gt;View internal page called &lt;a href=&quot;#bar&quot;&gt;bar&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;

&lt;div data-role=&quot;footer&quot;&gt;
&lt;h4&gt;Page Footer&lt;/h4&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;


&lt;!-- Start of second page --&gt;
&lt;div data-role=&quot;page&quot; id=&quot;bar&quot;&gt;

&lt;div data-role=&quot;header&quot;&gt;
&lt;h1&gt;Bar&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;

&lt;div data-role=&quot;content&quot;&gt;
&lt;p&gt;I&#x27;m the second in the source order so I&#x27;m hidden when the page loads. I&#x27;m just shown if a link that references my id is beeing clicked.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;#foo&quot;&gt;Back to foo&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;

&lt;div data-role=&quot;footer&quot;&gt;
&lt;h4&gt;Page Footer&lt;/h4&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;
&lt;/body&gt;
</code></pre>

<a href="multipage-template.html" data-inline="true" data-theme="b" data-role="button" rel="external">View multi-page template</a>

<p> </p>

<p>PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax "pages", it's not currently possible to deep link to an anchor (<code>index.html#foo</code>) on a page in jQuery Mobile, because the framework will look for a "page" with an <code>id</code> of <code>#foo</code> instead of the native behavior of scrolling to the content with that <code>id</code>.</p>

<p>The <code>id</code> attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once.</p>


<h2>Conventions, not requirements</h2>

<p>Although the page structure outlined above is a recommended approach for a standard web app built with jQuery Mobile, the framework is very flexible with document structure.
The page, header, content, and footer data-role elements are optional and are mostly helpful for providing some basic formatting and structure.
The page wrapper that used to be required for auto-initialization to work is now optional for single page documents, so there isn't any required markup at all.
For a web page with a custom layout, all of these structural elements can be omitted and the Ajax navigation and all widgets will work just like they do in the boilerplate structure.
Behind the scenes, the framework will inject the page wrapper if it's not included in the markup because it's needed for managing pages, but the starting markup can now be extremely simple. </p>

<p><strong>Note:</strong> In a multi-page setup, you are required to have page wrappers in your markup in order to group the content into multiple pages.</p>

<p><strong>Also Note:</strong> If your body contains no <code>data-role="page"</code> divs, jQuery Mobile wraps the entire contents of the body within a page div as explained above.
jQuery Mobile is using jQuery's <code>wrapAll()</code> method to do this which looks for any script tags inside the content being wrapped, and loads each script source via XHR.
If scripts are present in the body, the browser ends up loading them twice.
We therefore strongly recommend that jQuery Mobile documents with scripts in their body also contain a <code>div</code> with <code>data-role="page"</code>.
</p>



<h2 id="nav-prefetch">Prefetching pages</h2>

<p>When using single-page templates, you can prefetch pages into the DOM so that they're available instantly when the user visits them. To prefetch a page, add the <code>data-prefetch</code> attribute to a link that points to the page. jQuery Mobile then loads the target page in the background after the primary page has loaded and the <code>pagecreate</code> event has triggered.

<div data-demo-html="true">

<a href="transitions-dialog.html" data-prefetch="true" data-rel="dialog">This link will prefetch the page</a>

</div><!--/demo-html -->

<p>Alternatively, you can prefetch a page programmatically using <code>$.mobile.loadPage()</code>:</p>

<pre><code>
$.mobile.loadPage( <var>pageUrl</var>, { showLoadMsg: false } );
</code></pre>






<h2 id="nav-cache">DOM Cache</h2>

<p>Keeping lots of pages in the DOM quickly fills the browser's memory, and can cause some mobile browsers to slow down or even crash. jQuery Mobile has a simple mechanism to keep the DOM tidy. </p>
<p>Whenever it loads a page via AJAX, it flags the page to be removed from the DOM when you navigate away from it later (technically, on the <code>pagehide</code> event). If you revisit a removed page, the browser may be able to retrieve the page's HTML file from its cache. If not, it re-fetches the file from the server. (In the case of nested listviews, jQuery Mobile removes all the pages that make up the nested list once you navigate to a page that's not part of the list.)</p>


<p>If you prefer, you can tell jQuery Mobile to keep previously-visited pages in the DOM instead of removing them. This lets you cache pages so that they're available instantly if the user returns to them.</p>

<pre><code>
$.mobile.page.prototype.options.domCache = true;
</code></pre>

<p>Alternatively, to cache just a particular page, you can add the <code>data-dom-cache="true"</code> attribute to the page's container. </p>

<p>To keep all previously-visited pages in the DOM, set the <code>domCache</code> option on the page plugin to <code>true</code>, like this:</p>

<pre><code>
<var>pageContainerElement</var>.page({ domCache: true });
</code></pre>

<p>Note that the contents of the first page isn't removed from the DOM, only pages loaded in via AJAX. Pages inside a multi-page template aren't affected by this feature at all - jQuery Mobile only removes pages loaded via Ajax.</p>


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

<div data-role="footer" class="jqm-footer" data-theme="c">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /jqm-footer -->

<?php include( '../../nav.html' ); ?>

</div><!-- /page -->
</body>
</html>
1 .../widgets/ajax-nav/multipage-template.html → ...mos/widgets/pages/multipage-template.html 100644 → 100755
View file
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="../../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../_assets/favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<script src="../../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../../js/"></script>
275 docs/demos/widgets/panels/index.html
View file

Large diffs are not rendered by default.

321 docs/demos/widgets/popup/index.html
View file

Large diffs are not rendered by default.

16 docs/demos/widgets/popup/popup-examples.css
View file
@@ -0,0 +1,16 @@
iframe { border: none; }

#popupPanel-popup {
right: 0 !important;
left: auto !important;
}
#popupPanel {
width: 200px;
border: 1px solid #000;
border-right: none;
background: rgba(0,0,0,.5);
margin: -1px 0;
}
#popupPanel .ui-btn {
margin: 2em 15px;
}
98 docs/demos/widgets/popup/popup-examples.js
View file
@@ -0,0 +1,98 @@
// popup examples
$( document ).on( "pageinit", function() {

$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});

function scale( width, height, padding, border ) {
var scrWidth = $( window ).width() - 30,
scrHeight = $( window ).height() - 30,
ifrPadding = 2 * padding,
ifrBorder = 2 * border,
ifrWidth = width + ifrPadding + ifrBorder,
ifrHeight = height + ifrPadding + ifrBorder,
h, w;

if ( ifrWidth < scrWidth && ifrHeight < scrHeight ) {
w = ifrWidth;
h = ifrHeight;
} else if ( ( ifrWidth / scrWidth ) > ( ifrHeight / scrHeight ) ) {
w = scrWidth;
h = ( scrWidth / ifrWidth ) * ifrHeight;
} else {
h = scrHeight;
w = ( scrHeight / ifrHeight ) * ifrWidth;
}

return {
'width': w - ( ifrPadding + ifrBorder ),
'height': h - ( ifrPadding + ifrBorder )
};
};

$( ".ui-popup iframe" )
.attr( "width", 0 )
.attr( "height", "auto" );

$( "#popupVideo" ).on({
popupbeforeposition: function() {
// call our custom function scale() to get the width and height
var size = scale( 497, 298, 15, 1 ),
w = size.width,
h = size.height;

$( "#popupVideo iframe" )
.attr( "width", w )
.attr( "height", h );
},
popupafterclose: function() {
$( "#popupVideo iframe" )
.attr( "width", 0 )
.attr( "height", 0 );
}
});

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

$( "#popupMap" ).on({
popupbeforeposition: function() {
var size = scale( 480, 320, 0, 1 ),
w = size.width,
h = size.height;

$( "#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 } );
}
});

$( "#popupPanel" ).on({
popupbeforeposition: function() {
var h = $( window ).height();

$( "#popupPanel" )
.css( "height", h );
}
});

$( "#popupPanel button" ).on( "click", function() {
$( "#popupPanel" ).popup('close');
});

});
244 docs/demos/widgets/popup/popup-iframes.html
View file
@@ -0,0 +1,244 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile - Popup iframes</title>
<link rel="stylesheet" href="../../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../_assets/favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<script src="../../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../../js/"></script>

<script src="popup-examples.js"></script>
<link rel="stylesheet" href="popup-examples.css" />

</head>
<body>

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

<div data-role="header" class="jqm-header" data-theme="f">
<h1>jQuery Mobile</h1>
<a href="#panel-nav" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="../../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
</div><!-- /header -->

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

<a href="index.html" data-role="button" data-transition="fade" data-icon="arrow-l" data-inline="true" data-mini="true">Back to Popups</a>
<h1>iframes in popups</h1>

<p>You may need to embed an iframe into a popup to use a 3rd party widget. Here, we'll walk through a few real-world examples of working with iframes: videos and maps.</p>

<h2>Video example</h2>

<p>Here is an example of a 3rd party video player embedded in a popup:</p>
<a href="#popupVideo" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Launch video player</a>

<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
<iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298" seamless></iframe>
</div>

<p>The markup is an iframe inside a popup container. The popup will have a 15 pixels padding because of class <code>ui-content</code> and a one pixel border because the framework will add class <code>ui-body-d</code> to the popup.</p>

<pre><code>
&lt;div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content"&gt;

&lt;iframe src="http://player.vimeo.com/video/41135183" width="497" height="298" seamless&gt;&lt;/iframe&gt;

&lt;/div&gt;
</code></pre>

<p>When using an iframe inside a popup it is important to initially <strong>set the width and height attributes to 0</strong>. This prevents the page to breaking on platforms like Android 2.3. Note that you have to set the attributes, because setting the width and height with CSS is not sufficient. You can leave the actual width and height in the markup for browsers that have JavaScript disabled and use <code>attr()</code> to set the zero values upon the <code>pageinit</code> event.</p>

<p>Next, bind to the <code>popupbeforeposition</code> event to set the desired size of the iframe when the popup is shown or when the window is resized (e.g. orientation change). For the iframe examples on this page a custom function <code>scale()</code> is used to scale down the iframe to fit smaller screens. Expand the section below to view the code of this function.</p>

<div data-role="collapsible" data-content-theme="d">
<h3><code>scale()</code></h3>
<p>The window width and height are decreased by 30 to take the tolerance of 15 pixels at each side into account.</p>
<pre><code>
function scale( width, height, padding, border ) {
var scrWidth = $( window ).width() - 30,
scrHeight = $( window ).height() - 30,
ifrPadding = 2 * padding,
ifrBorder = 2 * border,
ifrWidth = width + ifrPadding + ifrBorder,
ifrHeight = height + ifrPadding + ifrBorder,
h, w;

if ( ifrWidth < scrWidth && ifrHeight < scrHeight ) {
w = ifrWidth;
h = ifrHeight;
} else if ( ( ifrWidth / scrWidth ) > ( ifrHeight / scrHeight ) ) {
w = scrWidth;
h = ( scrWidth / ifrWidth ) * ifrHeight;
} else {
h = scrHeight;
w = ( scrHeight / ifrHeight ) * ifrWidth;
}

return {
'width': w - ( ifrPadding + ifrBorder ),
'height': h - ( ifrPadding + ifrBorder )
};
};
</code></pre>
<p><strong>Note:</strong> This function is not part of the framework. Copy the code into your script to use it.</p>
</div>

<p>When the popup is closed the width and height should be set back to 0. You can do this by binding to the <code>popupafterclose</code> event.</p>

<p>This is the complete script and the link to open the video popup:</p>

<pre><code>
$( document ).on( "pageinit", function() {
$( "#popupVideo iframe" )
.attr( "width", 0 )
.attr( "height", 0 );

$( "#popupVideo" ).on({
popupbeforeposition: function() {
var size = scale( 497, 298, 15, 1 ),
w = size.width,
h = size.height;

$( "#popupVideo iframe" )
.attr( "width", w )
.attr( "height", h );
},
popupafterclose: function() {
$( "#popupVideo iframe" )
.attr( "width", 0 )
.attr( "height", 0 );
}
});
});
</code></pre>

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

<a href="#popupMap" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Open Map</a>

<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<iframe src="map.html" width="480" height="320" seamless></iframe>
</div>

<p>This is the markup of the popup including a right close button:</p>
<pre><code>
&lt;div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15"&gt;

&lt;a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close&lt;/a&gt;

&lt;iframe src="map.html" width="480" height="320" seamless&gt;&lt;/iframe&gt;

&lt;/div&gt;
</code></pre>

<p>Expand the section below to view the source of the iframe.</p>

<div data-role="collapsible" data-content-theme="d">
<h3><code>map.html</code></h3>
<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Map&lt;/title&gt;
&lt;script&gt;
function initialize() {
var myLatlng = new google.maps.LatLng( 51.520838, -0.140261 );
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map( document.getElementById( "map_canvas" ), myOptions );
}
&lt;/script&gt;
&lt;script src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
&lt;style&gt;
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#map_canvas {
height: 100%;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body onload="initialize()"&gt;

&lt;div id="map_canvas"&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>

<p>Setting the size of the iframe is done exactly the same as for the video example, with one exception. You should also set the width and height of the div that contains the map to prevent the page to break on platforms like Android 2.3. In this example the ID of this div is <code>#map_canvas</code>.</p>

<p>This is the complete script and the link to open the map popup:</p>

<pre><code>
$( document ).on( "pageinit", function() {
$( "#popupMap iframe" )
.attr( "width", 0 )
.attr( "height", 0 );

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

$( "#popupMap" ).on({
popupbeforeposition: function() {
var size = scale( 480, 320, 0, 1 ),
w = size.width,
h = size.height;

$( "#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 } );
}
});
});
</code></pre>





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

<div data-role="footer" class="jqm-footer" data-theme="c">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /jqm-footer -->

<?php include( '../../nav.html' ); ?>


</div><!-- /page -->
</body>
</html>
79 docs/demos/widgets/popup/popup-images.html
View file
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile - Popup images</title>
<link rel="stylesheet" href="../../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../_assets/favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<script src="../../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../../js/"></script>

<script src="popup-examples.js"></script>
<link rel="stylesheet" href="popup-examples.css" />

</head>
<body>

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

<div data-role="header" class="jqm-header" data-theme="f">
<h1>jQuery Mobile</h1>
<a href="#panel-nav" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="../../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
</div><!-- /header -->

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

<a href="index.html" data-role="button" data-transition="fade" data-icon="arrow-l" data-inline="true" data-mini="true">Back to Popups</a>
<h1>Scaling images</h1>

<p>The framework CSS contains rules that make images that are immediate children of the popup scale to fit the screen. Because of the absolute positioning of the popup container and screen, the height is not adjusted to screen height on all browsers. You can prevent vertical scrolling with a simple script that sets the <code>max-height</code> of the image.</p>

<p>In the two examples below the divs with <code>data-role="popup"</code> have a class of <code>photopopup</code>. </p>

<a href="#popupPhotoLandscape" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Photo landscape</a>
<a href="#popupPhotoPortrait" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true" data-transition="fade">Photo portrait</a>

<div data-role="popup" id="popupPhotoLandscape" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img src="../../_assets/img/photo-landscape.jpg" alt="Photo landscape">
</div>

<div data-role="popup" id="popupPhotoPortrait" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img src="../../_assets/img/photo-portrait.jpg" alt="Photo portrait">
</div>

<p>The handler is bound to the <code>popupbeforeposition</code> event, which ensures the image is not only scaled before it is shown but also when the window is resized (e.g. orientation change). In this code example the height is reduced by 60 to take a top and bottom tolerance of 30 pixels into account.</p>

<pre><code>
$( document ).on( "pageinit", function() {
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
});

</code></pre>





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

<div data-role="footer" class="jqm-footer" data-theme="c">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /jqm-footer -->

<?php include( '../../nav.html' ); ?>


</div><!-- /page -->
</body>
</html>
341 docs/demos/widgets/table-column-toggle/index.html
View file

Large diffs are not rendered by default.

191 docs/demos/widgets/table-reflow/index.html
View file
@@ -0,0 +1,191 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table: Reflow - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../_assets/favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<script src="../../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../../js/"></script>
</head>
<body>
<div data-role="page" class="jqm-demos">

<div data-role="panel" id="link-sections" class="jqm-nav-panel" data-position="right" data-display="overlay" data-theme="c">

<ul data-role="listview" data-inset="false" data-theme="d" data-divider-theme="d" class="jqm-list">

</ul>
</div>

<div data-role="header" class="jqm-header" data-theme="f">
<h1>jQuery Mobile</h1>
<a href="#panel-nav" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="../../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
</div><!-- /header -->

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

<h1>Table: Reflow <a href="http://api.jquerymobile.com/table-reflow/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>


<p class="jqm-intro">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.
<a href="#link-sections" class="jqm-sections-link">Jump to section <span class="ui-icon ui-icon-bars">&nbsp;</span></a>
</p>

<h2>Reflow basics</h2>
<p>The reflow responsive table only requires a table with a <code>data-role=&quot;table&quot;</code> on the table element. There is no need to set the <code>data-mode</code> attribute since <code>reflow</code> is the default. Be sure to include <code>thead</code> and <code>tbody</code> elements in your table. This example also uses the preset responsive breakpoint, applied via the <code>ui-responsive</code> class.</p>


<div data-demo-html="true">
<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="1">Rank</th>
<th data-priority="persist">Movie Title</th>
<th data-priority="2">Year</th>
<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-priority="4">Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
<td>1941</td>
<td>100%</td>
<td>74</td>
</tr>
<tr>
<th>2</th>
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
<td>1942</td>
<td>97%</td>
<td>64</td>
</tr>
<tr>
<th>3</th>
<td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
<td>1972</td>
<td>97%</td>
<td>87</td>
</tr>
<tr>
<th>4</th>
<td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
<td>1939</td>
<td>96%</td>
<td>87</td>
</tr>
<tr>
<th>5</th>
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
<td>1962</td>
<td>94%</td>
<td>87</td>
</tr>
<tr>
<th>6</th>
<td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
<td>1964</td>
<td>92%</td>
<td>74</td>
</tr>
<tr>
<th>7</th>
<td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
<td>1967</td>
<td>91%</td>
<td>122</td>
</tr>
<tr>
<th>8</th>
<td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
<td>1939</td>
<td>90%</td>
<td>72</td>
</tr>
<tr>
<th>9</th>
<td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
<td>1952</td>
<td>89%</td>
<td>85</td>
</tr>
<tr>
<th>10</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
<td>2010</td>
<td>84%</td>
<td>78</td>
</tr>
</tbody>
</table>
</div><!--/demo-html -->





<h3>Making the table responsive</h3>

<p>By default, a table with reflow mode will display the stacked presentation style on all screen widths. The styles to make the table responsive are added by applying a media query with rules to switch to the tabular style presentation above a specific screen width.</p>
<p>This is done by wrapping a few simple CSS rules in and a media query that only applies the rules above a certain width breakpoint. The styles make the table header rows visible, display the cells in a tabular format, and hide the generated label elements within each. Here is an example media query that swaps the presentation at 40em (640 pixels): </p>


<pre><code><strong>@media ( min-width: 40em ) {</strong>
/* Show the table header rows and set all cells to display: table-cell */
.my-custom-breakpoint td,
.my-custom-breakpoint th,
.my-custom-breakpoint tbody th,
.my-custom-breakpoint tbody td,
.my-custom-breakpoint thead td,
.my-custom-breakpoint thead th {
display: table-cell;
margin: 0;
}
/* Hide the labels in each cell */
.my-custom-breakpoint td .ui-table-cell-label,
.my-custom-breakpoint th .ui-table-cell-label {
display: none;
}
<strong>}</strong>
</code></pre>

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



<h3>Choosing a breakpoint</h3>
<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>


<h3>Applying a preset breakpoint</h3>
<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>

<p></p>


<h3>Working with grouped column headers</h3>
<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><!-- /content -->

<div data-role="footer" class="jqm-footer" data-theme="c">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /jqm-footer -->

<?php include( '../../nav.html' ); ?>


</div><!-- /page -->
</body>
</html>
178 docs/demos/widgets/transitions/index.html
View file
@@ -0,0 +1,178 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Transitions - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../_assets/favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<script src="../../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../../js/"></script>
</head>
<body>
<div data-role="page" class="jqm-demos">

<div data-role="panel" id="transition-sections" class="jqm-nav-panel" data-position="right" data-display="overlay" data-theme="c">

<ul data-role="listview" data-inset="false" data-theme="d" data-divider-theme="d" class="jqm-list">

</ul>
</div>

<div data-role="header" class="jqm-header" data-theme="f">
<h1>jQuery Mobile</h1>
<a href="#panel-nav" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="../../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
</div><!-- /header -->

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

<h1>Transitions</h1>


<p class="jqm-intro">The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation.
<a href="#transition-sections" class="jqm-sections-link">Jump to section <span class="ui-icon ui-icon-bars">&nbsp;</span></a>
</p>

<h2>Page transitions</h2>



<style>
table { width:100%; border-bottom:1px solid #ccc; border-spacing: 0; }
th { text-align:left; }
th h3 { margin:.6em 0; }
th, td { vertical-align:top; border-top:1px solid #ccc; padding: 1px 3px; }
td .ui-btn { margin:.4em 0 .5em 0; }
td .ui-btn-inner { padding: .4em 15px; }
</style>

<div data-demo-html="true">
<table margin="0">
<tr>
<th><h3>fade</h3></th>
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
<td><a href="page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
</tr>
<tr>
<th><h3>pop</h3></th>
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
<td><a href="page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
</tr>
<tr>
<th><h3>flip</h3></th>
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
<td><a href="page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
</tr>
<tr>
<th><h3>turn</h3></th>
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
<td><a href="page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
</tr>
<tr>
<th><h3>flow</h3></th>
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
<td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
</tr>
<tr>
<th><h3>slidefade</h3></th>
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
<td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
</tr>
<tr>
<th><h3>slide</h3></th>
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
<td><a href="page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
</tr>
<tr>
<th><h3>slideup</h3></th>
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
<td><a href="page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
</tr>
<tr>
<th><h3>slidedown</h3></th>
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
<td><a href="page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
</tr>
<tr>
<th><h3>none</h3></th>
<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
<td><a href="page-transitions-page.html" data-role="button" data-transition="none" data-inline="true">page</a></td>
</tr>
</table>
</div><!-- /demo-html -->

<p><strong>Important:</strong> Some platforms currently have issues with transitions.
We are working on a solution to solve the problem for everyone.
If you are experiencing flickers and flashes during or at the end of a transition we suggest the following workaround.
Please note that this workaround should be throughly tested on the target platform before deployment.
This workaround is known to cause performance issues, and browser crashes on some platforms especially Android.
Add the following code to your custom css.
</p>
<code>
.ui-page { -webkit-backface-visibility: hidden; }
</code>


<p><strong>Only seeing fade transitions?</strong> To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).</p>

<p><strong>Transitions were originally inspired by <a href="http://www.jqtouch.com/">jQtouch</a></strong> They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.</p>

<h2>Setting a transition on a link or form submit</h2>
<p>By default, the framework applies a <strong>fade</strong> transition. To set a custom transition effect, add the <code>data-transition</code> attribute to the link. </p>

<code><code>
&lt;a href=&quot;index.html&quot; <strong>data-transition=&quot;pop&quot;</strong>&gt;I'll pop&lt;/a&gt;
</code></code>

<p>When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the <code>data-direction="reverse"</code> attribute to a link.</p>

<h2>Global configuration of transitions</h2>

<p>Set the <code>defaultPageTransition</code> <a href="../api/globalconfig.html">global option</a> if you'd prefer a different default transition. Dialogs have a different option called <code>defaultDialogTransition</code> that can also be configured.</p>


<h2>Browser support and performance</h2>
<p>All transitions are built with CSS keyframe animations and include <code>-webkit</code> vendor prefixed rules for iOS, Blackberry, Android, Safari and Chrome browsers, <code>-moz</code> rules for Firefox browsers, and unprefixed rules for Windows Phone 8 and IE10. Support for keyframe animations and transition smoothness is determined by the browser version and hardware and will safely fall back to no transition if animations aren't supported. To proactively exclude transition in situations with poor performance, we exclude browsers that lack 3D transforms and provide a fallback transition and apply a max width for when transitions are applied.</p>

<h2>Defining fallback transitions for non-3D support</h2>
<p>By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.</p>

<p>The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":</p>
<code>$.mobile.transitionFallbacks.slideout = "none"</code>

<h2>Setting a max scroll for transitions</h2>
<p>By default, transitions are disabled (set to "none") when you're either coming FROM or going TO a page where the scroll position is 3x the height of the device's screen.
This feature was added because of the slow response times and the possibility of browser crashing when clicking on a list item (or any navigation element) far down a long page which leads to the
browser trying to animate a really massively tall page from the scroll position to the top of the screen. The scroll position, not total screen height, is the determining factor for performance.
This scroll position breakpoint is configurable via the new <code>getMaxScrollForTransition</code> function.</p>

<h2>Setting a max width for transitions</h2>
<p>By default, transitions can be disabled (set to "none") when the window width is greater than a certain pixel width. This feature is useful because transitions can be distracting or perform poorly on larger screens. This value is configurable via the global option <code>$.mobile.maxTransitionWidth</code>, which defaults to <code>false</code>. The option accepts any number representing a pixel width or <code>false</code> value. If it's not <code>false</code>, the handler will use a "none" transition when the window is wider than the specified value.</p>

<h2>Using same page transition</h2>
<p>Transitions to the current active page are ignored by default but can be enabled by using the <code>allowSamePageTransition</code> option of the <code>$.mobile.changePage</code> <a href="../api/methods.html">method</a>. Note that not all transitions will work as expected and may end in an impractical result. </p>

<h2>Creating custom transitions</h2>
<p>jQuery Mobile allows for the addition of <a href="page-customtransitions.html">custom transitions</a> to the <code>$.mobile.transitionHandlers</code> dictionary so you can expand the selection of transitions on your site or app.





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

<div data-role="footer" class="jqm-footer" data-theme="c">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /jqm-footer -->

<?php include( '../../nav.html' ); ?>


</div><!-- /page -->
</body>
</html>
6 .../widgets/ajax-nav/transitions-dialog.html → .../transitions/page-transitions-dialog.html
View file
@@ -3,16 +3,18 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Dialog</title>
<title>Transitions - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../_assets/favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<script src="../../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../../js/"></script>
</head>
<body>
<div data-role="page" id="dialog-success" data-dom-cache="true"><!-- dialog -->

<div data-role="page" id="dialog-success" data-dom-cache="true"><!-- dialog-->

<div data-role="header" data-theme="e">
<h1>Dialog</h1>
12 ...os/widgets/ajax-nav/transitions-page.html → ...ts/transitions/page-transitions-page.html
View file
@@ -3,17 +3,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Page</title>
<title>Transitions - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../_assets/favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<script src="../../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../../js/"></script>
</head>
<body>
<div data-role="page" id="page-success" data-dom-cache="true"><!-- page -->




<div data-role="page" id="page-success" data-dom-cache="true"><!-- page-->
<div data-role="header" data-theme="a">
<h1>Page</h1>
</div><!-- /header -->
@@ -61,7 +64,6 @@ <h2>Here's a few form elements</h2>
<input type="search" name="password" id="search" placeholder="Search..." value="" />
</div>
</div><!-- /footer -->

</div><!-- /page -->
</div>
</body>
</html>
2 docs/pages/Backbone-Require/index.html
View file
@@ -6,7 +6,7 @@

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="js/libs/require.js" data-main="js/mobile"></script>
</head>
<body>
4 docs/pages/multipage-template.html
View file
@@ -5,9 +5,9 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head>


12 docs/pages/page-anatomy.html
View file
@@ -31,7 +31,7 @@ <h1>Anatomy of a Page</h1>
<h2>Mobile page structure</h2>

<p>A jQuery Mobile site must start with an HTML5 "doctype" to take full advantage of all of the framework's features. (Older devices with browsers that don't understand HTML5 will safely ignore the 'doctype' and various custom attributes.) </p>
<p>In the "head", references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off. jQuery Mobile 1.3 beta (1.3.0-beta.1) works with versions of jQuery core from 1.7.0 to 1.9.0. 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>In the "head", references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off. jQuery Mobile 1.3 RC1 (1.3.0-rc.1) works with versions of jQuery core from 1.7.0 to 1.9.0. 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>

<pre><code>
<strong>&lt;!DOCTYPE html&gt; </strong>
@@ -41,9 +41,9 @@ <h2>Mobile page structure</h2>

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css&quot; /&gt;
&lt;script src=&quot;http://code.jquery.com/jquery-1.9.0.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
@@ -93,9 +93,9 @@ <h2>Putting it together: Basic single page template</h2>

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css&quot; /&gt;
&lt;script src=&quot;http://code.jquery.com/jquery-1.8.3.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css&quot; /&gt;
&lt;script src=&quot;http://code.jquery.com/jquery-1.9.0.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

4 docs/pages/page-template.html
View file
@@ -5,9 +5,9 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head>

<body>
73 docs/panels/index.html
View file
@@ -4,9 +4,9 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Slide Panel</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
@@ -15,7 +15,7 @@
<div data-role="page" class="ui-responsive-panel">

<!-- defaultpanel -->
<div data-role="panel" id="defaultpanel" data-theme="b">
<div data-role="panel" id="defaultpanel">

<h3>Default panel options</h3>
<p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p>
@@ -82,7 +82,7 @@ <h2>Where panel markup goes in a page</h2>

<h4>CSS column-count &amp; forms</h4>

<p>To avoid blinks when opening a panel, we force hardware acceleration on WebKit browsers. The CSS that is used to do this can cause issues with form elements on the page if you use <code>column-count</code> to layout the form. To resolve this you have to set the following rule for the <code>div</code> that contains the form or the field container of each form element:
<p>To avoid blinks when opening a panel, we force hardware acceleration on WebKit browsers. The CSS that is used to do this can cause issues with form elements on the page if you use <code>column-count</code> to layout the form. To resolve this you have to set the following rule for the <code>div</code> that contains the form or the field container of each form element:</p>

<pre><code>
-webkit-transform: translate3d(0,0,0);
@@ -180,11 +180,9 @@ <h2>Styling panels</h2>

<p>Panels have a fixed width of 17em (272 pixels) which is narrow enough to still show some of the page contents when open to make clicking out to close easy, and still looks good on wider tablet or desktop screens. The styles to set widths on panels are fairly complex but these can be overridden with CSS as needed.</p>

<p>Other than the width and 100% height styles, panels have very little styling on their own. You can set a theme on the panel by add a <code>data-theme</code> to the panel container or add your own classes to style it as needed.</p>
<p>Other than the theme background, width and 100% height styles, panels have very little styling on their own. The default theme for panels is "c". You can set a different theme for the panel by adding a <code>data-theme</code> to the panel container, or set <code>data-theme="none"</code> and add your own classes to style it as needed.</p>

<p>Note that adding padding, borders, or margins directly to the panel container will alter the overall dimensions and could cause the positioning and animation to be affected.</p>

<p>To add padding to a panel, we recommend adding a container inside the panel and applying styles to that to avoid any issues. All the examples on this page follow this pattern.</p>
<p>Note that adding padding, borders, or margins directly to the panel container will alter the overall dimensions and could cause the positioning and animation to be affected. To avoid this, apply styles to the panel content wrapper (<code>.ui-pannel-inner</code>).</p>


<h2>Making the panel responsive</h2>
@@ -194,27 +192,32 @@ <h2>Making the panel responsive</h2>
<p>Here is an example of these rules wrapped in a media query to only apply this behavior above 35em (560px):</p>

<pre><code>
/* wrap push on wide viewports once open */
@media (min-width: 35em){
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal {
margin-right: 17em;
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
margin: 0 0 0 17em;
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal {
width: auto;
}
.ui-responsive-panel .ui-panel-dismiss-display-push {
display: none;
}
@media (min-width:35em){

/* wrap on wide viewports once open */

.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
margin-right: 17em;
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
margin-left: 17em;
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal {
width: auto;
}

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

}
</code></pre>

@@ -232,7 +235,7 @@ <h4>Applying a preset breakpoint</h4>
<!-- Here are a bunch of panels at the end, just before the close page tag -->

<!-- leftpanel1 -->
<div data-role="panel" id="leftpanel1" data-position="left" data-display="reveal" data-dismissible="true" data-theme="a">
<div data-role="panel" id="leftpanel1" data-position="left" data-display="reveal" data-theme="a">

<h3>Left Panel: Reveal</h3>
<p>This panel is positioned on the left with the reveal display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
@@ -243,7 +246,7 @@ <h3>Left Panel: Reveal</h3>


<!-- leftpanel2 -->
<div data-role="panel" id="leftpanel2" data-position="left" data-display="push" data-dismissible="true" data-theme="a">
<div data-role="panel" id="leftpanel2" data-position="left" data-display="push" data-theme="a">

<h3>Left Panel: Push</h3>
<p>This panel is positioned on the left with the push display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
@@ -254,7 +257,7 @@ <h3>Left Panel: Push</h3>


<!-- leftpanel3 -->
<div data-role="panel" id="leftpanel3" data-position="left" data-display="overlay" data-dismissible="true" data-theme="a">
<div data-role="panel" id="leftpanel3" data-position="left" data-display="overlay" data-theme="a">

<h3>Left Panel: Overlay</h3>
<p>This panel is positioned on the left with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
@@ -265,7 +268,7 @@ <h3>Left Panel: Overlay</h3>


<!-- rightpanel1 -->
<div data-role="panel" id="rightpanel1" data-position="right" data-display="reveal" data-dismissible="true" data-theme="b">
<div data-role="panel" id="rightpanel1" data-position="right" data-display="reveal" data-theme="b">

<h3>Right Panel: Reveal</h3>
<p>This panel is positioned on the right with the reveal display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
@@ -276,7 +279,7 @@ <h3>Right Panel: Reveal</h3>


<!-- rightpanel2 -->
<div data-role="panel" id="rightpanel2" data-position="right" data-display="push" data-dismissible="true" data-theme="b">
<div data-role="panel" id="rightpanel2" data-position="right" data-display="push" data-theme="b">

<h3>Right Panel: Push</h3>
<p>This panel is positioned on the right with the push display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
@@ -287,7 +290,7 @@ <h3>Right Panel: Push</h3>


<!-- rightpanel3 -->
<div data-role="panel" id="rightpanel3" data-position="right" data-display="overlay" data-dismissible="true" data-theme="b">
<div data-role="panel" id="rightpanel3" data-position="right" data-display="overlay" data-theme="b">

<h3>Right Panel: Overlay</h3>
<p>This panel is positioned on the right with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
2 docs/panels/options.html
View file
@@ -53,7 +53,7 @@ <h2>Panels</h2>
<dt><code>swipeClose</code> default: true</dt>
<dd>Sets whether the panel can be closed by swiping over the panel or, if <code>dismissible=true</code>, the page content and toolbars. Also available via the <code>data-swipe-close</code> attribute on the panel.</dd>

<dt><code>theme</code> default: null</dt>
<dt><code>theme</code> default: "c"</dt>
<dd>Theme swatch for the panel. Can be any valid swatch letter in your theme (a-z). Also available via the <code>data-theme</code> attribute on the panel container.</dd>

</dl>
52 js/jquery.mobile.navigation.js
View file
@@ -66,6 +66,9 @@ define( [
}
}),

// used to track last vclicked element to make sure its value is added to form data
$lastVClicked = null,

//will be defined when a link is clicked and given an active class
$activeClickedLink = null,

@@ -986,31 +989,12 @@ define( [
return path.makeUrlAbsolute( url, base);
}

function maybeCreateHiddenInput( $el ) {
var type = $el.attr( "type" ),
name = $el.attr( "name" );

if ( type !== "button" && type !== "reset" && name ) {
// Add hidden input so the value of the clicked button will be recorded
// in the submitted form data, but remove the hidden input from the form
// after the value has been recorded so as to avoid multiple copies of it
// preceding the original button.
$.mobile.document.one( "submit",
$.proxy( function() { this.remove(); },
$( "<input>", {
type: "hidden",
name: $el.attr( "name" ),
value: $el.attr( "value" )
}).insertBefore( $el ) ) );
}
}

//The following event bindings should be bound after mobileinit has been triggered
//the following deferred is resolved in the init file
$.mobile.navreadyDeferred = $.Deferred();
$.mobile._registerInternalEvents = function() {
var getAjaxFormData = function( $form, calculateOnly ) {
var type, target, url, ret = true;
var type, target, url, ret = true, formData, vclickedName;
if ( !$.mobile.ajaxEnabled ||
// test that the form is, itself, ajax false
$form.is( ":jqmData(ajax='false')" ) ||
@@ -1048,11 +1032,30 @@ define( [

if ( !calculateOnly ) {
type = $form.attr( "method" );
formData = $form.serializeArray();

if ( $lastVClicked && $lastVClicked[ 0 ].form === $form[ 0 ] ) {
vclickedName = $lastVClicked.attr( "name" );
if ( vclickedName ) {
// Make sure the last clicked element is included in the form
$.each( formData, function( key, value ) {
if ( value.name === vclickedName ) {
// Unset vclickedName - we've found it in the serialized data already
vclickedName = "";
return false;
}
});
if ( vclickedName ) {
formData.push( { name: vclickedName, value: $lastVClicked.attr( "value" ) } );
}
}
}

ret = {
url: url,
options: {
type: type && type.length && type.toLowerCase() || "get",
data: $form.serialize(),
data: $.param( formData ),
transition: $form.jqmData( "transition" ),
reverse: $form.jqmData( "direction" ) === "reverse",
reloadPage: true
@@ -1082,10 +1085,9 @@ define( [
return;
}

// If this is a vclick on a button, we must make sure its value will be
// recorded in the resulting form data by adding a hidden input that
// carries the button's value
maybeCreateHiddenInput( $( target ) );
// Record that this element was clicked, in case we need it for correct
// form submission during the "submit" handler above
$lastVClicked = $( target );

// Try to find a target element to which the active class will be applied
if ( $.data( target, "mobile-button" ) ) {
4 js/jquery.mobile.ns.js
View file
@@ -2,9 +2,11 @@
//>>description: The mobile namespace on the jQuery object
//>>label: Namespace
//>>group: Core
define([ "jquery" ], function( $ ) {
define([ "jquery" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $ ) {
$.mobile = {};
}( jQuery ));
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
//>>excludeEnd("jqmBuildExclude");
1 js/jquery.mobile.transition.js
View file
@@ -1,4 +1,3 @@

//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: Animated page change core logic and sequence handlers
//>>label: Transition Core
1 js/jquery.mobile.vmouse.js
View file
@@ -1,4 +1,3 @@

// This plugin is an experiment for abstracting away the touch and mouse
// events so that developers don't have to worry about which method of input
// the device their document is loaded on supports.
4 js/widgets/fixedToolbar.workarounds.js
View file
@@ -31,8 +31,8 @@ define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.core", "../jque
return;
}
//check os version if it dosent match one with workarounds return
if( os === "ios" && wkversion && wkversion > 533 && wkversion < 536 ) {
//iOS 5 run all workarounds for iOS 5
if( os === "ios" ) {
//iOS workarounds
self._bindScrollWorkaround();
} else if( os === "android" && wkversion && wkversion < 534 ) {
//Android 2.3 run all Android 2.3 workaround
5 js/widgets/navbar.js
View file
@@ -41,6 +41,11 @@ $.widget( "mobile.navbar", $.mobile.widget, {
if ( !$(event.target).hasClass( "ui-disabled" ) ) {
$navbtns.removeClass( $.mobile.activeBtnClass );
$( this ).addClass( $.mobile.activeBtnClass );
// The code below is a workaround to fix #1181. We have to see why removeActiveLinkClass() doesn't take care of it.
var activeNavbtn = $( this );
$( document ).one( "pagechange", function( event ) {
activeNavbtn.removeClass( $.mobile.activeBtnClass );
});
}
});

123 js/widgets/panel.js
View file
@@ -30,7 +30,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
animate: "ui-panel-animate"
},
animate: true,
theme: null,
theme: "c",
position: "left",
dismissible: true,
display: "reveal", //accepts reveal, push, overlay
@@ -222,7 +222,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
if ( this.href.split( "#" )[ 1 ] === self._panelID && self._panelID !== undefined ) {
e.preventDefault();
var $link = $( this );
if ( $link.is( ":jqmData(role='button')" ) ) {
if ( ! $link.hasClass( "ui-link" ) ) {
$link.addClass( $.mobile.activeBtnClass );
self.element.one( "panelopen panelclose", function() {
$link.removeClass( $.mobile.activeBtnClass );
@@ -256,10 +256,10 @@ $.widget( "mobile.panel", $.mobile.widget, {
var self = this;

self._page
// Close immediately if another panel on the page opens
// Close the panel if another panel on the page opens
.on( "panelbeforeopen", function( e ) {
if ( self._open && e.target !== self.element[ 0 ] ) {
self.close( true );
self.close();
}
})
// clean up open panels after page hide
@@ -287,39 +287,64 @@ $.widget( "mobile.panel", $.mobile.widget, {
if ( !this._open ) {
var self = this,
o = self.options,
_openPanel = function() {
self._page.off( "panelclose" );
self._page.jqmData( "panel", "open" );

if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
self.element.add( self._wrapper ).on( self._transitionEndEvents, complete );
} else {
setTimeout( complete, 0 );
}

if ( self.options.theme && self.options.display !== "overlay" ) {
self._page
.removeClass( self._pageTheme )
.addClass( "ui-body-" + self.options.theme );
}

self.element.removeClass( o.classes.panelClosed ).addClass( o.classes.panelOpen );

self._contentWrapOpenClasses = self._getPosDisplayClasses( o.classes.contentWrap );
self._wrapper
.removeClass( o.classes.contentWrapClosed )
.addClass( self._contentWrapOpenClasses + " " + o.classes.contentWrapOpen );

self._fixedToolbarOpenClasses = self._getPosDisplayClasses( o.classes.contentFixedToolbar );
self._fixedToolbar
.removeClass( o.classes.contentFixedToolbarClosed )
.addClass( self._fixedToolbarOpenClasses + " " + o.classes.contentFixedToolbarOpen );

self._modalOpenClasses = self._getPosDisplayClasses( o.classes.modal ) + " " + o.classes.modalOpen;
if ( self._modal ) {
self._modal.addClass( self._modalOpenClasses );
}
},
complete = function() {
self.element.add( self._wrapper ).add( self._fixedToolbar ).off( self._transitionEndEvents, complete );
self.element.add( self._wrapper ).off( self._transitionEndEvents, complete );

self._page.addClass( o.classes.pagePanelOpen );

self._positionPanel();
self._bindFixListener();

self._trigger( "open" );
};

if ( this.element.closest( ".ui-page-active" ).length < 0 ) {
immediate = true;
}

self._trigger( "beforeopen" );

if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
self.element.add( self._wrapper ).add( self._fixedToolbar ).on( self._transitionEndEvents, complete );

if ( self._page.jqmData('panel') === "open" ) {
self._page.on( "panelclose", function() {
_openPanel();
});
} else {
setTimeout( complete, 0 );
}
if ( self.options.theme && self.options.display !== "overlay" ) {
self._page.removeClass( self._pageTheme ).addClass( "ui-body-" + self.options.theme );
}
self.element.removeClass( o.classes.panelClosed );
self.element.addClass( o.classes.panelOpen );
self._contentWrapOpenClasses = self._getPosDisplayClasses( o.classes.contentWrap );
self._wrapper.removeClass( o.classes.contentWrapClosed );
self._wrapper.addClass( self._contentWrapOpenClasses + " " + o.classes.contentWrapOpen );
self._fixedToolbarOpenClasses = self._getPosDisplayClasses( o.classes.contentFixedToolbar );
self._fixedToolbar.removeClass( o.classes.contentFixedToolbarClosed );
self._fixedToolbar.addClass( self._fixedToolbarOpenClasses + " " + o.classes.contentFixedToolbarOpen );
self._modalOpenClasses = self._getPosDisplayClasses( o.classes.modal ) + " " + o.classes.modalOpen;
if ( this._modal ) {
self._modal.addClass( self._modalOpenClasses );
_openPanel();
}

self._open = true;
}
},
@@ -328,39 +353,51 @@ $.widget( "mobile.panel", $.mobile.widget, {
if ( this._open ) {
var o = this.options,
self = this,
_closePanel = function() {
if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
self.element.add( self._wrapper ).on( self._transitionEndEvents, complete );
} else {
setTimeout( complete, 0 );
}

self._page.removeClass( o.classes.pagePanelOpen );
self.element.removeClass( o.classes.panelOpen );
self._wrapper.removeClass( o.classes.contentWrapOpen );
self._fixedToolbar.removeClass( o.classes.contentFixedToolbarOpen );

if ( self._modal ) {
self._modal.removeClass( self._modalOpenClasses );
}
},
complete = function() {
if ( self.options.theme && self.options.display !== "overlay" ) {
self._page.removeClass( "ui-body-" + self.options.theme ).addClass( self._pageTheme );
}
self.element.add( self._wrapper ).add( self._fixedToolbar ).off( self._transitionEndEvents, complete );
self.element.add( self._wrapper ).off( self._transitionEndEvents, complete );
self.element.addClass( o.classes.panelClosed );
self._wrapper.removeClass( self._contentWrapOpenClasses );
self._wrapper.addClass( o.classes.contentWrapClosed );
self._fixedToolbar.removeClass( self._fixedToolbarOpenClasses );
self._fixedToolbar.addClass( o.classes.contentFixedToolbarClosed );
self._page.removeClass( o.classes.pagePanelOpen );

self._wrapper
.removeClass( self._contentWrapOpenClasses )
.addClass( o.classes.contentWrapClosed );

self._fixedToolbar
.removeClass( self._fixedToolbarOpenClasses )
.addClass( o.classes.contentFixedToolbarClosed );

self._fixPanel();
self._unbindFixListener();
$.mobile.resetActivePageHeight();

self._page.jqmRemoveData( "panel" );
self._trigger( "close" );
};

if ( this.element.closest( ".ui-page-active" ).length < 0 ) {
immediate = true;
}
self._trigger( "beforeclose" );

if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
self.element.add( self._wrapper ).add( self._fixedToolbar ).on( self._transitionEndEvents, complete );
} else {
setTimeout( complete, 0 );
}

self.element.removeClass( o.classes.panelOpen );
if ( this._modal ) {
self._modal.removeClass( self._modalOpenClasses );
}
self._wrapper.removeClass( o.classes.contentWrapOpen );
self._fixedToolbar.removeClass( o.classes.contentFixedToolbarOpen );
_closePanel();

self._open = false;
}
@@ -383,6 +420,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
this._page.find( "a" ).unbind( "panelopen panelclose" );
this._page.removeClass( classes.pagePanel );
if ( this._open ) {
this._page.jqmRemoveData( "panel" );
this._page.removeClass( classes.pagePanelOpen );
if ( theme ) {
this._page.removeClass( "ui-body-" + theme ).addClass( this._pageTheme );
@@ -392,6 +430,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
} else if ( this._open ) {
this._wrapper.removeClass( classes.contentWrapOpen );
this._fixedToolbar.removeClass( classes.contentFixedToolbarOpen );
this._page.jqmRemoveData( "panel" );
this._page.removeClass( classes.pagePanelOpen );
if ( theme ) {
this._page.removeClass( "ui-body-" + theme ).addClass( this._pageTheme );
16 tests/unit/button/button_core.js
View file
@@ -34,20 +34,6 @@
deepEqual( textValueButton.siblings().text(), "bar" );
});

// Issue 2877
test( "verify the button placeholder is added many times", function() {
var $form = $( "#hidden-element-addition-form" ), count = 3;
expect( count * 2 );

for( var x = 0; x < count; x++ ) {
$( "#hidden-element-addition" ).trigger( "vclick" );
deepEqual( $form.find( "input[type='hidden']" ).length, 1, "hidden form input should be added" );

$form.trigger( "submit" );
deepEqual( $form.find( "[type='hidden']" ).length, 0, "hidden form input is removed" );
}
});

test( "theme should be inherited", function() {
var $inherited = $( "#theme-check" ),
$explicit = $( "#theme-check-explicit" );
@@ -64,4 +50,4 @@
ok( $htmlval.parent().find(".ui-btn-text").text().length > 1, "If the text is pulled from a button’s value, anything HTML-like should be disregarded." );
});

})( jQuery );
})( jQuery );