Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-03 20:34:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'master' into fastclick

Browse source 
Resolved Conflicts:
	js/jquery.mobile.buttonMarkup.js
	js/jquery.mobile.event.js
	js/jquery.mobile.forms.checkboxradio.js
	js/jquery.mobile.forms.select.js
	js/jquery.mobile.listview.js
This commit is contained in:
jblas@adobe.com 2011-03-27 21:00:22 -07:00
commit 729cda075a
126 changed files with 1584 additions and 1106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
docs/_assets/images/version-a4.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 55 KiB

14
docs/_assets/js/_viewsource.js
View file

@ -2,14 +2,14 @@
$.fn.addSourceLink = function(style){
return $(this).each(function(){
var link = $('<a href="#" data-inline="true">View Source</a>'),
var link = $('<a href="#" data-'+ $.mobile.ns +'inline="true">View Source</a>'),
src = src = $('<div></div>').append( $(this).clone() ).html(),
page = $( "<div data-role='dialog' data-theme='a'>" +
"<div data-role='header' data-theme='b'>" +
"<a href='#' class='ui-btn-left' data-icon='delete' data-iconpos='notext'>Close</a>"+
page = $( "<div data-"+ $.mobile.ns +"role='dialog' data-"+ $.mobile.ns +"theme='a'>" +
"<div data-"+ $.mobile.ns +"role='header' data-"+ $.mobile.ns +"theme='b'>" +
"<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"icon='delete' data-"+ $.mobile.ns +"iconpos='notext'>Close</a>"+
"<div class='ui-title'>jQuery Mobile Source Excerpt</div>"+
"</div>"+
"<div data-role='content'></div>"+
"<div data-"+ $.mobile.ns +"role='content'></div>"+
"</div>" )
.appendTo( "body" )
.page();
@ -21,7 +21,7 @@ $.fn.addSourceLink = function(style){
})
.click(function(){
var codeblock = $('<pre><code></code></pre>');
src = src.replace(/&/gmi, '&amp;').replace(/"/gmi, '&quot;').replace(/>/gmi, '&gt;').replace(/</gmi, '&lt;').replace('data-jqm-source="true"','');
src = src.replace(/&/gmi, '&amp;').replace(/"/gmi, '&quot;').replace(/>/gmi, '&gt;').replace(/</gmi, '&lt;').replace('data-'+ $.mobile.ns +'source="true"','');
codeblock.find('code').append(src);
var activePage = $(this).parents('.ui-page-active');
@ -38,5 +38,5 @@ $.fn.addSourceLink = function(style){
//set up view source links
$('div').live('pagebeforecreate',function(){
$(this).find('[data-jqm-source="true"]').addSourceLink();
$(this).find('[data-'+ $.mobile.ns +'source="true"]').addSourceLink();
});

2
docs/_assets/js/jqm-docs.js
View file

@ -1,7 +1,7 @@
//set up the theme switcher on the homepage
$('div').live('pagecreate',function(event){
if( !$(this).is('.ui-dialog')){
$('<a href="#themeswitcher" data-rel="dialog" data-transition="pop">Switch theme</a>')
$('<a href="#themeswitcher" data-'+ $.mobile.ns +'rel="dialog" data-'+ $.mobile.ns +'transition="pop">Switch theme</a>')
.buttonMarkup({
'icon':'gear',
'inline': true,

2
docs/about/features.html
View file

@ -27,7 +27,7 @@
<li><strong>Lightweight size</strong> (12k compressed for all mobile functionality) and minimal image dependencies for speed.</li>
<li><strong>HTML5 Markup-driven configuration</strong> of pages and behavior for fast development and minimal required scripting.</li>
<li><strong>Progressive enhancement</strong> approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.</li>
<li><strong>Automatic initialization</strong> by using HTML5 <code>data-role</code> attributes in the HTML markup to act as the trigger to automatically initialize all jQuery Mobile widgets found on a page.</li>
<li><strong>Automatic initialization</strong> by using HTML5 <code> data-role</code> attributes in the HTML markup to act as the trigger to automatically initialize all jQuery Mobile widgets found on a page.</li>
<li><strong>Accessibility</strong> features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.</li>
<li><strong>New events</strong> streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API. </li>
<li><strong>New plugins</strong> enhance native controls with touch-optimized, themable controls. </li>

7
docs/about/platforms.html
View file

@ -20,12 +20,13 @@
<div data-role="content">
<h2>Supported platforms in alpha 3</h2>
<p>In the alpha 3 release, the following platforms and browsers have a solid jQuery Mobile experience with pages fully functional and rendering as designed. That being said, there are still a fair amount of bugs and performance improvements to be tackled before the 1.0 release. </p>
<h2>Supported platforms in Alpha 4</h2>
<p>In the alpha 4 release, the following platforms and browsers have a solid jQuery Mobile experience with pages fully functional and rendering as designed. New in this release is WP7 support. </p>
<ul>
<li>Apple iOS (3.1-4.2): tested on iPhone, iPod Touch, iPad</li>
<li>Android (1.6-2.3): all devices, tested on the HTC Incredible, Motorola Droid, Google G1 and Nook Color</li>
<li>Blackberry 6: tested on Torch and Style</li>
<li>Windows Phone 7: tested on HTC Surround</li>
<li>Palm WebOS (1.4): tested on Pre, Pixi</li>
<li>Opera Mobile (10.1): Android</li>
<li>Opera Mini (5.02): iOS, Android</li>
@ -33,7 +34,7 @@
</ul>
<h2>Target platform additions for beta</h2>
<p>The team is now focusing on bringing support to Blackberry 5, Nokia/Symbian, and Windows Phone 7 for the upcoming beta release. We don't yet have phones to test bada or MeeGo but these will be added as soon as we can get devices.</p>
<p>The team is now focusing on bringing support to Blackberry 5, Nokia/Symbian for the upcoming beta release. We don't yet have phones to test bada or MeeGo but these will be added as soon as we can get devices.</p>
<p>Since jQuery Mobile is built on the jQuery core, all pages should also work great on most recent versions of desktop browsers too - Firefox, Chrome, Safari, Internet Explorer, Opera, etc.</p>

6
docs/api/globalconfig.html
View file

@ -69,6 +69,9 @@ $(document).bind("mobileinit", function(){
<p>The following defaults are configurable via the <code>$.mobile</code> object:</p>
<dl>
<dt>ns (<em>string</em>, default: ""):</dt>
<dd>The namespaced used in data- attributes, for example, data-role. Can be set to anything, including a blank string which is the default. When using, it's clearest if you include a trailing dash, such as "mynamespace-" which maps to <code>data-mynamespace-foo="..."</code>.</dd>
<dt>subPageUrlKey (<em>string</em>, default: "ui-page"):</dt>
<dd>The url parameter used for referencing widget-generated sub-pages (such as those generated by nested listviews). Translates to to <em>example.html<strong>&ui-page=</strong>subpageIdentifier</em>. The hash segment before &ui-page= is used by the framework for making an Ajax request to the URL where the sub-page exists.</dd>
@ -97,6 +100,9 @@ $(document).bind("mobileinit", function(){
<dt>loadingMessage (<em>string</em>, default: "loading"):</dt>
<dd>Set the text that appears when a page is loading. If set to false, the message will not appear at all.</dd>
<dt>pageLoadErrorMessage (<em>string</em>, default: "Error Loading Page"):</dt>
<dd>Set the text that appears when a page fails to load through Ajax.</dd>
<dt>gradeA (<em>function that returns a boolean</em>, default: a function returning the value of $.support.mediaquery):</dt>
<dd>Any support conditions that must be met in order to proceed.</dd>

15
docs/api/methods.html
View file

@ -68,6 +68,21 @@ $.mobile.changePage("../alerts/confirm.html", "pop", false, false);
</dd>
<dt><code>jqmData(), jqmRemoveData(), and jqmHasData()</code> (<em>method</em>)</dt>
<dd>When working with jQuery Mobile, <code>jqmData</code> and <code>jqmRemoveData</code> should be used in place of jQuery core's <code>data</code> and <code>removeData</code> methods (note that this includes $.fn.data, $.fn.removeData, and the $.data, $.removeData, and $.hasData utilities), as they automatically incorporate getting and setting of namespaced data attributes (even if no namespace is currently in use).</dd>
<dd>
<dl>
<dt>Arguments:</dt>
<dd>See jQuery's <a href="http://api.jquery.com/jQuery.data/">data</a> and <a href="http://api.jquery.com/jQuery.removeData/">removeData</a> methods</dd>
<dt>Also:</dt>
<dd>When finding elements by their jQuery Mobile data attribute, please use the custom selector <code>:jqmData()</code>, as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling <code>$("div[data-role='page']")</code>, you should use <code>$("div:jqmData(role='page')")</code>, which internally maps to <code>$("div[data-"+ $.mobile.ns +"role='page']")</code> without forcing you to concatenate a namespace into your selectors manually.</dd>
</dl>
</dd>
<dt><code>$.mobile.pageLoading</code> (<em>method</em>)</dt>
<dd>Show or hide the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
<dd>

4
docs/api/themes.html
View file

@ -55,7 +55,7 @@
<div class="ui-bar ui-bar-e">Bar E</div>
</div><!-- end swatch-bars -->
<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. Learn more about <a href="../toolbars/bars-themes.html">toolbar theming</a>.</p>
<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. Learn more about <a href="../toolbars/bars-themes.html">toolbar theming</a>.</p>
@ -151,7 +151,7 @@
<p>This default 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 too. </p>
<p>If you want to add visual emphasis to a button and help it stand out visually from its parent toolbar, 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>
<p>If you want to add visual emphasis to a button and help it stand out visually from its parent toolbar, 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>
<div class="swatch-bars">
<div data-role="header" data-theme="a" class="ui-bar" data-backbtn="false">

2
docs/buttons/buttons-grouped.html
View file

@ -20,7 +20,7 @@
</div><!-- /header -->
<div data-role="content">
<p>Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code>data-role="controlgroup"</code> attribute &mdash; the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
<p>Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code> data-role="controlgroup"</code> attribute &mdash; the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
<pre><code>
&lt;div data-role=&quot;controlgroup&quot;&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Yes&lt;/a&gt;

16
docs/buttons/buttons-icons.html
View file

@ -25,10 +25,10 @@
<p>The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.</p>
<p>An icon can be added to a button by adding a <code>data-icon</code> attribute on the anchor specifying the icon to display. For example, the following markup:</p>
<p>An icon can be added to a button by adding a <code> data-icon</code> attribute on the anchor specifying the icon to display. For example, the following markup:</p>
<code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; <strong>data-icon=&quot;delete&quot;</strong>&gt;Delete&lt;/a&gt;
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; <strong> data-icon=&quot;delete&quot;</strong>&gt;Delete&lt;/a&gt;
</code>
<p>Creates this button with an icon:</p>
@ -36,7 +36,7 @@
<h2>Icon set</h2>
<p>The following <code>data-icon</code> attributes can be referenced to create the icons shown below:</p>
<p>The following <code> data-icon</code> attributes can be referenced to create the icons shown below:</p>
<p><strong>Left arrow</strong> - data-icon="arrow-l"</p>
<a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
@ -80,7 +80,7 @@
<p>By default, all icons in buttons are placed to the left of the button text. </p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="left">Delete</a>
<p>This default may be overridden using the <code>data-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:</p>
<p>This default may be overridden using the <code> data-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:</p>
<code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;<strong> data-iconpos=&quot;right&quot;</strong>&gt;Delete&lt;/a&gt;
@ -89,13 +89,13 @@
<p>Creates this button with right-aligned icon:</p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
<p>Icons can also be positioned above the text by specifying <code>data-iconpos="top"</code></p>
<p>Icons can also be positioned above the text by specifying <code> data-iconpos="top"</code></p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">Delete</a>
<p>Or icons can also be positioned below the text by specifying <code>data-iconpos="bottom"</code></p>
<p>Or icons can also be positioned below the text by specifying <code> data-iconpos="bottom"</code></p>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">Delete</a>
<p>You can also create an icon-only button, by setting the <code>data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code>data-iconpos="right"</code> on the previous example with <code>data-iconpos="notext"</code>:</p>
<p>You can also create an icon-only button, by setting the <code> data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code> data-iconpos="right"</code> on the previous example with <code> data-iconpos="notext"</code>:</p>
<code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;<strong> data-iconpos=&quot;notext&quot;</strong>&gt;Delete&lt;/a&gt;
@ -105,7 +105,7 @@
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
<h2>Custom Icons</h2>
<p>To use custom icons, specify a <code>data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code>data-icon</code> value and apply it to the button. You can then write a CSS rule that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
<p>To use custom icons, specify a <code> data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code> data-icon</code> value and apply it to the button. You can then write a CSS rule that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
<h2>Icons and themes</h2>

4
docs/buttons/buttons-inline.html
View file

@ -26,12 +26,12 @@
<a href="index.html" data-role="button">Button</a>
<p>However, if you want a more compact button that is only as wide as the text and icons inside, add the <code>data-inline="true"</code> attribute to the button:</p>
<p>However, if you want a more compact button that is only as wide as the text and icons inside, add the <code> data-inline="true"</code> attribute to the button:</p>
<a href="index.html" data-role="button" data-inline="true">Button</a>
<p>If you have multiple buttons that should sit side-by-side on the same line, wrap the buttons in a container that has a <code>data-inline="true"</code> attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. </p>
<p>If you have multiple buttons that should sit side-by-side on the same line, wrap the buttons in a container that has a <code> data-inline="true"</code> attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. </p>
<pre><code>
&lt;div data-inline=&quot;true&quot;&gt;

4
docs/buttons/buttons-themes.html
View file

@ -32,13 +32,13 @@
<div data-role="content" data-theme="e"><h4>E swatch</h4><a href="index.html" data-role="button">Button</a></div>
<h2>Assigning theme swatches</h2>
<p>Button can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code>data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
<p>Button can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code> data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
<pre><code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-theme=&quot;a&quot;&gt;Theme a&lt;/a&gt;
</code></pre>
<p>Here are 4 buttons with icons that have a different swatch letter assigned via the <code>data-theme</code> attribute.</p>
<p>Here are 4 buttons with icons that have a different swatch letter assigned via the <code> data-theme</code> attribute.</p>
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>

4
docs/buttons/buttons-types.html
View file

@ -25,7 +25,7 @@
<h2>Styling links as buttons</h2>
<p>In the main content block of a page, you can style any anchor link as a button by adding the <code>data-role="button"</code> to the link. The framework will add all necessary classes to style the link as a button. For example, this markup: </p>
<p>In the main content block of a page, you can style any anchor link as a button by adding the <code> data-role="button"</code> to the link. The framework will add all necessary classes to style the link as a button. For example, this markup: </p>
<code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Link button&lt;/a&gt;
@ -35,7 +35,7 @@
<a href="index.html" data-role="button">Link button</a>
<h2>Form buttons</h2>
<p>For ease of styling, the framework automatically converts any <code>button</code> element or <code>input</code> with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> into a custom styled link-based button &mdash; there is no need to add the <code>data-role="button"</code> attribute. </p>
<p>For ease of styling, the framework automatically converts any <code>button</code> element or <code>input</code> with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> into a custom styled link-based button &mdash; there is no need to add the <code> data-role="button"</code> attribute. </p>
<p>The original form-based button is hidden, but remains in the markup. When a click event fires on a link button, it triggers a click on the original form button.</p>

2
docs/content/content-collapsible.html
View file

@ -23,7 +23,7 @@
<div data-role="content">
<h2>Collapsible content markup</h2>
<p>To create a collapsible blocks of content, create a container and add the <code>data-role="collapsible"</code> attribute.</p>
<p>To create a collapsible blocks of content, create a container and add the <code> data-role="collapsible"</code> attribute.</p>
<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>

28
docs/content/content-themes.html
View file

@ -23,16 +23,16 @@
<h2>Theming the content area</h2>
<p>The main content area of a page (container with the <code>data-role="content"</code> attribute) should be themed by adding the <code>data-theme</code> attribute to the <code>data-role="page"</code> container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add to the <code>data-theme</code> to the content container, the background color will stop after the content so there may be a gap in color between the content and fixed footer.)</p>
<p>The main content area of a page (container with the <code> data-role="content"</code> attribute) should be themed by adding the <code> data-theme</code> attribute to the <code> data-role="page"</code> container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add to the <code> data-theme</code> to the content container, the background color will stop after the content so there may be a gap in color between the content and fixed footer.)</p>
<code>
&lt;div data-role=&quot;page&quot; <strong>data-theme=&quot;a&quot;</strong>&gt;
&lt;div data-role=&quot;page&quot; <strong> data-theme=&quot;a&quot;</strong>&gt;
</code>
<h2>Theming collapsible blocks</h2>
<p>To set the color of the collapsible header, add the <code>data-theme</code> attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.</p>
<p>To set the color of the collapsible header, add the <code> data-theme</code> attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.</p>
<code>
&lt;div data-role=&quot;collapsible&quot; data-collapsed=&quot;true&quot; <strong>data-theme=&quot;a&quot;&gt;</strong>
&lt;div data-role=&quot;collapsible&quot; data-collapsed=&quot;true&quot; <strong> data-theme=&quot;a&quot;&gt;</strong>
</code>
<h2>Themed examples</h2>
@ -41,8 +41,8 @@
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="a">
<h3>I'm a themed collapsible</h3>
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
<h3>I'm an themed collapsible</h3>
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
</div><!-- /themed container -->
@ -51,8 +51,8 @@
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>I'm a themed collapsible</h3>
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
<h3>I'm an themed collapsible</h3>
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
</div><!-- /themed container -->
@ -61,8 +61,8 @@
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="c">
<h3>I'm a themed collapsible</h3>
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
<h3>I'm an themed collapsible</h3>
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
</div><!-- /themed container -->
@ -71,8 +71,8 @@
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="d">
<h3>I'm a themed collapsible</h3>
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
<h3>I'm an themed collapsible</h3>
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
</div><!-- /themed container -->
@ -81,8 +81,8 @@
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="e">
<h3>I'm a themed collapsible</h3>
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
<h3>I'm an themed collapsible</h3>
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
</div><!-- /themed container -->

10
docs/forms/docs-forms.html
View file

@ -41,10 +41,10 @@
<p>By default, jQuery Mobile will automatically enhance certain native form controls into rich touch-friendly components. This is handled internally by finding form elements by tag name and running a plugin method on them, so for instance, a <code>select</code> element will be found and initialized with the "selectmenu" plugin, while an <code>input</code> element with a <code>type="checkbox"</code> will be enhanced with the "checkboxradio" plugin. Once initialized, you can address these enhanced components programmatically through their jQuery UI widget API methods (see documentation on available methods here: <a href="plugin-eventsmethods.html">Form Plugin Methods</a>). </p>
<h2>Preventing auto-initialization of form elements</h2>
<p>If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute <code>data-role="none"</code>. For example:</p>
<p>If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute <code> data-role="none"</code>. For example:</p>
<pre><code>
&lt;label for=&quot;foo&quot;&gt;
&lt;select name=&quot;foo&quot; id=&quot;foo&quot; <strong>data-role=&quot;none&quot;</strong>&gt;
&lt;select name=&quot;foo&quot; id=&quot;foo&quot; <strong> data-role=&quot;none&quot;</strong>&gt;
&lt;option value="a" &gt;A&lt;/option&gt;
&lt;option value="b" &gt;B&lt;/option&gt;
&lt;option value="c" &gt;C&lt;/option&gt;
@ -69,7 +69,7 @@ $(document).bind('mobileinit',function(){
<h2>Field containers</h2>
<p>To improve the styling to labels and form elements on wider screens, we recommend wrapping a <code>div</code> or <code>fieldset </code>with the <code>data-role="fieldcontain"</code> attribute around each label/form element. The framework will add a thin vertical bottom border on this container to act as a field separator and visually align the label and form elements for quick scanning.</p>
<p>To improve the styling to labels and form elements on wider screens, we recommend wrapping a <code>div</code> or <code>fieldset </code>with the <code> data-role="fieldcontain"</code> attribute around each label/form element. The framework will add a thin vertical bottom border on this container to act as a field separator and visually align the label and form elements for quick scanning.</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
@ -78,7 +78,7 @@ $(document).bind('mobileinit',function(){
</code></pre>
<h2>Refreshing form elements</h2>
<p>Every form control -- where applicable -- has a refresh method. Here are some examples:</p>
<p>Checkboxes:</p>
@ -113,7 +113,7 @@ myswitch .slider("refresh");
</pre></code>
<p>We're considering adding a refresh method to forms to let the framework refresh all the individual elemnts withing but that is a future enhancement.</p>
</div><!-- /content -->
</div><!-- /page -->

67
docs/forms/forms-all.html
View file

@ -129,7 +129,6 @@
<div data-role="fieldcontain">
<label for="select-choice-3" class="select">Your state:</label>
<select name="select-choice-3" id="select-choice-3">
<option>Custom menu...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
@ -183,62 +182,16 @@
</select>
</div>
<div data-role="fieldcontain">
<label for="select-choice-native" class="select">Your state:</label>
<select name="select-choice-native" id="select-choice-native" data-native-menu="true">
<option>Native menu...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="select-choice-a" class="select">Choose shipping method:</label>
<select name="select-choice-a" id="select-choice-a" data-native-menu="false">
<option>Custom menu example</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">

6
docs/forms/forms-checkboxes.html
View file

@ -30,9 +30,9 @@
<p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated.</p>
<p>Because checkboxes use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question. Add the <code>data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
<p>Because checkboxes use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question. Add the <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code>data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
<pre><code>
@ -55,7 +55,7 @@
<h2>Vertically grouped checkboxes</h2>
<p>Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code>data-role="controlgroup"</code> attribute on the fie.</p>
<p>Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the fie.</p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">

4
docs/forms/forms-radiobuttons.html
View file

@ -34,7 +34,7 @@
<p>Because radio buttons use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the radio buttons in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question.</p>
<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code>data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
@ -55,7 +55,7 @@
&lt;/div&gt;
</code></pre>
<p>To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code>data-role="controlgroup"</code> attribute on the fie.</p>
<p>To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the fie.</p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">

41
docs/forms/forms-sample-selfsubmit.php Executable file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery Mobile Docs - Forms</title>
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header" data-theme="e">
<h1>Sample form submit to self</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content" data-theme="c">
<form action="forms-sample-selfsubmit.php" method="post">
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Testing</legend>
<div>
<?php $g = $_REQUEST['gender']; ?>
<input type="radio" name="gender" value="m" id="gender-1" <?=$g=="m"? "checked": ""; ?> /><label for="gender-1">Male</label>
<input type="radio" name="gender" value="f" id="gender-2" <?=$g=="f"? "checked": ""; ?> /><label for="gender-2">Female</label>
</div>
</fieldset>
<button type="submit">Submit</submit>
</form>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

3
docs/forms/forms-sample.html
View file

@ -22,7 +22,8 @@
<h2>Ajax form submission</h2>
<p>In jQuery Mobile, form submissions are automatically handled using Ajax whenever possible, creating a smooth transition between the form and the result page. To ensure your form submits as intended, be sure to specify <code>action</code> and <code>method</code> properties on your form element.</p>
<p>In jQuery Mobile, form submissions are automatically handled using Ajax whenever possible, creating a smooth transition between the form and the result page. To ensure your form submits as intended, be sure to specify <code>action</code> and <code>method</code> properties on your form element. When unspecified, the method will default to <code>get</code>, and the <code>action</code> will default to the current page's relative path (found via <code>$.mobile.path.get()</code></p>
<p>Forms also accept attributes for transitions just like anchors, such as <code>data-transition="pop"</code> and <code>data-direction="reverse"</code>. To submit a form without Ajax, you can either disable Ajax form handling globally, or per form via the <code>data-ajax="false"</code> attribute. The <code>target</code> attribute (as in <code>target="_blank"</code>) is respected on forms as well, and will default to the browser's handling of that target when the form submits. Note that unlike anchors, the <code>rel</code> attribute is not allowed on forms.</p>
<h2>Non-Ajax handling</h2>

2
docs/forms/forms-search.html
View file

@ -25,7 +25,7 @@
<h2>Search inputs</h2>
<p>Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an <code>input</code> with a <code>type="search"</code> attribute in your markup. </p>
<p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code>data-role="fieldcontain"</code> attribute to group them.</p>
<p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;

235
docs/forms/forms-selects.html
View file

@ -25,12 +25,13 @@
<h2>Select menus</h2>
<p>The select menus are driven off native <code>select</code> elements, but the native selects are hidden from view and replaced with more style-friendly markup. The replacement buttons and menus are ARIA-enabled and are keyboard accessible on the desktop as well. </p>
<p>When clicked, if the menu has room it will appear as an overlay listbox, but if there are too many options to fit in the window without scrolling, the page content is wrapped in a div and hidden, and the menu is appended as a whole new page. This lets us take advantage of native scrolling while the menu is in use. </p>
<p>The select menus are driven off native <code>select</code> elements, but the native selects are hidden from view and replaced with a custom-styled select button that matches the look and feel of the jQuery Mobile framework. The replacement selects are ARIA-enabled and are keyboard accessible on the desktop as well.</p>
<p>When the select button is clicked, the native select menu picker for the OS will open. When a value is selected in the menu, the custom select button is updated to match the new selection. </p>
<p>To add a select widget to your page, start with a standard <code>select</code> element populated with a set of <code>option</code> elements. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>select</code> so they are semantically associated. Wrap them in a <code>div</code> with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form. </p>
<p>To add a select widget to your page, start with a standard <code>select</code> element populated with a set of <code>option</code> elements. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>select</code> so they are semantically associated. Wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to help visually group it in a longer form. </p>
<p>The framework will find all <code>select</code> elements and automatically enhance them into the custom select menus.</p>
<p>The framework will find all <code>select</code> elements and automatically enhance them into the custom select menus. Here is a typical select menu:</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
@ -44,96 +45,140 @@
&lt;/div&gt;
</code></pre>
<p>This produces this select:</p>
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<p>Here is an example of a select with a long list of options:</p>
<div data-role="fieldcontain">
<label for="select-choice-3" class="select">Your state:</label>
<select name="select-choice-3" id="select-choice-3">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<p>This example organizes the options with optgroup elements and has a disabled option.</p>
<div data-role="fieldcontain">
<label for="select-choice-nc" class="select">Preferred delivery:</label>
<select name="select-choice-8" id="select-choice-nc">
<optgroup label="FedEx">
<option value="firstOvernight">First Overnight</option>
<option value="expressSaver">Express Saver</option>
<option value="ground">Ground</option>
</optgroup>
<optgroup label="UPS">
<option value="firstOvernight">First Overnight</option>
<option value="expressSaver">Express Saver</option>
<option value="ground">Ground</option>
</optgroup>
<optgroup label="US Mail">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express" disabled="disabled">Express: next day (disabled)</option>
<option value="overnight">Overnight</option>
</optgroup>
</select>
</div>
<p>Note that the native menus don't support multiple selection via the <code>multiple="multiple"</code> attribute. If this feature is needed, we recommend using custom menus.
<h2>Option to use custom menus</h2>
<p>You can optionally use custom-styled select menus instead of the native versions. This adds the ability to theme the menu to better match the look and feel of your site and provides visual consistency across platforms. In addition, it supports multiple selection, restores missing functionality on certain platforms such as <code>optgroup</code> support on Android, and adds an elegant way to handle placeholder values (explained below). Lastly, the custom menus will look better on desktop browsers because native menus on the desktop tend to be fairly small compared their mobile counterparts and this can look a bit odd if desktop if a priority for your project.</p>
<p>Keep in mind that there is overhead involved in parsing the native select to build a custom menu. If there are a lot of selects on a page, or a select has a long list of options, this can impact the performance of the page so we recommend using custom menus sparingly. </p>
<p>To use custom menus on a specific <code>select</code>, just add the <code>data-native-menu="false"</code> attribute. Alternately, this can also programmatically set the select menu's <code>nativeMenu</code> configuration option to <code>false</code> in a callback bound to the <code>mobileinit</code> event to achieve the same effect. This will globally make all selects use the custom menu by default. The following must be included in the page after jQuery is loaded but before jQuery Mobile is loaded.</p>
<code>
<pre>
$(document).bind('mobileinit',function(){
$.mobile.selectmenu.prototype.options.nativeMenu = false;
});
</pre>
</code>
<p> If there is a small number of options that will fit on the device's screen, it will appear as a small overlay with a pop transition.</p>
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="select-choice-custom" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-custom" data-native-menu="false">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<p>If there is a select menu with too many options to show on the device's screen, the framework will automatically create a new &quot;page&quot; populated with a standard list view that contains all the options. This allows us to use the native scrolling included on the device for moving through a long list. The text inside the <code>label</code> is used as the title for this page.</p>
<p>If there is a select menu with too many options to show on the device's screen, the framework will automatically create a new &quot;page&quot; populated with a standard list view that contains all the options. This allows us to use the native scrolling included on the device for moving through a long list. The text inside the <code>label</code> is used as the title for this page.</p>
<div data-role="fieldcontain">
<label for="select-choice-3" class="select">Your state:</label>
<select name="select-choice-3" id="select-choice-3">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<h2>Option to use native menus</h2>
<p>The custom select menus add the ability to theme the select and provide visual consistency across platforms In addition, it fixes over some missing functionality on certain platforms: <code>optgroup</code> support on Android, multi-select capability on WebOS, and adds an elegant way to handle placeholder values (explained below).</p>
<p>However, there is overhead involved in parsing the native select to build a custom menu and if the number of selects or options within are fairly large, this can impact the performance of the page. By adding the <code>data-native-menu="true"</code> attribute to the <code>select</code>, the framework will use the browser's native select menu when the select button is clicked. Because this option doesn't use any of the custom menu parsing and menu generation logic, it is significantly faster than the custom menu version.</p>
<p>You can also programmatically set the select menu's configuration option to true in a callback bound to the <code>mobileinit</code> event to achieve the same effect. The following must be included in the page after jQuery is loaded but before jQuery Mobile is loaded.</p>
<code>
<pre>
$(document).bind('mobileinit',function(){
$.mobile.selectmenu.prototype.options.nativeMenu = true;
});
</pre>
</code>
<div data-role="fieldcontain">
<label for="select-choice-3" class="select">Your state:</label>
<select name="select-choice-3" id="select-choice-3" data-native-menu="true">
<select name="select-choice-3" id="select-choice-3" data-native-menu="false">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
@ -207,7 +252,7 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
<div data-role="fieldcontain">
<label for="select-choice-4" class="select">Choose shipping method:</label>
<select name="select-choice-4" id="select-choice-4">
<select name="select-choice-4" id="select-choice-4" data-native-menu="false">
<option></option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
@ -219,7 +264,7 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
<div data-role="fieldcontain">
<label for="select-choice-5" class="select">Choose shipping method:</label>
<select name="select-choice-5" id="select-choice-5">
<select name="select-choice-5" id="select-choice-5" data-native-menu="false">
<option>Choose one...</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
@ -231,7 +276,7 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
<div data-role="fieldcontain">
<label for="select-choice-6" class="select">Choose shipping method:</label>
<select name="select-choice-6" id="select-choice-6">
<select name="select-choice-6" id="select-choice-6" data-native-menu="false">
<option value="choose-one" data-placeholder="true">Choose one...</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
@ -245,7 +290,7 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
<div data-role="fieldcontain">
<label for="select-choice-7" class="select">Choose shipping method:</label>
<select name="select-choice-7" id="select-choice-7">
<select name="select-choice-7" id="select-choice-7" data-native-menu="false">
<option value="standard">Standard: 7 day</option>
<option value="rush" disabled="disabled">Rush: 3 days</option>
<option value="express">Express: next day</option>
@ -258,7 +303,7 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
<div data-role="fieldcontain">
<label for="select-choice-8" class="select">Choose shipping method:</label>
<select name="select-choice-8" id="select-choice-8">
<select name="select-choice-8" id="select-choice-8" data-native-menu="false">
<optgroup label="USPS">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
@ -289,7 +334,7 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
<div data-role="fieldcontain">
<label for="select-choice-9" class="select">Choose shipping method(s):</label>
<select name="select-choice-9" id="select-choice-9" multiple="multiple">
<select name="select-choice-9" id="select-choice-9" multiple="multiple" data-native-menu="false">
<option>Choose options</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
@ -302,7 +347,7 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
<div data-role="fieldcontain">
<label for="select-choice-10" class="select">Choose state(s):</label>
<select name="select-choice-10" id="select-choice-10" multiple="multiple">
<select name="select-choice-10" id="select-choice-10" multiple="multiple" data-native-menu="false">
<option>Choose options</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
@ -365,7 +410,7 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
<div data-role="fieldcontain">
<label for="select-choice-11" class="select">Actions</label>
<select name="select-choice-11" id="select-choice-11" data-theme="a" data-icon="gear" data-inline="true">
<select name="select-choice-11" id="select-choice-11" data-theme="a" data-icon="gear" data-inline="true" data-native-menu="false">
<option value="edit">Edit user</option>
<option value="delete">Delete user</option>
</select>

2
docs/forms/forms-slider.html
View file

@ -25,7 +25,7 @@
<h2>Sliders</h2>
<p>To add a slider widget to your page, start with an <code>input</code> with a new HTML5 <code>type="range"</code> attribute. Specify the <code>value</code> (current value), <code>min</code> and <code>max</code> attribute values to configure the slider. The framework will parse these attributes to configure the slider. </p>
<p>As you drag the slider, the input will update and vice-versa so they are always in sync so you can submit the slider value with form in a simple way. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code>data-role="fieldcontain"</code> attribute to group them.</p>
<p>As you drag the slider, the input will update and vice-versa so they are always in sync so you can submit the slider value with form in a simple way. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;

2
docs/forms/forms-switch.html
View file

@ -24,7 +24,7 @@
<h2>Flip toggle switches</h2>
<p>A binary "flip" switch is a common UI element on mobile devices that is used for any binary on/off or true/false type of data input. You can either drag the flip handle like a slider or tap on each half of the switch.</p>
<p>To create a flip toggle, To add a slider widget to your page, start with an <code>select</code> with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code>data-role="fieldcontain"</code> attribute to group them.</p>
<p>To create a flip toggle, To add a slider widget to your page, start with an <code>select</code> with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;

6
docs/forms/forms-text.html
View file

@ -27,7 +27,7 @@
<p>Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile.</p>
<h2>Text inputs</h2>
<p>To collect standard alphanmeric text, use an <code>input</code> with a <code>type="text"</code> attribute. It's important to set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code>data-role="fieldcontain"</code> attribute to group them.</p>
<p>To collect standard alphanmeric text, use an <code>input</code> with a <code>type="text"</code> attribute. It's important to set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
@ -45,7 +45,7 @@
<h2>Password inputs</h2>
<p>For password fields, use an <code>input</code> with a <code>type="password"</code> attribute. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code>data-role="fieldcontain"</code> attribute to group them.</p>
<p>For password fields, use an <code>input</code> with a <code>type="password"</code> attribute. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
@ -87,7 +87,7 @@
<h2>Textareas</h2>
<p>For multi-line text inputs, use a <code>textarea</code> element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar which is very hard to use on a mobile device. </p>
<p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code>data-role="fieldcontain"</code> attribute to group them.</p>
<p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;

4
docs/forms/forms-themes.html
View file

@ -22,9 +22,9 @@
<div data-role="content">
<h2>Form themes</h2>
<p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages and forms are styled. By default all form elements inside a container will automaticlaly adopt the same theme color swatch as their parent. This allows form elements to blend into their layouts with minimal work. The <code>data-theme</code> attribute can be applied any individual form element to apply any of the lettered theme color swatches to create contrast and emphasis in your designs.</p>
<p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages and forms are styled. By default all form elements inside a container will automaticlaly adopt the same theme color swatch as their parent. This allows form elements to blend into their layouts with minimal work. The <code> data-theme</code> attribute can be applied any individual form element to apply any of the lettered theme color swatches to create contrast and emphasis in your designs.</p>
<p>All the form elements in the examples below use the same HTML code with no theme swatch specified on the individual form elements. The only difference between each example block code is a <code>data-theme</code> swatch color assigned to each parent container. This illustrates the way form elements automatically adopt the theme swatch of their parent.</p>
<p>All the form elements in the examples below use the same HTML code with no theme swatch specified on the individual form elements. The only difference between each example block code is a <code> data-theme</code> swatch color assigned to each parent container. This illustrates the way form elements automatically adopt the theme swatch of their parent.</p>
<h2>Body swatch A</h2>

10
docs/lists/docs-lists.html
View file

@ -21,7 +21,7 @@
<div data-role="content">
<h2>Basic linked lists</h2>
<p>A list view is coded as a simple unordered list containing linked list items with a <code>data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. Here is the HTML markup for a basic linked list.</p>
<p>A list view is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. Here is the HTML markup for a basic linked list.</p>
<pre><code>
&lt;ul data-role=&quot;listview&quot; data-theme=&quot;g&quot;&gt;
@ -35,7 +35,7 @@
<h2>Nested lists</h2>
<p>By nesting child <code>ul</code> or <code>ol</code> inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will generate a new ui-page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple level deep and all pages and linking will be automatically handled by the framework.</p>
<p>To set the swatch color of the child list views, <code>data-theme</code> attribute on each list inside.</p>
<p>To set the swatch color of the child list views, <code> data-theme</code> attribute on each list inside.</p>
<a href="lists-nested.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Nested list example</a>
<h2>Numbered lists</h2>
@ -56,13 +56,13 @@
<h2>List dividers</h2>
<p>List items can be turned into dividers to organize and group the list items. This is done by adding the <code>data-role="list-divider"</code> to any list item. These items are styled with the body swatch "b" by default (light gray in the default theme) but you can specify a theme for dividers by adding the <code>data-dividertheme</code> attribute to the list element (ul or ol) and specifying a theme swatch letter.</p>
<p>List items can be turned into dividers to organize and group the list items. This is done by adding the <code> data-role="list-divider"</code> to any list item. These items are styled with the body swatch "b" by default (light gray in the default theme) but you can specify a theme for dividers by adding the <code>data-dividertheme</code> attribute to the list element (ul or ol) and specifying a theme swatch letter.</p>
<a href="lists-divider.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List divider example</a>
<h2>Search filter</h2>
<p>jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. </p>
<p>jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, you can either bind to the <code>mobileinit</code> event and set the <code>$.mobile.listview.prototype.options.filterPlaceholder</code> option to a string of your choosing, or use the data-attribute <code>data-filter-placeholder</code> on your listview.</p>
<a href="lists-search.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Search filter example</a>
@ -84,7 +84,7 @@
<a href="lists-icons.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with icon images</a>
<h2>Inset lists</h2>
<p>If lists are embedded in a page with other types of content, an inset list packages the list into a block that sits inside the content area with a bit of margin and rounded corners (theme controlled). By adding the <code>data-inset="true"</code> attribute to the list (ul or ol), applies the inset appearance.</p>
<p>If lists are embedded in a page with other types of content, an inset list packages the list into a block that sits inside the content area with a bit of margin and rounded corners (theme controlled). By adding the <code> data-inset="true"</code> attribute to the list (ul or ol), applies the inset appearance.</p>
<a href="lists-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inset list example</a>

10
docs/lists/lists-count.html
View file

@ -21,11 +21,11 @@
<div data-role="content">
<ul data-role="listview">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Drafts</a> <span class="ui-li-count">4</span></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

58
docs/lists/lists-formatting.html
View file

@ -23,57 +23,61 @@
<ul data-role="listview">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li>
<h3><a href="index.html">Stephen Weber</a></h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</li>
<li>
<h3><a href="index.html">jQuery Team</a></h3>
<li><a href="index.html">
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a></li>
<li><a href="index.html">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</li>
</a></li>
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
<li>
<h3><a href="index.html">Avery Walker</a></h3>
<li><a href="index.html">
<h3>Avery Walker</h3>
<p><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</li>
</a></li>
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
<li>
<h3><a href="index.html">Amazon.com</a></h3>
<li><a href="index.html">
<h3>Amazon.com</h3>
<p><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
</li>
<li>
<h3><a href="index.html">Mike Taylor</a></h3>
</a></li>
<li><a href="index.html">
<h3>Mike Taylor</h3>
<p><strong>Re: This weekend in Maine</strong></p>
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
</li>
<li>
<h3><a href="index.html">Redfin</a></h3>
</a></li>
<li><a href="index.html">
<h3>Redfin</h3>
<p><strong>Redfin listing updates for today</strong></p>
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
<p class="ui-li-aside"><strong>5:52</strong>AM</p>
</li>
</a></li>
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
<li>
<h3><a href="index.html">Angela Smith</a></h3>
<li><a href="index.html">
<h3>Angela Smith</h3>
<p><strong>Link Request</strong></p>
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
</li>
<li>
<h3><a href="index.html">Mike Taylor</a></h3>
</a></li>
<li><a href="index.html">
<h3>Mike Taylor</h3>
<p><strong>This weekend in Maine</strong></p>
<p>Sounds good, let me check into our plans.</p>
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
</li>
</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

12
docs/lists/lists-icons.html
View file

@ -22,15 +22,15 @@
<div data-role="content">
<ul data-role="listview">
<li><img src="images/gf.png" alt="France" class="ui-li-icon"><a href="index.html">France</a> <span class="ui-li-count">4</span></li>
<li><img src="images/de.png" alt="Germany" class="ui-li-icon"><a href="index.html">Germany</a> <span class="ui-li-count">4</span></li>
<li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon"><a href="index.html">Great Britain</a> <span class="ui-li-count">0</span></li>
<li><img src="images/fi.png" alt="Finland" class="ui-li-icon"><a href="index.html">Finland</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
<li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
<li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
<li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
<li><img src="images/sj.png" alt="Norway" class="ui-li-icon"><a href="index.html">Norway</a> <span class="ui-li-count">328</span></li>
<li><img src="images/us.png" alt="United States" class="ui-li-icon"><a href="index.html">United States</a> <span class="ui-li-count">62</span></li>
<li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
<li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
</ul>

44
docs/lists/lists-inset.html
View file

@ -21,11 +21,11 @@
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Drafts</a> <span class="ui-li-count">4</span></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
<ol data-role="listview" data-inset="true">
@ -50,29 +50,37 @@
<ul data-role="listview" data-inset="true">
<li>
<img src="images/album-bb.jpg" />
<h3><a href="index.html">Broken Bells</a></h3>
<p>Broken Bells</p>
<a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-hc.jpg" />
<h3><a href="index.html">Warning</a></h3>
<p>Hot Chip</p>
<a href="index.html">
<img src="images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</a>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-p.jpg" />
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
<p>Phoenix</p>
<a href="index.html">
<img src="images/album-p.jpg" />
<h3>Wolfgang Amadeus Phoenix</h3>
<p>Phoenix</p>
</a>
<a href="index.html">Purchase album</a>
</li>
<li>
<img src="images/album-ok.jpg" />
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
<p>Ok Go</p>
<a href="index.html">
<img src="images/album-ok.jpg" />
<h3>Of The Blue Colour Of The Sky</h3>
<p>Ok Go</p>
</a>
<a href="index.html">Purchase album</a>
</li>
</a></li>
</ul>

16
docs/lists/lists-nested.html
View file

@ -21,8 +21,10 @@
<div data-role="content">
<ul data-role="listview">
<li><h3><a href="#">Animals</a></h3>
<p>All your favorites from aarkvarks to zebras.</p>
<li>
<h3>Animals</h3>
<p>All your favorites from aarkvarks to zebras.</p>
<ul>
<li>Pets
<ul>
@ -68,8 +70,11 @@
</li>
</ul>
</li>
<li><h3><a href="#">Colors</a></h3>
<p>Fresh colors from the magic rainbow.</p>
<li>
<h3>Colors</h3>
<p>Fresh colors from the magic rainbow.</p>
<ul>
<li><a href="index.html">Blue</a></li>
<li><a href="index.html">Green</a></li>
@ -81,8 +86,9 @@
</ul>
</li>
<li>
<h3><a href="#">Vehicles</a></h3>
<h3>Vehicles</h3>
<p>Everything from cars to planes.</p>
<ul>
<li>Cars
<ul>

4
docs/lists/lists-split-purchase.html
View file

@ -20,9 +20,11 @@
</div><!-- /header -->
<div data-role="content">
<a href="index.html" data-role="button" data-rel="back" data-theme="b">
<h4>This album costs $10.99 and includes 9 tracks.</h4>
<p>Your download will begin immediately on your mobile device and all tracks will by added your your library next time you sync.</p>
<a href="index.html" data-role="button" data-rel="back" data-theme="b">Purchase album</a>
Purchase album
</a>
<a href="index.html" data-role="button" data-rel="back">No thanks</a>
</div><!-- /content -->
</div><!-- /page -->

90
docs/lists/lists-split.html
View file

@ -22,73 +22,75 @@
<div data-role="content">
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li>
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3><a href="index.html">Broken Bells</a></h3>
<h3>Broken Bells</h3>
<p>Broken Bells</p>
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
</li>
<li>
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3><a href="index.html">Warning</a></h3>
<h3>Warning</h3>
<p>Hot Chip</p>
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
</li>
<li>
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>
<li><a href="index.html">
<img src="images/album-p.jpg" />
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
<h3>Wolfgang Amadeus Phoenix</h3>
<p>Phoenix</p>
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
</li>
<li>
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>
<li><a href="index.html">
<img src="images/album-ok.jpg" />
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
<h3>Of The Blue Colour Of The Sky</h3>
<p>Ok Go</p>
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
</li>
<li>
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>
<li><a href="index.html">
<img src="images/album-ws.jpg" />
<h3><a href="index.html">Elephant</a></h3>
<h3>Elephant</h3>
<p>The White Stripes</p>
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
</li>
<li>
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>
<li><a href="index.html">
<img src="images/album-rh.jpg" />
<h3><a href="index.html">Kid A</a></h3>
<h3>Kid A</h3>
<p>Radiohead</p>
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
</li>
<li>
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>
<li><a href="index.html">
<img src="images/album-xx.jpg" />
<h3><a href="index.html">XX</a></h3>
<h3>XX</h3>
<p>XX</p>
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
</li>
<li>
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>
<li><a href="index.html">
<img src="images/album-mg.jpg" />
<h3><a href="index.html">Congratulations</a></h3>
<h3>Congratulations</h3>
<p>MGMT</p>
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
</li>
<li>
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>
<li><a href="index.html">
<img src="images/album-ag.jpg" />
<h3><a href="index.html">Ashes Grammar</a></h3>
<h3>Ashes Grammar</h3>
<p>A Sunny Day in Glasgow</p>
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
</li>
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>
<li>
<li><a href="index.html">
<img src="images/album-k.jpg" />
<h3><a href="index.html">Hot Fuss</a></h3>
<h3>Hot Fuss</h3>
<p>Killers</p>
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
</li>
<li>
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>
<li><a href="index.html">
<img src="images/album-af.jpg" />
<h3><a href="index.html">The Suburbs</a></h3>
<h3>The Suburbs</h3>
<p>Arcade Fire</p>
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
</li>
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

115
docs/lists/lists-themes.html
View file

@ -29,13 +29,13 @@
</code>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Divider</li>
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
</ul>
<h2>Theming list items</h2>
<p>The list item color scheme can be changed to any button color theme swatch by adding the <code>data-theme</code> attribute to the list, and setting the letter theme swatch. Here is the same list above with the &quot;a&quot; swatch applied. </p>
<p>The list item color scheme can be changed to any button color theme swatch by adding the <code> data-theme</code> attribute to the list, and setting the letter theme swatch. Here is the same list above with the &quot;a&quot; swatch applied. </p>
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;d&quot;&gt;
@ -43,19 +43,19 @@
<ul data-role="listview" data-inset="true" data-theme="d">
<li data-role="list-divider">Divider</li>
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
</ul>
<p>Data-theme attributes also work at the LI-level, for styling a single item.</p>
<p> data-theme attributes also work at the LI-level, for styling a single item.</p>
<ul data-role="listview" data-inset="true" data-theme="d">
<li data-role="list-divider">Divider</li>
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
<li data-theme="a"><a href="index.html">Trash</a> <span class="ui-li-count">34</span></li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li data-theme="a">Trash <span class="ui-li-count">34</span></a></li>
</ul>
<h2>Theming dividers</h2>
@ -68,9 +68,9 @@
<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c">
<li data-role="list-divider">Divider</li>
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
</ul>
<h2>Theming count bubbles</h2>
@ -83,14 +83,14 @@
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e">
<li data-role="list-divider">Divider</li>
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
</ul>
<h2>Theming icons</h2>
<p>The default icon for each list item is <code>arrow-r</code>. To override this, set the <code>data-icon</code> attribute on the desired list item to the <a href="../buttons/buttons-icons.html">name of a standard icon</a>. To prevent icons from appearing altogether, set the <code>data-icon</code> attribute to &quot;false&quot;.</p>
<p>The default icon for each list item is <code>arrow-r</code>. To override this, set the <code> data-icon</code> attribute on the desired list item to the <a href="../buttons/buttons-icons.html">name of a standard icon</a>. To prevent icons from appearing altogether, set the <code> data-icon</code> attribute to &quot;false&quot;.</p>
<pre>
<code>
&lt;li data-icon=&quot;info&quot;&gt;&lt;a href="#"&gt;Notices&lt;/a&gt;&lt;/li&gt;
@ -100,9 +100,9 @@
</pre>
<ul data-role="listview" data-inset="true" data-icon="false">
<li data-role="list-divider">Divider</li>
<li data-icon="info"><a href="index.html">Notices</a></li>
<li data-icon="alert"><a href="index.html">Alerts</a></li>
<li data-icon="false"><a href="index.html">All Notifications</a></li>
<li data-icon="info">Notices</a></a></li>
<li data-icon="alert">Alerts</a></a></li>
<li data-icon="false">All Notifications</a></a></li>
</ul>
<h2>Theming split buttons</h2>
@ -110,16 +110,16 @@
<p>For split lists which a second button, the framework default to &quot;b&quot; for the theme swatch (blue in the default theme) Here is a default split list:</p>
<ul data-role="listview" data-inset="true">
<li>
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3><a href="index.html">Broken Bells</a></h3>
<p>Broken Bells</p>
<h3>Broken Bells</h3>
<p>Broken Bells</p></a>
<a href="index.html">Purchase album</a>
</li>
<li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3><a href="index.html">Warning</a></h3>
<p>Hot Chip</p>
<h3>Warning</h3>
<p>Hot Chip</p></a>
<a href="index.html">Purchase album</a>
</li>
</ul>
@ -127,39 +127,40 @@
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-splittheme=&quot;a&quot;&gt;
</code>
<p>To specify the color swatch for the icon button on the right, add the <code>data-splittheme</code> to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a <code>data-theme</code> attribute to specific links (see second list item).</p>
<p>To specify the color swatch for the icon button on the right, add the <code>data-splittheme</code> to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a <code> data-theme</code> attribute to specific links (see second list item).</p>
<ul data-role="listview" data-inset="true" data-splittheme="a">
<li>
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3><a href="index.html">Broken Bells</a></h3>
<p>Broken Bells</p>
<h3>Broken Bells</h3>
<p>Broken Bells</p></a>
<a href="index.html">Purchase album</a>
</li>
<li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3><a href="index.html">Warning</a></h3>
<h3>Warning</h3>
<p>Hot Chip</p>
</a>
<a href="index.html" data-theme="e">Purchase album</a>
</li>
</ul>
<p>The icon for the split theme can set at the list level by adding the <code>data-spliticon</code> to the list and specifying a <a href="../buttons/buttons-icons.html">standard icon</a>. This attribute can also be added to individual split inside list items by adding a <code>data-icon</code> attribute to specific links (see second list item).</p>
<p>The icon for the split theme can set at the list level by adding the <code>data-spliticon</code> to the list and specifying a <a href="../buttons/buttons-icons.html">standard icon</a>. This attribute can also be added to individual split inside list items by adding a <code> data-icon</code> attribute to specific links (see second list item).</p>
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-splittheme=&quot;a&quot; data-spliticon=&quot;plus&quot;&gt;
</code>
<ul data-role="listview" data-inset="true" data-splittheme="a" data-spliticon="plus">
<li>
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3><a href="index.html">Broken Bells</a></h3>
<p>Broken Bells</p>
<a href="index.html">Purchase album</a>
<h3>Broken Bells</h3>
<p>Broken Bells</p></a>
<a href="index.html" data-theme="e" data-icon="delete">Purchase album</a>
</li>
<li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3><a href="index.html">Warning</a></h3>
<p>Hot Chip</p>
<h3>Warning</h3>
<p>Hot Chip</p></a>
<a href="index.html" data-theme="e" data-icon="delete">Purchase album</a>
</li>
</ul>
@ -170,37 +171,37 @@
<p><strong>A</strong> swatch</p>
<ul data-role="listview" data-inset="true" data-theme="a">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
<p><strong>B</strong> swatch</p>
<ul data-role="listview" data-inset="true" data-theme="b">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
<p><strong>C</strong> swatch</p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
<p><strong>D</strong> swatch</p>
<ul data-role="listview" data-inset="true" data-theme="d">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
<p><strong>E</strong> swatch</p>
<ul data-role="listview" data-inset="true" data-theme="e">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>

66
docs/lists/lists-thumbnails.html
View file

@ -22,63 +22,63 @@
<div data-role="content">
<ul data-role="listview">
<li>
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3><a href="index.html">Broken Bells</a></h3>
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</li>
<li>
</a></li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3><a href="index.html">Warning</a></h3>
<h3>Warning</h3>
<p>Hot Chip</p>
</li>
<li>
</a></li>
<li><a href="index.html">
<img src="images/album-p.jpg" />
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
<h3>Wolfgang Amadeus Phoenix</h3>
<p>Phoenix</p>
</li>
<li>
</a></li>
<li><a href="index.html">
<img src="images/album-ok.jpg" />
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
<h3>Of The Blue Colour Of The Sky</h3>
<p>Ok Go</p>
</li>
<li>
</a></li>
<li><a href="index.html">
<img src="images/album-ws.jpg" />
<h3><a href="index.html">Elephant</a></h3>
<h3>Elephant</h3>
<p>The White Stripes</p>
</li>
<li>
</a></li>
<li><a href="index.html">
<img src="images/album-rh.jpg" />
<h3><a href="index.html">Kid A</a></h3>
<h3>Kid A</h3>
<p>Radiohead</p>
</li>
<li>
</a></li>
<li><a href="index.html">
<img src="images/album-xx.jpg" />
<h3><a href="index.html">XX</a></h3>
<h3>XX</h3>
<p>XX</p>
</li>
<li>
</a></li>
<li><a href="index.html">
<img src="images/album-mg.jpg" />
<h3><a href="index.html">Congratulations</a></h3>
<h3>Congratulations</h3>
<p>MGMT</p>
</li>
</a></li>
<li>
<li><a href="index.html">
<img src="images/album-ag.jpg" />
<h3><a href="index.html">Ashes Grammar</a></h3>
<h3>Ashes Grammar</h3>
<p>A Sunny Day in Glasgow</p>
</li>
</a></li>
<li>
<li><a href="index.html">
<img src="images/album-k.jpg" />
<h3><a href="index.html">Hot Fuss</a></h3>
<h3>Hot Fuss</h3>
<p>Killers</p>
</li>
<li>
</a></li>
<li><a href="index.html">
<img src="images/album-af.jpg" />
<h3><a href="index.html">The Suburbs</a></h3>
<h3>The Suburbs</h3>
<p>Arcade Fire</p>
</li>
</a></li>
</ul>

115
docs/pages/dialog-with-select.html Normal file
View file

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery Mobile Framework - Dialog Example</title>
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<div id="foo" data-role="page">
<div data-role="header">
<h1>Dialog select test</h1>
</div>
<div data-role="content" >
<a href="#bar" data-role="button" data-rel="dialog">Open dialog</a>
</div>
</div>
<div data-role="page" id="bar">
<div data-role="header" data-theme="d" data-position="inline">
<h1>Sample Dialogs</h1>
</div>
<div data-role="content" data-theme="c">
<form action>
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1" data-native-menu="false">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="select-choice-3" class="select">Your state:</label>
<select name="select-choice-3" id="select-choice-3" data-native-menu="false">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<a href="#foo" data-role="button" data-rel="back" data-theme="c">Real Submit Would go here</a>
</form>
<a href="#foo" data-role="button" data-rel="back" data-theme="c">Cancel</a>
</div>
</div>
</body>
</html>

8
docs/pages/docs-dialogs.html
View file

@ -28,8 +28,11 @@
</code>
</p>
<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog (Ajax)</a>
<p>To load the dialog as a completely new page instead of pulling it in via Ajax, add <code>rel="external"</code> attribute, just like any standard link. This is useful when linking from a <a href="docs-pages.html">multi-page template</a> to a dialog that's not part of that HTML document. The dialog will by styled exactly like the Ajax version, but there won't be page transition.</p>
<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" rel="external" data-transition="pop">Open dialog (rel=external)</a>
<h2>Transitions</h2>
@ -50,6 +53,9 @@
<p>When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the <code>data-rel="back"</code> attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.</p>
<p>For JavaScript-generated links, you can simply set the href attribute to "#" and use the <code>data-rel="back"</code> attribute. You can also call the dialog's <code>close()</code> method to programmatically close dialogs, for example: <code>$('.ui-dialog').dialog('close')</code>. </p>
<h3>Setting the close button text</h3>
<p>Just like the page plugin, you can set a dialog's close button text through option or data attribute. The option can be configured for all dialogs by binding to the <code>mobileinit</code> event and setting the <code>$.mobile.dialog.prototype.options.closeBtnText</code> property to a string of your choosing, or you can place the data attribute <code>data-close-btn-text</code> to configure the text from your markup.</p>
<h2>History &amp; Back button behavior</h2>
<p>Since dialogs are typically used to support actions within a page, the framework does not include dialogs in the hash state history tracking. This means that dialogs will not appear in your browsing history chronology when the Back button is clicked. For example, if you are on a page, click a link to open a dialog, close the dialog, then navigate to another page, if you were to click the browser's Back button at that point you will navigate back to the first page, not the dialog.</p>

2
docs/pages/docs-link-scenarios.html
View file

@ -27,7 +27,7 @@
<li><a href="docs/pages/index.html">[href="docs/pages/index.html"]</a></li>
<li><a href="/docs/toolbars/index.html">[href="/docs/toolbars/index.html"]</a></li>
<li><a href="#somelocalID">[href="#somelocalID"]</a></li>
<li>Note: a full URL to the same-domain will also work</li>
<li>Note: an full URL to the same-domain will also work</li>
<li data-role="list-divider">Examples of links that trigger a refresh</li>
<li><a href="docs/pages/index.html" data-ajax="false">[data-ajax="false"]</a></li>
<li><a href="docs/pages/index.html" rel="external">[rel="external"]</a></li>

10
docs/pages/docs-links.html
View file

@ -36,7 +36,7 @@
<h2>Local, internal linked "pages"</h2>
<p>A single HTML document can contain either a single 'page' or multiple 'pages' can be assembled and loaded together by stacking multiple divs with a <code>data-role</code> of <code>"page"</code>. This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.</p>
<p>A single HTML document can contain either a single 'page' or multiple 'pages' can be assembled and loaded together by stacking multiple divs with a <code> data-role</code> of <code>"page"</code>. This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.</p>
<p>If a link points to an anchor (<code>#foo</code>), the framework will looks for a page with that ID. If it finds a page in the HTML document, it will transition the new page into view.</p>
@ -44,16 +44,16 @@
<pre>
<div class="highlight">
<code><span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"page"</span> <span class="na">id=</span><span class="s">"foo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">&gt;</span>
<code><span class="nt">&lt;div</span> <span class="na"> data-role=</span><span class="s">"page"</span> <span class="na">id=</span><span class="s">"foo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na"> data-role=</span><span class="s">"content"</span><span class="nt">&gt;</span>
I'm the "foo" page. Since I'm the first page
in the source order, I will be displayed onLoad.
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#bar"</span><span class="nt">&gt;</span>Visit the bar "page"<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;&lt;!-- /content --&gt;</span>
<span class="nt">&lt;/div&gt;&lt;!-- /foo page --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"page"</span> <span class="na">id=</span><span class="s">"bar"</span><span class="nt">&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</span> <span class="na"> data-role=</span><span class="s">"page"</span> <span class="na">id=</span><span class="s">"bar"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na"> data-role=</span><span class="s">"content"</span><span class="nt">&gt;</span>
I'm the "bar" page. I will be shown only if the
anchor link on the <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#foo"</span><span class="nt">&gt;</span>foo<span class="nt">&lt;/a&gt;</span>
page is clicked.

4
docs/pages/docs-navmodel.html
View file

@ -22,7 +22,7 @@
<h2>jQuery Mobile's navigation model</h2>
<p>A "page" in jQuery Mobile consists of an element (usually a <code>div</code>) with a <code>data-role</code> attribute set to <code>"page"</code>, which generally contains <code>div</code> elements with roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>, each containing common markup, forms, and custom jQuery Mobile widgets.</p>
<p>A "page" in jQuery Mobile consists of an element (usually a <code>div</code>) with a <code> data-role</code> attribute set to <code>"page"</code>, which generally contains <code>div</code> elements with roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>, each containing common markup, forms, and custom jQuery Mobile widgets.</p>
<p>The basic workflow with page loading is as follows: first, a page is requested with a normal HTTP request, and subsequent "pages" are then requested and injected into that page's DOM. Because of this, the DOM may have a number of "pages" in it at a time, each of which can be re-visited by linking to its <code>data-url</code> attribute.</p>
@ -62,7 +62,7 @@
<p>Some plugins may choose to dynamically break a page's content into separate navigable pages, which can then be reached via deep links. One example of this would be the Listview plugin, which will break a nested UL (or OL) into separate pages, which are each given a data-url attribute so they can be linked to like any normal "page" in jQuery Mobile. However, in order to link to these pages, the page that generates them must first be requested from the server. To make this work, pages that are auto-generated by plugins use the following special data-url structure:
<code>&lt;div data-url="page.html&amp;subpageidentifier"&gt;</code></p>
<p>So, for example, a page generated by the listview plugin may have a data-url attribute like this: <code>data-url="artists.html&amp;ui-page=listview-1"</code></p>
<p>So, for example, a page generated by the listview plugin may have an data-url attribute like this: <code>data-url="artists.html&amp;ui-page=listview-1"</code></p>
<p>When a page is requested, jQuery Mobile knows to split the URL at "&amp;ui-page" and make an HTTP request to the portion of the URL before that key. In the case of the listview example mentioned above, the URL would look like this: http://example.com/artists.html&amp;ui-page=listview-1
...and jQuery Mobile would request artists.html, which would then generate its sub-pages, creating the div with data-url="artists.html&amp;ui-page=listview-1", which it will then display as the active page.</p>

14
docs/pages/docs-pages.html
View file

@ -45,10 +45,10 @@
&lt;/html&gt;
</code></pre>
<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>
<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>
<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>
<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>
@ -57,10 +57,10 @@
<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>
<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>
@ -114,7 +114,7 @@
<h2>Local, internal linked "pages"</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>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>It's important to note if you are linking from a mobile page that was loaded via Ajax to a page with multiple internal pages, you need to add a <code>rel="external"</code> or <code>data-ajax="false"</code> to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be a conflicts.</p>
<p>For example, a link to a page containing multiple internal pages would look like this:</p>

2
docs/pages/pages-themes.html
View file

@ -25,7 +25,7 @@
<p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages are styled. There is detailed theming documentation within each page widget, but let's look at a few high-level examples of how theming is applied.</p>
<p>The <code>data-theme</code> attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. While the <code>data-theme</code> attribute could be added to the content container, we recommend adding it instead to <code>div</code> or container that has been assigned the <code>data-role="page"</code> attribute to ensure that the background color is applied to the full page.</p>
<p>The <code> data-theme</code> attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. While the <code> data-theme</code> attribute could be added to the content container, we recommend adding it instead to <code>div</code> or container that has been assigned the <code> data-role="page"</code> attribute to ensure that the background color is applied to the full page.</p>
<p>The default Theme mixes styles from multiple swatches to create visual texture and present the various elements in optimal contrast to one another:</p>

2
docs/toolbars/bars-fullscreen.html
View file

@ -23,7 +23,7 @@
<p class="ui-body">This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively &mdash; a common scenario for photo, image or video viewers.</p>
<p class="ui-body">To enable this toolbar feature type, you apply a <code>data-fullscreen="true"</code> attribute to the <code>div</code> contain that has the attribute <code>data-role="page"</code>, and the <code>data-position="fixed"</code> attribute to both the header and footer <code>div</code> elements. </p>
<p class="ui-body">To enable this toolbar feature type, you apply a <code>data-fullscreen="true"</code> attribute to the <code>div</code> contain that has the attribute <code> data-role="page"</code>, and the <code>data-position="fixed"</code> attribute to both the header and footer <code>div</code> elements. </p>
<p class="ui-body">Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content, so not all content will be accessible with the toolbars open, just as shown in this demo.</p>

8
docs/toolbars/bars-themes.html
View file

@ -25,11 +25,11 @@
<h2>Theming headers and footers</h2>
<p>To set the header or footer bars to a different color in your theme, add the <code>data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p>
<p>To set the header or footer bars to a different color in your theme, add the <code> data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p>
<div class="highlight">
<pre>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span> <span class="na">data-theme=</span><span class="s">"b"</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="na"> data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre>
@ -38,11 +38,11 @@
<h2>Theming buttons in toolbars</h2>
<p>Any link added inside the header block will be automatically styled as a button that matches the color of the bar's theme swatch. To make a button stand out as a primary call to action, the <code>data-theme</code> attribute can be used to specify a contrasting button color from a different theme swatch. For example, if we set the header to theme "c" (light gray), both buttons would be styled as the "c" button by default. If we wanted the Save button to visually pop, we can override the color by setting the <code>data-theme</code> attribute to "b" (blue in our default theme) on the Save button's anchor.</p>
<p>Any link added inside the header block will be automatically styled as a button that matches the color of the bar's theme swatch. To make a button stand out as a primary call to action, the <code> data-theme</code> attribute can be used to specify a contrasting button color from a different theme swatch. For example, if we set the header to theme "c" (light gray), both buttons would be styled as the "c" button by default. If we wanted the Save button to visually pop, we can override the color by setting the <code> data-theme</code> attribute to "b" (blue in our default theme) on the Save button's anchor.</p>
<div class="highlight">
<pre>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"add-user.php"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span>Save<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"add-user.php"</span> <span class="na"> data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span>Save<span class="nt">&lt;/a&gt;</span>
</pre>
</div>

6
docs/toolbars/docs-footers.html
View file

@ -22,11 +22,11 @@
<h2>Footer bar structure</h2>
<p>The <code>footer</code> bar has the same basic structure as the header except it uses the <code>data-role</code> attribute value of <code>footer</code>. </p>
<p>The <code>footer</code> bar has the same basic structure as the header except it uses the <code> data-role</code> attribute value of <code>footer</code>. </p>
<div class="highlight">
<pre>
<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</span> <span class="na"> data-role=</span><span class="s">"footer"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h4&gt;</span>Footer content<span class="nt">&lt;/h4&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre>
@ -69,7 +69,7 @@
<a href="index.html" data-icon="arrow-d">Down</a>
</div>
<p>To group buttons together into a button set, wrap the links in a wrapper with <code>data-role=&quot;controlgroup&quot;</code> and <code>data-type=&quot;horizontal&quot;</code> attributes.</p>
<p>To group buttons together into a button set, wrap the links in a wrapper with <code> data-role=&quot;controlgroup&quot;</code> and <code>data-type=&quot;horizontal&quot;</code> attributes.</p>
<code>&lt;div data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot;&gt;</code>

11
docs/toolbars/docs-headers.html
View file

@ -27,7 +27,7 @@
<div class="highlight">
<pre>
<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</span> <span class="na"> data-role=</span><span class="s">"header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre>
@ -71,7 +71,7 @@
<h1>Edit Contact</h1>
<a href="index.html" data-icon="check">Save</a>
</div>
<p>Buttons automatically adopt the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out &mdash; here, we add the <code>data-theme</code> attribute and set the color swatch for the button to "b" to make the "Save" button pop.</p>
<p>Buttons automatically adopt the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out &mdash; here, we add the <code> data-theme</code> attribute and set the color swatch for the button to "b" to make the "Save" button pop.</p>
<pre><code>
&lt;div data-role=&quot;header&quot; data-position=&quot;inline&quot;&gt;
@ -112,10 +112,11 @@
<h2>Customizing the back button text</h2>
<p>If you'd like to configure the back button text, you can either use the <code>data-back-btn-text="previous"</code> attribute on your page element, or set it programmatically via the page plugin's options: <code>$.mobile.page.prototype.options.backBtnText = "previous";</code>. If you're doing this programmatically, set this option inside the mobileinit event handler.</p>
<p>If you'd like to configure the back button text, you can either use the <code>data-back-btn-text="previous"</code> attribute on your page element, or set it programmatically via the page plugin's options: <code>$.mobile.page.prototype.options.backBtnText = "previous";</code>.
<h3>Default back button style</h3>
<p>If you'd like to configure the back button role-theme, you can use: <code>$.mobile.page.prototype.options.backBtnTheme = "a";</code>.
If you're doing this programmatically, set this option inside the mobileinit event handler.</p>
<h2>Custom header configurations</h2>
<p>If you need to to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in a container <code>div</code> inside the header container and the plugin won't apply the automatic button logic so you can write custom styles for laying out the content in your header.</p>

8
docs/toolbars/docs-navbar.html
View file

@ -24,7 +24,7 @@
<p>jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar , typically within a header or footer. </p>
<p>A navbar is coded as an unordered list of links wrapped in a container element that has the <code>data-role="navbar"</code> attribute. To set one of links to the active (selected) state, add <code>class="ui-btn-active"</code> to the anchor. In this example, we have a two-button navbar in the footer with the "One" item set to active:</p>
<p>A navbar is coded as an unordered list of links wrapped in a container element that has the <code> data-role="navbar"</code> attribute. To set one of links to the active (selected) state, add <code>class="ui-btn-active"</code> to the anchor. In this example, we have a two-button navbar in the footer with the "One" item set to active:</p>
<pre><code>
&lt;div data-role=&quot;footer&quot;&gt;
@ -135,7 +135,7 @@
<h2>Icons in navbars</h2>
<p>Icons can be added to navbar items by adding the <code>data-icon</code> attribute specifying a <a href="../buttons/buttons-icons.html">standard mobile icon</a> to each anchor.</p>
<p>Icons can be added to navbar items by adding the <code> data-icon</code> attribute specifying a <a href="../buttons/buttons-icons.html">standard mobile icon</a> to each anchor.</p>
<div data-role="footer">
<div data-role="navbar">
@ -147,7 +147,7 @@
</div><!-- /navbar -->
</div><!-- /footer -->
<p>Icons can be stacked above the labels by adding the <code>data-iconpos="top"</code> attribute to each anchor.</p>
<p>Icons can be stacked above the labels by adding the <code> data-iconpos="top"</code> attribute to each anchor.</p>
<div data-role="footer">
<div data-role="navbar">
@ -192,7 +192,7 @@
<h2>Theming navbars</h2>
<p>Navbars can be set to any theme color by <code>data-theme</code> attribute to the links and specifying any theme swatch.</p>
<p>Navbars can be set to any theme color by <code> data-theme</code> attribute to the links and specifying any theme swatch.</p>
<div data-role="footer">
<div data-role="navbar" data-theme="e" >

4
experiments/scrollview/jquery.mobile.scrollview.js
View file

@ -254,7 +254,7 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
{
var svh = [];
this._$clip.parents(".ui-scrollview-clip").each(function(){
var d = $(this).data("scrollview");
var d = $(this).jqmData("scrollview");
if (d) svh.unshift(d);
});
return svh;
@ -741,7 +741,7 @@ jQuery.widget( "mobile.scrolllistview", jQuery.mobile.scrollview, {
// XXX: Note that we need to update this cache if we ever support lists
// that can dynamically update their content.
this._$dividers = this._$view.find("[data-role=list-divider]");
this._$dividers = this._$view.find(":jqmData(role='list-divider')");
this._lastDivider = null;
},

10
experiments/scrollview/scrollview.js
View file

@ -10,19 +10,19 @@ function ResizePageContentHeight(page)
$content.height(wh - (hh + fh) - (pt + pb));
}
$("[data-role=page]").live("pageshow", function(event) {
$(":jqmData(role='page')").live("pageshow", function(event) {
var $page = $(this);
// For the demos that use this script, we want the content area of each
// page to be scrollable in the 'y' direction.
$page.find(".ui-content").attr("data-scroll", "y");
$page.find(".ui-content").attr("data-"+ $.mobile.ns +"scroll", "y");
// This code that looks for [data-scroll] will eventually be folded
// into the jqm page processing code when scrollview support is "official"
// instead of "experimental".
$page.find("[data-scroll]:not(.ui-scrollview-clip)").each(function(){
$page.find(":jqmData(scroll):not(.ui-scrollview-clip)").each(function(){
var $this = $(this);
// XXX: Remove this check for ui-scrolllistview once we've
// integrated list divider support into the main scrollview class.
@ -30,7 +30,7 @@ $("[data-role=page]").live("pageshow", function(event) {
$this.scrolllistview();
else
{
var st = $this.data("scroll") + "";
var st = $this.jqmData("scroll") + "";
var paging = st && st.search(/^[xy]p$/) != -1;
var dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null;
@ -40,7 +40,7 @@ $("[data-role=page]").live("pageshow", function(event) {
if (paging)
opts.pagingEnabled = true;
var method = $this.data("scroll-method");
var method = $this.jqmData("scroll-method");
if (method)
opts.scrollMethod = method;

2
experiments/scrollview/sv-test-02.html
View file

@ -25,7 +25,7 @@
<script src="jquery.mobile.scrollview.js"></script>
<!-- script src="scrollview.js"></script -->
<script type="text/javascript">
$("[data-role=page]").live("pageshow", function(event) {
$("[ data-role=page]").live("pageshow", function(event) {
var $page = $(this);
$page.find("[data-scroll]:not(.ui-scrollview-clip)").each(function(){
var $this = $(this);

10
experiments/themeswitcher/jquery.mobile.themeswitcher.js
View file

@ -1,22 +1,22 @@
//quick & dirty theme switcher, written to potentially work as a bookmarklet
(function($){
$.themeswitcher = function(){
if( $('[data-url=themeswitcher]').length ){ return; }
if( $('[data-'+ $.mobile.ns +'-url=themeswitcher]').length ){ return; }
var themesDir = 'http://jquerymobile.com/test/themes/',
themes = ['default','valencia'],
currentPage = $.mobile.activePage,
menuPage = $( '<div data-url="themeswitcher" data-role=\'dialog\' data-theme=\'a\'>' +
'<div data-role=\'header\' data-theme=\'b\'>' +
menuPage = $( '<div data-'+ $.mobile.ns +'url="themeswitcher" data-'+ $.mobile.ns +'role=\'dialog\' data-'+ $.mobile.ns +'theme=\'a\'>' +
'<div data-'+ $.mobile.ns +'role=\'header\' data-'+ $.mobile.ns +'theme=\'b\'>' +
'<div class=\'ui-title\'>Switch Theme:</div>'+
'</div>'+
'<div data-role=\'content\' data-theme=\'c\'><ul data-role=\'listview\' data-inset=\'true\'></ul></div>'+
'<div data-'+ $.mobile.ns +'role=\'content\' data-'+ $.mobile.ns +'theme=\'c\'><ul data-'+ $.mobile.ns +'role=\'listview\' data-'+ $.mobile.ns +'inset=\'true\'></ul></div>'+
'</div>' )
.appendTo( $.mobile.pageContainer ),
menu = menuPage.find('ul');
//menu items
$.each(themes, function( i ){
$('<li><a href="#" data-rel="back">' + themes[ i ].charAt(0).toUpperCase() + themes[ i ].substr(1) + '</a></li>')
$('<li><a href="#" data-'+ $.mobile.ns +'rel="back">' + themes[ i ].charAt(0).toUpperCase() + themes[ i ].substr(1) + '</a></li>')
.click(function(){
addTheme( themes[i] );
return false;

30
experiments/ui-datepicker/jquery.ui.datepicker.mobile.js
View file

@ -8,15 +8,15 @@
//cache previous datepicker ui method
var prevDp = $.fn.datepicker;
//rewrite datepicker
$.fn.datepicker = function( options ){
var dp = this;
//call cached datepicker plugin
prevDp.call( this, options );
//extend with some dom manipulation to update the markup for jQM
//call immediately
function updateDatepicker(){
@ -26,30 +26,30 @@
$( ".ui-datepicker-next", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true});
$( ".ui-datepicker-calendar th", dp ).addClass("ui-bar-c");
$( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c");
$( ".ui-datepicker-calendar a", dp ).buttonMarkup({corners: false, shadow: false});
$( ".ui-datepicker-calendar a", dp ).buttonMarkup({corners: false, shadow: false});
$( ".ui-datepicker-calendar a.ui-state-active", dp ).addClass("ui-btn-active"); // selected date
$( ".ui-datepicker-calendar a.ui-state-highlight", dp ).addClass("ui-btn-up-e"); // today"s date
$( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
var el = $(this);
// remove extra button markup - necessary for date value to be interpreted correctly
el.html( el.find( ".ui-btn-text" ).text() );
el.html( el.find( ".ui-btn-text" ).text() );
});
};
//update now
updateDatepicker();
// and on click
$( dp ).click( updateDatepicker );
//return jqm obj
//return jqm obj
return this;
};
//bind to pagecreate to automatically enhance date inputs
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input[data-type='date']", this ).each(function(){
//bind to pagecreate to automatically enhance date inputs
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input:jqmData(type='date')" ).each(function(){
$(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
});
});
});
})( jQuery );

2
external/qunit.css vendored
View file

@ -195,7 +195,7 @@
left: -10000px;
}
[data-role='page'], [data-role='dialog'] {
[ data-nstest-role='page'], [ data-nstest-role='dialog'] {
position: absolute !important;
top: -10000px !important;
}

12
js/jquery.mobile.buttonMarkup.js
View file

@ -9,7 +9,7 @@
$.fn.buttonMarkup = function( options ){
return this.each( function() {
var el = $( this ),
o = $.extend( {}, $.fn.buttonMarkup.defaults, el.data(), options),
o = $.extend( {}, $.fn.buttonMarkup.defaults, el.jqmData(), options),
// Classes Defined
buttonClass,
@ -63,7 +63,7 @@ $.fn.buttonMarkup = function( options ){
}
el
.attr( "data-theme", o.theme )
.attr( "data-" + $.mobile.ns + "theme", o.theme )
.addClass( buttonClass );
var wrap = ("<D class='" + innerClass + "'><D class='ui-btn-text'></D>" +
@ -84,19 +84,19 @@ $.fn.buttonMarkup.defaults = {
var attachEvents = function() {
$(".ui-btn:not(.ui-disabled)").live({
"vmousedown": function() {
var theme = $(this).attr( "data-theme" );
var theme = $(this).attr( "data-" + $.mobile.ns + "theme" );
$(this).removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
},
"vmousecancel vmouseup": function() {
var theme = $(this).attr( "data-theme" );
var theme = $(this).attr( "data-" + $.mobile.ns + "theme" );
$(this).removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
},
"vmouseover focus": function() {
var theme = $(this).attr( "data-theme" );
var theme = $(this).attr( "data-" + $.mobile.ns + "theme" );
$(this).removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
},
"vmouseout blur": function() {
var theme = $(this).attr( "data-theme" );
var theme = $(this).attr( "data-" + $.mobile.ns + "theme" );
$(this).removeClass( "ui-btn-hover-" + theme ).addClass( "ui-btn-up-" + theme );
}
});

18
js/jquery.mobile.collapsible.js
View file

@ -21,7 +21,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
collapsibleContain = $el.addClass('ui-collapsible-contain'),
collapsibleHeading = $el.find(o.heading).eq(0),
collapsibleContent = collapsibleContain.wrapInner('<div class="ui-collapsible-content"></div>').find('.ui-collapsible-content'),
collapsibleParent = $el.closest('[data-role="collapsible-set"]').addClass('ui-collapsible-set');
collapsibleParent = $el.closest( ":jqmData(role='collapsible-set')" ).addClass('ui-collapsible-set');
//replace collapsibleHeading if it's a legend
if(collapsibleHeading.is('legend')){
@ -62,7 +62,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
.addClass('ui-corner-all');
}
else {
if( collapsibleContain.data('collapsible-last') ){
if( collapsibleContain.jqmData('collapsible-last') ){
collapsibleHeading
.find('a:eq(0), .ui-btn-inner')
.addClass('ui-corner-bottom');
@ -82,7 +82,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
collapsibleHeading.find('.ui-icon').removeClass('ui-icon-minus').addClass('ui-icon-plus');
collapsibleContent.addClass('ui-collapsible-content-collapsed').attr('aria-hidden',true);
if( collapsibleContain.data('collapsible-last') ){
if( collapsibleContain.jqmData('collapsible-last') ){
collapsibleHeading
.find('a:eq(0), .ui-btn-inner')
.addClass('ui-corner-bottom');
@ -100,7 +100,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
collapsibleHeading.find('.ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-minus');
collapsibleContent.removeClass('ui-collapsible-content-collapsed').attr('aria-hidden',false);
if( collapsibleContain.data('collapsible-last') ){
if( collapsibleContain.jqmData('collapsible-last') ){
collapsibleHeading
.find('a:eq(0), .ui-btn-inner')
.removeClass('ui-corner-bottom');
@ -112,16 +112,16 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
//close others in a set
if( collapsibleParent.length && !collapsibleParent.data("collapsiblebound") ){
if( collapsibleParent.length && !collapsibleParent.jqmData("collapsiblebound") ){
collapsibleParent
.data("collapsiblebound", true)
.jqmData("collapsiblebound", true)
.bind("expand", function( event ){
$(this).find( ".ui-collapsible-contain" )
.not( $(event.target).closest( ".ui-collapsible-contain" ) )
.not( "> .ui-collapsible-contain .ui-collapsible-contain" )
.trigger( "collapse" );
})
var set = collapsibleParent.find('[data-role=collapsible]')
});
var set = collapsibleParent.find( ":jqmData(role=collapsible)" )
set.first()
.find('a:eq(0)')
@ -129,7 +129,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
.find('.ui-btn-inner')
.addClass('ui-corner-top');
set.last().data('collapsible-last', true)
set.last().jqmData('collapsible-last', true)
}
collapsibleHeading

2
js/jquery.mobile.controlGroup.js
View file

@ -9,7 +9,7 @@ $.fn.controlgroup = function(options){
return this.each(function(){
var o = $.extend({
direction: $( this ).data( "type" ) || "vertical",
direction: $( this ).jqmData( "type" ) || "vertical",
shadow: false
},options);
var groupheading = $(this).find('>legend'),

56
js/jquery.mobile.core.js
View file

@ -8,15 +8,19 @@
*/
(function( $, window, undefined ) {
//jQuery.mobile configurable options
$.extend( $.mobile, {
//namespace used framework-wide for data-attrs. Default is no namespace
ns: "",
//define the url parameter used for referencing widget-generated sub-pages.
//Translates to to example.html&ui-page=subpageIdentifier
//hash segment before &ui-page= is used to make Ajax request
subPageUrlKey: "ui-page",
//anchor links with a data-rel, or pages with a data-role, that match these selectors will be untrackable in history
//anchor links with a data-rel, or pages with a data-role, that match these selectors will be untrackable in history
//(no change in URL, not bookmarkable)
nonHistorySelectors: "dialog",
@ -46,15 +50,18 @@
//show loading message during Ajax requests
//if false, message will not appear, but loading classes will still be toggled on html el
loadingMessage: "loading",
//error response message - appears when an Ajax page request fails
pageLoadErrorMessage: "Error Loading Page",
//configure meta viewport tag's content attr:
//note: this feature is deprecated in A4 in favor of adding
//note: this feature is deprecated in A4 in favor of adding
//the meta viewport element directly in the markup
metaViewportContent: "width=device-width, minimum-scale=1, maximum-scale=1",
//support conditions that must be met in order to proceed
//default enhanced qualifications are media query support OR IE 7+
gradeA: function(){
gradeA: function(){
return $.support.mediaquery || $.mobile.browser.ie && $.mobile.browser.ie >= 7;
},
@ -94,6 +101,7 @@
WINDOWS: 91 // COMMAND
},
//scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
silentScroll: function( ypos ) {
ypos = ypos || 0;
// prevent scrollstart and scrollstop events
@ -109,4 +117,46 @@
}, 150 );
}
});
//mobile version of data and removeData and hasData methods
//ensures all data is set and retrieved using jQuery Mobile's data namespace
$.fn.jqmData = function( prop, value ){
return this.data( prop ? $.mobile.ns + prop : prop, value );
};
$.jqmData = function( elem, prop, value ){
return $.data( elem, prop && $.mobile.ns + prop, value );
};
$.fn.jqmRemoveData = function( prop ){
return this.removeData( $.mobile.ns + prop );
};
$.jqmRemoveData = function( elem, prop ){
return $.removeData( elem, prop && $.mobile.ns + prop );
};
$.jqmHasData = function( elem, prop ){
return $.hasData( elem, prop && $.mobile.ns + prop );
};
// Monkey-patching Sizzle to filter the :jqmData selector
var oldFind = $.find;
$.find = function( selector, context, ret, extra ) {
selector = selector.replace(/:jqmData\(([^)]*)\)/g, "[data-" + ($.mobile.ns || "") + "$1]");
return oldFind.call( this, selector, context, ret, extra );
};
$.extend( $.find, oldFind );
$.find.matches = function( expr, set ) {
return $.find( expr, null, null, set );
};
$.find.matchesSelector = function( node, expr ) {
return $.find( expr, null, null, [node] ).length > 0;
};
})( jQuery, this );

16
js/jquery.mobile.dialog.js
View file

@ -6,7 +6,9 @@
*/
(function($, undefined ) {
$.widget( "mobile.dialog", $.mobile.widget, {
options: {},
options: {
closeBtnText: "Close"
},
_create: function(){
var self = this,
$el = self.element;
@ -16,14 +18,14 @@ $.widget( "mobile.dialog", $.mobile.widget, {
//add ARIA role
.attr("role","dialog")
.addClass('ui-page ui-dialog ui-body-a')
.find('[data-role=header]')
.find( ":jqmData(role=header)" )
.addClass('ui-corner-top ui-overlay-shadow')
.prepend( '<a href="#" data-icon="delete" data-rel="back" data-iconpos="notext">Close</a>' )
.prepend( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "rel='back' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText +"</a>" )
.end()
.find('.ui-content:not([class*="ui-body-"])')
.addClass('ui-body-c')
.end()
.find('.ui-content,[data-role=footer]')
.find( ".ui-content,:jqmData(role='footer')" )
.last()
.addClass('ui-corner-bottom ui-overlay-shadow');
@ -42,10 +44,10 @@ $.widget( "mobile.dialog", $.mobile.widget, {
$targetel = $(e.target).closest("form");
}
if( $targetel.length && !$targetel.data("transition") ){
if( $targetel.length && !$targetel.jqmData("transition") ){
$targetel
.attr("data-transition", $.mobile.urlHistory.getActive().transition )
.attr("data-direction", "reverse");
.attr("data-" + $.mobile.ns + "transition", $.mobile.urlHistory.getActive().transition )
.attr("data-" + $.mobile.ns + "direction", "reverse");
}
});

12
js/jquery.mobile.fixHeaderFooter.js
View file

@ -11,9 +11,9 @@ $.fn.fixHeaderFooter = function(options){
return this.each(function(){
var $this = $(this);
if( $this.data('fullscreen') ){ $this.addClass('ui-page-fullscreen'); }
$this.find('.ui-header[data-position="fixed"]').addClass('ui-header-fixed ui-fixed-inline fade'); //should be slidedown
$this.find('.ui-footer[data-position="fixed"]').addClass('ui-footer-fixed ui-fixed-inline fade'); //should be slideup
if( $this.jqmData('fullscreen') ){ $this.addClass('ui-page-fullscreen'); }
$this.find( ".ui-header:jqmData(position='fixed')" ).addClass('ui-header-fixed ui-fixed-inline fade'); //should be slidedown
$this.find( ".ui-footer:jqmData(position='fixed')" ).addClass('ui-footer-fixed ui-fixed-inline fade'); //should be slideup
});
};
@ -104,12 +104,12 @@ $.fixedToolbars = (function(){
//before page is shown, check for duplicate footer
$('.ui-page').live('pagebeforeshow', function(event, ui){
var page = $(event.target),
footer = page.find('[data-role="footer"]:not(.ui-sticky-footer)'),
id = footer.data('id');
footer = page.find( ":jqmData(role='footer'):not(.ui-sticky-footer)" ),
id = footer.jqmData('id');
stickyFooter = null;
if (id)
{
stickyFooter = $('.ui-footer[data-id="' + id + '"].ui-sticky-footer');
stickyFooter = $( ".ui-footer:jqmData(id='" + id + "').ui-sticky-footer" );
if (stickyFooter.length == 0) {
// No sticky footer exists for this data-id. We'll use this
// footer as the sticky footer for the group and then create

10
js/jquery.mobile.forms.button.js
View file

@ -48,6 +48,7 @@ $.widget( "mobile.button", $.mobile.widget, {
});
});
}
this.refresh();
},
@ -61,6 +62,15 @@ $.widget( "mobile.button", $.mobile.widget, {
this.element.attr("disabled", true);
this.button.addClass("ui-disabled").attr("aria-disabled", true);
return this._setOption("disabled", true);
},
refresh: function(){
if( this.element.attr('disabled') ){
this.disable();
}
else{
this.enable();
}
}
});
})( jQuery );

26
js/jquery.mobile.forms.checkboxradio.js
View file

@ -12,17 +12,15 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
_create: function(){
var self = this,
input = this.element,
label = input.closest("form,fieldset,[data-role='page']")
.find("label")
//NOTE: Windows Phone could not find the label through a selector
//filter works though.
.filter("[for=" + input[0].id + "]"),
//NOTE: Windows Phone could not find the label through a selector
//filter works though.
label = input.closest("form,fieldset,:jqmData(role='page')").find("label").filter("[for=" + input[0].id + "]"),
inputtype = input.attr( "type" ),
checkedicon = "ui-icon-" + inputtype + "-on",
uncheckedicon = "ui-icon-" + inputtype + "-off";
if ( inputtype != "checkbox" && inputtype != "radio" ) { return; }
//expose for other methods
$.extend( this,{
label : label,
@ -33,13 +31,13 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
// If there's no selected theme...
if( !this.options.theme ) {
this.options.theme = this.element.data( "theme" );
this.options.theme = this.element.jqmData( "theme" );
}
label
.buttonMarkup({
theme: this.options.theme,
icon: this.element.parents( "[data-type='horizontal']" ).length ? undefined : uncheckedicon,
icon: this.element.parents( ":jqmData(type='horizontal')" ).length ? undefined : uncheckedicon,
shadow: false
});
@ -54,7 +52,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
},
vmousecancel: function( event ){
label.data("moved", true);
label.jqmData("moved", true);
},
vmouseup: function( event ){
@ -63,8 +61,8 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
return;
}
if( label.data("moved") ){
label.removeData("moved");
if( label.jqmData("moved") ){
label.jqmRemoveData("moved");
return false;
}
self._cacheVals();
@ -102,19 +100,19 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
_cacheVals: function(){
this._getInputSet().each(function(){
$(this).data("cacheVal", $(this).is(":checked") );
$(this).jqmData("cacheVal", $(this).is(":checked") );
});
},
//returns either a set of radios with the same name attribute, or a single checkbox
_getInputSet: function(){
return this.element.closest( "form,fieldset,[data-role='page']" )
return this.element.closest( "form,fieldset,:jqmData(role='page')" )
.find( "input[name='"+ this.element.attr( "name" ) +"'][type='"+ this.inputtype +"']" );
},
_updateAll: function(){
this._getInputSet().each(function(){
var dVal = $(this).data("cacheVal");
var dVal = $(this).jqmData("cacheVal");
if( dVal && dVal !== $(this).is(":checked") || this.inputtype === "checkbox" ){
$(this).trigger("change");
}

94
js/jquery.mobile.forms.select.js
View file

@ -19,10 +19,10 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
overlayTheme: 'a',
hidePlaceholderMenuItems: true,
closeText: 'Close',
nativeMenu: false
nativeMenu: true
},
_create: function(){
var self = this,
o = this.options,
@ -33,7 +33,12 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
selectID = select.attr( "id" ),
label = $( "label[for="+ selectID +"]" ).addClass( "ui-select" ),
//IE throws an exception at options.item() function when
//there is no selected item
//select first in this case
selectedIndex = select[0].selectedIndex == -1 ? 0 : select[0].selectedIndex,
button = ( self.options.nativeMenu ? $( "<div/>" ) : $( "<a>", {
"href": "#",
"role": "button",
@ -41,7 +46,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
"aria-haspopup": "true",
"aria-owns": menuId
}) )
.text( $( select[0].options.item(select[0].selectedIndex) ).text() )
.text( $( select[0].options.item( selectedIndex ) ).text() )
.insertBefore( select )
.buttonMarkup({
theme: o.theme,
@ -77,11 +82,11 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
//button theme
theme = /ui-btn-up-([a-z])/.exec( button.attr("class") )[1],
menuPage = $( "<div data-role='dialog' data-theme='"+ o.menuPageTheme +"'>" +
"<div data-role='header'>" +
menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' data-" +$.mobile.ns + "theme='"+ o.menuPageTheme +"'>" +
"<div data-" + $.mobile.ns + "role='header'>" +
"<div class='ui-title'>" + label.text() + "</div>"+
"</div>"+
"<div data-role='content'></div>"+
"<div data-" + $.mobile.ns + "role='content'></div>"+
"</div>" )
.appendTo( $.mobile.pageContainer )
.page(),
@ -100,9 +105,9 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
"class": "ui-selectmenu-list",
"id": menuId,
"role": "listbox",
"aria-labelledby": buttonId,
"data-theme": theme
"aria-labelledby": buttonId
})
.attr( "data-" + $.mobile.ns + "theme", theme )
.appendTo( listbox ),
header = $( "<div>", {
@ -116,12 +121,12 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
.appendTo( header ),
headerClose = $( "<a>", {
"data-iconpos": "notext",
"data-icon": "delete",
"text": o.closeText,
"href": "#",
"class": "ui-btn-left"
})
.attr( "data-" + $.mobile.ns + "iconpos", "notext" )
.attr( "data-" + $.mobile.ns + "icon", "delete" )
.appendTo( header )
.buttonMarkup(),
@ -189,7 +194,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
.removeClass( $.mobile.activeBtnClass );
});
} else {
//create list from select, update state
@ -204,41 +209,17 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
//button events
button
.bind( "vmousedown" , function( event ){
//set startTouches to cached copy of
$( this ).data( "startTouches", $.extend({}, event) );
})
.bind( "vmouseup" , function( event ){
//if it's a scroll, don't open
if( $( this ).data( "moved" ) ){
$( this ).removeData( "moved" );
} else {
self.open();
}
.bind( "vclick" , function( event ){
self.open();
event.preventDefault();
})
.bind( "vmousemove", function( event ){
//if touch moved enough, set data moved and don't open menu
var thisTouches = event,
startTouches = $( this ).data( "startTouches" ),
deltaX = Math.abs(thisTouches.pageX - startTouches.pageX),
deltaY = Math.abs(thisTouches.pageY - startTouches.pageY);
if( deltaX > 10 || deltaY > 10 ){
$( this ).data( "moved", true );
}
});
//events for list items
list.delegate("li:not(.ui-disabled, .ui-li-divider)", "vclick", function(event){
// clicking on the list item fires click on the link in listview.js.
// to prevent this handler from firing twice if the link isn't clicked on,
// short circuit unless the target is the link
if( !$(event.target).is("a") ){ return; }
// index of option tag to be selected
var newIndex = list.find( "li:not(.ui-li-divider)" ).index( this ),
var oldIndex = select[0].selectedIndex,
newIndex = list.find( "li:not(.ui-li-divider)" ).index( this ),
option = self.optionElems.eq( newIndex )[0];
// toggle selected status on the tag for multi selects
@ -252,8 +233,10 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
.toggleClass('ui-icon-checkbox-off', !option.selected);
}
// trigger change
select.trigger( "change" );
// trigger change if value changed
if( oldIndex !== newIndex ){
select.trigger( "change" );
}
//hide custom select for single selects only
if( !isMultiple ){
@ -263,10 +246,18 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
event.preventDefault();
});
//events on "screen" overlay + close button
//events on "screen" overlay
screen.bind("vclick", function( event ){
self.close();
});
//close button on small overlays
self.headerClose.click(function(){
if( self.menuType == "overlay" ){
self.close();
return false;
}
})
}
},
@ -295,13 +286,13 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
// has this optgroup already been built yet?
if( $.inArray(optLabel, optgroups) === -1 ){
lis.push( "<li data-role='list-divider'>"+ optLabel +"</li>" );
lis.push( "<li data-" + $.mobile.ns + "role='list-divider'>"+ optLabel +"</li>" );
optgroups.push( optLabel );
}
}
//find placeholder text
if( !this.getAttribute('value') || text.length == 0 || $this.data('placeholder') ){
if( !this.getAttribute('value') || text.length == 0 || $this.jqmData('placeholder') ){
if( o.hidePlaceholderMenuItems ){
classes.push( "ui-selectmenu-placeholder" );
}
@ -314,7 +305,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
extraAttrs.push( "aria-disabled='true'" );
}
lis.push( "<li data-icon='"+ dataIcon +"' class='"+ classes.join(" ") + "' " + extraAttrs.join(" ") +">"+ anchor +"</li>" )
lis.push( "<li data-" + $.mobile.ns + "icon='"+ dataIcon +"' class='"+ classes.join(" ") + "' " + extraAttrs.join(" ") +">"+ anchor +"</li>" )
});
self.list.html( lis.join(" ") );
@ -398,12 +389,11 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
scrollTop = $(window).scrollTop(),
btnOffset = self.button.offset().top,
screenHeight = window.innerHeight,
screenWidth = window.innerWidth,
dialogUsed = self.list.parents('.ui-dialog').length;
screenWidth = window.innerWidth;
//add active class to button
self.button.addClass( $.mobile.activeBtnClass );
//remove after delay
setTimeout(function(){
self.button.removeClass( $.mobile.activeBtnClass );
@ -413,14 +403,12 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
self.list.find( ".ui-btn-active" ).focus();
}
// NOTE addresses issue with firefox outerHeight when the parent dialog
// is display: none. Upstream?
if( dialogUsed || menuHeight > screenHeight - 80 || !$.support.scrollTop ){
if( menuHeight > screenHeight - 80 || !$.support.scrollTop ){
//for webos (set lastscroll using button offset)
if( scrollTop == 0 && btnOffset > screenHeight ){
self.thisPage.one('pagehide',function(){
$(this).data('lastScroll', btnOffset);
$(this).jqmData('lastScroll', btnOffset);
});
}

6
js/jquery.mobile.forms.textinput.js
View file

@ -31,7 +31,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
var focusedEl = input;
//"search" input widget
if( input.is('[type="search"],[data-type="search"]') ){
if( input.is( "[type='search'],:jqmData(type='search')" ) ){
focusedEl = input.wrap('<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield'+ themeclass +'"></div>').parent();
var clearbtn = $('<a href="#" class="ui-input-clear" title="clear text">clear text</a>')
.tap(function( e ){
@ -87,11 +87,11 @@ $.widget( "mobile.textinput", $.mobile.widget, {
},
disable: function(){
( this.element.attr("disabled",true).is('[type="search"],[data-type="search"]') ? this.element.parent() : this.element ).addClass("ui-disabled");
( this.element.attr("disabled",true).is( "[type='search'],:jqmData(type='search')" ) ? this.element.parent() : this.element ).addClass("ui-disabled");
},
enable: function(){
( this.element.attr("disabled", false).is('[type="search"],[data-type="search"]') ? this.element.parent() : this.element ).removeClass("ui-disabled");
( this.element.attr("disabled", false).is( "[type='search'],:jqmData(type='search')" ) ? this.element.parent() : this.element ).removeClass("ui-disabled");
}
});
})( jQuery );

23
js/jquery.mobile.init.js
View file

@ -32,13 +32,11 @@
//loading div which appears during Ajax requests
//will not appear if $.mobile.loadingMessage is false
var $loader = $.mobile.loadingMessage ?
$( "<div class='ui-loader ui-body-a ui-corner-all'>" +
"<span class='ui-icon ui-icon-loading spin'></span>" +
"<h1>" + $.mobile.loadingMessage + "</h1>" +
"</div>" )
: undefined;
var $loader = $.mobile.loadingMessage ? $( "<div class='ui-loader ui-body-a ui-corner-all'>" + "<span class='ui-icon ui-icon-loading spin'></span>" + "<h1>" + $.mobile.loadingMessage + "</h1>" + "</div>" ) : undefined;
if(typeof $loader === "undefined"){
alert($.mobile.loadingMessage);
}
$.extend($.mobile, {
// turn on/off page loading message.
@ -49,6 +47,11 @@
if( $.mobile.loadingMessage ){
var activeBtn = $( "." + $.mobile.activeBtnClass ).first();
if(typeof $loader === "undefined"){
alert($.mobile.loadingMessage);
}
$loader
.appendTo( $.mobile.pageContainer )
//position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
@ -65,15 +68,15 @@
// find and enhance the pages in the dom and transition to the first page.
initializePage: function(){
//find present pages
var $pages = $( "[data-role='page']" );
var $pages = $( ":jqmData(role='page')" );
//add dialogs, set data-url attrs
$pages.add( "[data-role='dialog']" ).each(function(){
$pages.add( ":jqmData(role='dialog')" ).each(function(){
var $this = $(this);
// unless the data url is already set set it to the id
if( !$this.data('url') ){
$this.attr( "data-url", $this.attr( "id" ) );
if( !$this.jqmData('url') ){
$this.attr( "data-" + $.mobile.ns + "url", $this.attr( "id" ) );
}
});

14
js/jquery.mobile.listview.filter.js
View file

@ -7,10 +7,12 @@
(function($, undefined ) {
$.mobile.listview.prototype.options.filter = false;
$.mobile.listview.prototype.options.filterPlaceholder = "Filter items...";
$( "[data-role='listview']" ).live( "listviewcreate", function() {
$( ":jqmData(role='listview')" ).live( "listviewcreate", function() {
var list = $( this ),
listview = list.data( "listview" );
if ( !listview.options.filter ) {
return;
}
@ -18,9 +20,9 @@ $( "[data-role='listview']" ).live( "listviewcreate", function() {
var wrapper = $( "<form>", { "class": "ui-listview-filter ui-bar-c", "role": "search" } ),
search = $( "<input>", {
placeholder: "Filter results...",
"data-type": "search"
placeholder: listview.options.filterPlaceholder
})
.attr( "data-" + $.mobile.ns + "type", "search" )
.bind( "keyup change", function() {
var val = this.value.toLowerCase(),
listItems = list.children();
@ -33,7 +35,7 @@ $( "[data-role='listview']" ).live( "listviewcreate", function() {
for (var i = listItems.length; i >= 0; i--) {
item = $(listItems[i]);
if (item.is("li[data-role=list-divider]")) {
if (item.is("li:jqmData(role=list-divider)")) {
if (!childItems) {
item.hide();
}
@ -51,10 +53,10 @@ $( "[data-role='listview']" ).live( "listviewcreate", function() {
.appendTo( wrapper )
.textinput();
if ($( this ).data( "inset" ) ) {
if ($( this ).jqmData( "inset" ) ) {
wrapper.addClass( "ui-listview-filter-inset" );
}
wrapper.insertBefore( list );
});

69
js/jquery.mobile.listview.js
View file

@ -108,27 +108,19 @@ $.widget( "mobile.listview", $.mobile.widget, {
break;
}
});
// tapping the whole LI triggers click on the first link
$list.delegate( "li", "vclick", function(event) {
if ( !$( event.target ).closest( "a" ).length ) {
$( this ).find( "a" ).first().trigger( "vclick" );
return false;
}
});
},
_itemApply: function( $list, item ) {
// TODO class has to be defined in markup
item.find( ".ui-li-count" )
.addClass( "ui-btn-up-" + ($list.data( "counttheme" ) || this.options.countTheme) + " ui-btn-corner-all" );
.addClass( "ui-btn-up-" + ($list.jqmData( "counttheme" ) || this.options.countTheme) + " ui-btn-corner-all" );
item.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" );
item.find( "p, dl" ).addClass( "ui-li-desc" );
$list.find( "li" ).find( "img:eq(0)" ).addClass( "ui-li-thumb" ).each(function() {
$list.find( "li" ).find( ">img:eq(0), >a:first>img:eq(0)" ).addClass( "ui-li-thumb" ).each(function() {
$( this ).closest( "li" )
.addClass( $(this).is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
});
@ -158,7 +150,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
var o = this.options,
$list = this.element,
self = this,
dividertheme = $list.data( "dividertheme" ) || o.dividerTheme,
dividertheme = $list.jqmData( "dividertheme" ) || o.dividerTheme,
li = $list.children( "li" ),
counter = $.support.cssPseudoElement || !$.nodeName( $list[0], "ol" ) ? 0 : 1;
@ -170,15 +162,6 @@ $.widget( "mobile.listview", $.mobile.widget, {
li.first().attr( "tabindex", "0" );
//workaround for Windows Phone 7 focus/active tap color
//without this, delegated events will highlight the whole list, rather than the LI
if( $.mobile.browser.ie && $.mobile.browser.ie <= 8 ){
li
.unbind( "mousedown.iefocus" )
.bind( "mousedown.iefocus", function(e){
e.preventDefault();
});
}
li.each(function( pos ) {
var item = $( this ),
@ -189,12 +172,12 @@ $.widget( "mobile.listview", $.mobile.widget, {
return;
}
var itemTheme = item.data("theme") || o.theme;
var itemTheme = item.jqmData("theme") || o.theme;
var a = item.find( "a" );
if ( a.length ) {
var icon = item.data("icon");
var icon = item.jqmData("icon");
item
.buttonMarkup({
@ -212,7 +195,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
itemClass += " ui-li-has-alt";
var last = a.last(),
splittheme = $list.data( "splittheme" ) || last.data( "theme" ) || o.splitTheme;
splittheme = $list.jqmData( "splittheme" ) || last.jqmData( "theme" ) || o.splitTheme;
last
.appendTo(item)
@ -232,11 +215,11 @@ $.widget( "mobile.listview", $.mobile.widget, {
corners: true,
theme: splittheme,
iconpos: "notext",
icon: $list.data( "spliticon" ) || last.data( "icon" ) || o.splitIcon
icon: $list.jqmData( "spliticon" ) || last.jqmData( "icon" ) || o.splitIcon
} ) );
}
} else if ( item.data( "role" ) === "list-divider" ) {
} else if ( item.jqmData( "role" ) === "list-divider" ) {
itemClass += " ui-li-divider ui-btn ui-bar-" + dividertheme;
item.attr( "role", "heading" );
@ -291,7 +274,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
.prepend( "<span class='ui-li-dec'>" + (counter++) + ". </span>" );
}
item.addClass( itemClass );
item.add( item.find( ".ui-btn-inner" ) ).addClass( itemClass );
if ( !create ) {
self._itemApply( $list, item );
@ -307,36 +290,34 @@ $.widget( "mobile.listview", $.mobile.widget, {
_createSubPages: function() {
var parentList = this.element,
parentPage = parentList.closest( ".ui-page" ),
parentId = parentPage.data( "url" ),
parentId = parentPage.jqmData( "url" ),
o = this.options,
self = this,
persistentFooterID = parentPage.find( "[data-role='footer']" ).data( "id" );
persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" );
$( parentList.find( "ul, ol" ).toArray().reverse() ).each(function( i ) {
$( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function( i ) {
var list = $( this ),
parent = list.parent(),
title = $.trim(parent.contents()[ 0 ].nodeValue) || parent.find('a:first').text(),
nodeEls = $( list.prevAll().toArray().reverse() ),
nodeEls = nodeEls.length ? nodeEls : $( "<span>" + $.trim(parent.contents()[ 0 ].nodeValue) + "</span>" ),
title = nodeEls.first().text(),//url limits to first 30 chars of text
id = parentId + "&" + $.mobile.subPageUrlKey + "=" + self._idStringEscape(title + " " + i),
theme = list.data( "theme" ) || o.theme,
countTheme = list.data( "counttheme" ) || parentList.data( "counttheme" ) || o.countTheme,
newPage = list.wrap( "<div data-role='page'><div data-role='content'></div></div>" )
theme = list.jqmData( "theme" ) || o.theme,
countTheme = list.jqmData( "counttheme" ) || parentList.jqmData( "counttheme" ) || o.countTheme,
newPage = list.wrap( "<div data-" + $.mobile.ns + "role='page'><div data-" + $.mobile.ns + "role='content'></div></div>" )
.parent()
.before( "<div data-role='header' data-theme='" + o.headerTheme + "'><div class='ui-title'>" + title + "</div></div>" )
.after( persistentFooterID ? $( "<div>", { "data-role": "footer", "data-id": persistentFooterID, "class": "ui-footer-duplicate" } ) : "" )
.before( "<div data-" + $.mobile.ns + "role='header' data-" + $.mobile.ns + "theme='" + o.headerTheme + "'><div class='ui-title'>" + title + "</div></div>" )
.after( persistentFooterID ? $( "<div data-" + $.mobile.ns + "role='footer' data-" + $.mobile.ns + "id='"+ persistentFooterID +"'>") : "" )
.parent()
.attr({
"data-url": id,
"data-theme": theme,
"data-count-theme": countTheme
})
.attr( "data-" + $.mobile.ns + "url", id )
.attr( "data-" + $.mobile.ns + "theme", theme )
.attr( "data-" + $.mobile.ns + "count-theme", countTheme )
.appendTo( $.mobile.pageContainer );
newPage.page();
var anchor = parent.find('a:first');
if (!anchor.length) {
anchor = $("<a></a>").html(title).prependTo(parent.empty());
anchor = $("<a></a>").html( nodeEls || title ).prependTo(parent.empty());
}
anchor.attr('href','#' + id);
}).listview();

2
js/jquery.mobile.navbar.js
View file

@ -13,7 +13,7 @@ $.widget( "mobile.navbar", $.mobile.widget, {
_create: function(){
var $navbar = this.element,
$navbtns = $navbar.find("a"),
iconpos = $navbtns.filter('[data-icon]').length ? this.options.iconpos : undefined;
iconpos = $navbtns.filter( ":jqmData(icon)").length ? this.options.iconpos : undefined;
$navbar
.addClass('ui-navbar')

99
js/jquery.mobile.navigation.js
View file

@ -207,7 +207,7 @@
//set the generated BASE element's href attribute to a new page's base path
set: function( href ){
base.element.attr('href', docBase + path.get( href ).replace(/^\//, ""));
base.element.attr('href', docBase + path.get( href ));
},
//set the generated BASE element's href attribute to a new page's base path
@ -279,6 +279,9 @@
//history stack
$.mobile.urlHistory = urlHistory;
//enable cross-domain page support
$.mobile.allowCrossDomainPages = false;
// changepage function
$.mobile.changePage = function( to, transition, reverse, changeHash, fromHashChange ){
//from is always the currently viewed page
@ -377,12 +380,12 @@
//support deep-links to generated sub-pages
if( url.indexOf( "&" + $.mobile.subPageUrlKey ) > -1 ){
to = $( "[data-url='" + url + "']" );
to = $( ":jqmData(url='" + url + "')" );
}
if( from ){
//set as data for returning to that spot
from.data( "lastScroll", currScroll);
from.jqmData( "lastScroll", currScroll);
//trigger before show/hide events
from.data( "page" )._trigger( "beforehide", null, { nextPage: to } );
}
@ -405,7 +408,7 @@
removeActiveLinkClass();
//jump to top or prev scroll, sometimes on iOS the page has not rendered yet. I could only get by this with a setTimeout, but would like to avoid that.
$.mobile.silentScroll( to.data( "lastScroll" ) );
$.mobile.silentScroll( to.jqmData( "lastScroll" ) );
reFocus( to );
@ -483,10 +486,10 @@
function enhancePage(){
//set next page role, if defined
if ( nextPageRole || to.data('role') === 'dialog' ) {
if ( nextPageRole || to.jqmData('role') === 'dialog' ) {
url = urlHistory.getActive().url + dialogHashKey;
if(nextPageRole){
to.attr( "data-role", nextPageRole );
to.attr( "data-" + $.mobile.ns + "role", nextPageRole );
nextPageRole = null;
}
}
@ -497,11 +500,11 @@
//if url is a string
if( url ){
to = $( "[data-url='" + url + "']" );
to = $( ":jqmData(url='" + url + "')" );
fileUrl = path.getFilePath(url);
}
else{ //find base url of element, if avail
var toID = to.attr('data-url'),
var toID = to.attr( "data-" + $.mobile.ns + "url" ),
toIDfileurl = path.getFilePath(toID);
if(toID !== toIDfileurl){
@ -532,15 +535,14 @@
url: fileUrl,
type: type,
data: data,
dataType: "html",
success: function( html ) {
//pre-parse html to check for a data-url,
//use it as the new fileUrl, base path, etc
var all = $("<div></div>"),
redirectLoc,
// TODO handle dialogs again
pageElemRegex = /.*(<[^>]*\bdata-role=["']?page["']?[^>]*>).*/,
dataUrlRegex = /\bdata-url=["']?([^"'>]*)["']?/;
pageElemRegex = new RegExp(".*(<[^>]+\\bdata-" + $.mobile.ns + "role=[\"']?page[\"']?[^>]*>).*"),
dataUrlRegex = new RegExp("\\bdata-" + $.mobile.ns + "url=[\"']?([^\"'>]*)[\"']?");
// data-url must be provided for the base tag so resource requests can be directed to the
// correct url. loading into a temprorary element makes these requests immediately
@ -562,7 +564,7 @@
//workaround to allow scripts to execute when included in page divs
all.get(0).innerHTML = html;
to = all.find('[data-role="page"], [data-role="dialog"]').first();
to = all.find( ":jqmData(role='page'), :jqmData(role='dialog')" ).first();
//rewrite src and href attrs to use a base url
if( !$.support.dynamicBaseTag ){
@ -582,26 +584,36 @@
//append to page and enhance
to
.attr( "data-url", fileUrl )
.attr( "data-" + $.mobile.ns + "url", fileUrl )
.appendTo( $.mobile.pageContainer );
enhancePage();
setTimeout(function() { transitionPages(); }, 0);
},
error: function() {
//remove loading message
$.mobile.pageLoading( true );
//clear out the active button state
removeActiveLinkClass(true);
if(base){
base.set(path.get());
//set base back to current path
if( base ){
base.set( path.get() );
}
$("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>Error Loading Page</h1></div>")
//release transition lock so navigation is free again
releasePageTransitionLock();
//show error message
$("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>"+ $.mobile.pageLoadErrorMessage +"</h1></div>")
.css({ "display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 })
.appendTo( $.mobile.pageContainer )
.delay( 800 )
.fadeOut( 400, function(){
$(this).remove();
});
releasePageTransitionLock();
}
});
}
@ -616,13 +628,14 @@
if( !$.mobile.ajaxEnabled ||
//TODO: deprecated - remove at 1.0
!$.mobile.ajaxFormsEnabled ||
$(this).is( "[data-ajax='false']" ) ){ return; }
$(this).is( ":jqmData(ajax='false')" ) ){ return; }
var type = $(this).attr("method"),
url = path.clean( $(this).attr( "action" ) );
url = path.clean( $(this).attr( "action" ) ),
target = $(this).attr("target");
//external submits use regular HTTP
if( path.isExternal( url ) ){
if( path.isExternal( url ) || target ){
return;
}
@ -632,12 +645,12 @@
}
$.mobile.changePage({
url: url,
type: type || "get",
url: url.length && url || path.get(),
type: type.length && type.toLowerCase() || "get",
data: $(this).serialize()
},
undefined,
undefined,
$(this).jqmData("transition"),
$(this).jqmData("direction"),
true
);
event.preventDefault();
@ -651,7 +664,7 @@
//get href, if defined, otherwise fall to null #
href = $this.attr( "href" ) || "#",
//cache a check for whether the link had a protocol
//if this is true and the link was same domain, we won't want
//to prefix the url with a base (esp helpful in IE, where every
@ -667,23 +680,31 @@
//rel set to external
isEmbeddedPage = path.isEmbeddedPage( url ),
// Some embedded browsers, like the web view in Phone Gap, allow cross-domain XHR
// requests if the document doing the request was loaded via the file:// protocol.
// This is usually to allow the application to "phone home" and fetch app specific
// data. We normally let the browser handle external/cross-domain urls, but if the
// allowCrossDomainPages option is true, we will allow cross-domain http/https
// requests to go through our page loading logic.
isCrossDomainPageLoad = ($.mobile.allowCrossDomainPages && location.protocol === "file:" && url.search(/^https?:/) != -1),
//check for protocol or rel and its not an embedded page
//TODO overlap in logic from isExternal, rel=external check should be
// moved into more comprehensive isExternalLink
isExternal = path.isExternal( url ) || (isRelExternal && !isEmbeddedPage),
isExternal = (path.isExternal(url) && !isCrossDomainPageLoad) || (isRelExternal && !isEmbeddedPage),
//if target attr is specified we mimic _blank... for now
hasTarget = $this.is( "[target]" ),
//if data-ajax attr is set to false, use the default behavior of a link
hasAjaxDisabled = $this.is( "[data-ajax='false']" );
hasAjaxDisabled = $this.is( ":jqmData(ajax='false')" );
//if there's a data-rel=back attr, go back in history
if( $this.is( "[data-rel='back']" ) ){
if( $this.is( ":jqmData(rel='back')" ) ){
window.history.back();
return false;
}
//prevent # urls from bubbling
//path.get() is replaced to combat abs url prefixing in IE
if( url.replace(path.get(), "") == "#" ){
@ -700,27 +721,19 @@
//remove active link class if external (then it won't be there if you come back)
window.setTimeout(function() {removeActiveLinkClass(true);}, 200);
//deliberately redirect, in case click was triggered
if( hasTarget ){
window.open( url );
}
else if( hasAjaxDisabled ){
return;
}
else{
location.href = url;
}
//use default click handling
return;
}
else {
//use ajax
var transition = $this.data( "transition" ),
direction = $this.data("direction"),
var transition = $this.jqmData( "transition" ),
direction = $this.jqmData("direction"),
reverse = (direction && direction === "reverse") ||
// deprecated - remove by 1.0
$this.data( "back" );
$this.jqmData( "back" );
//this may need to be more specific as we use data-rel more
nextPageRole = $this.attr( "data-rel" );
nextPageRole = $this.attr( "data-" + $.mobile.ns + "rel" );
//if it's a relative href, prefix href with base url
if( path.isRelative( url ) && !hadProtocol ){

40
js/jquery.mobile.page.js
View file

@ -10,6 +10,7 @@ $.widget( "mobile.page", $.mobile.widget, {
options: {
backBtnText: "Back",
addBackBtn: true,
backBtnTheme: null,
degradeInputs: {
color: false,
date: false,
@ -32,7 +33,7 @@ $.widget( "mobile.page", $.mobile.widget, {
var $elem = this.element,
o = this.options;
this.keepNative = "[data-role='none'], [data-role='nojs']" + (o.keepNative ? ", " + o.keepNative : "");
this.keepNative = ":jqmData(role='none'), :jqmData(role='nojs')" + (o.keepNative ? ", " + o.keepNative : "");
if ( this._trigger( "beforeCreate" ) === false ) {
return;
@ -41,21 +42,21 @@ $.widget( "mobile.page", $.mobile.widget, {
//some of the form elements currently rely on the presence of ui-page and ui-content
// classes so we'll handle page and content roles outside of the main role processing
// loop below.
$elem.find( "[data-role='page'], [data-role='content']" ).andSelf().each(function() {
$(this).addClass( "ui-" + $(this).data( "role" ) );
$elem.find( ":jqmData(role='page'), :jqmData(role='content')" ).andSelf().each(function() {
$(this).addClass( "ui-" + $(this).jqmData( "role" ) );
});
$elem.find( "[data-role='nojs']" ).addClass( "ui-nojs" );
$elem.find( ":jqmData(role='nojs')" ).addClass( "ui-nojs" );
// pre-find data els
var $dataEls = $elem.find( "[data-role]" ).andSelf().each(function() {
var $dataEls = $elem.find( ":jqmData(role)" ).andSelf().each(function() {
var $this = $( this ),
role = $this.data( "role" ),
theme = $this.data( "theme" );
role = $this.jqmData( "role" ),
theme = $this.jqmData( "theme" );
//apply theming and markup modifications to page,header,content,footer
if ( role === "header" || role === "footer" ) {
$this.addClass( "ui-bar-" + (theme || $this.parent('[data-role=page]').data( "theme" ) || "a") );
$this.addClass( "ui-bar-" + (theme || $this.parent( ":jqmData(role='page')" ).jqmData( "theme" ) || "a") );
// add ARIA role
$this.attr( "role", role === "header" ? "banner" : "contentinfo" );
@ -76,10 +77,15 @@ $.widget( "mobile.page", $.mobile.widget, {
// auto-add back btn on pages beyond first view
if ( o.addBackBtn && role === "header" &&
$( ".ui-page" ).length > 1 &&
$elem.data( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
!leftbtn && $this.data( "backbtn" ) !== false ) {
$elem.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
!leftbtn && $this.jqmData( "backbtn" ) !== false ) {
$( "<a href='#' class='ui-btn-left' data-rel='back' data-icon='arrow-l'>"+ o.backBtnText +"</a>" ).prependTo( $this );
var backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" ).prependTo( $this );
//if theme is provided, override default inheritance
if( o.backBtnTheme ){
backBtn.attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme );
}
}
//page title
@ -120,14 +126,14 @@ $.widget( "mobile.page", $.mobile.widget, {
//enhance form controls
this._enhanceControls();
//links in bars, or those with data-role become buttons
$elem.find( "[data-role='button'], .ui-bar > a, .ui-header > a, .ui-footer > a" )
//links in bars, or those with data-role become buttons
$elem.find( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a" )
.not( ".ui-btn" )
.not(this.keepNative)
.buttonMarkup();
$elem
.find("[data-role='controlgroup']")
.find(":jqmData(role='controlgroup')")
.controlgroup();
//links within content areas
@ -152,7 +158,7 @@ $.widget( "mobile.page", $.mobile.widget, {
if ( o.degradeInputs[ type ] ) {
$( this ).replaceWith(
$( "<div>" ).html( $(this).clone() ).html()
.replace( self._typeAttributeRegex, " type=\""+ optType +"\" data-type=\""+type+"\" " ) );
.replace( self._typeAttributeRegex, " type=\""+ optType +"\" data-" + $.mobile.ns + "type=\""+type+"\" " ) );
}
});
@ -194,11 +200,11 @@ $.widget( "mobile.page", $.mobile.widget, {
nonNativeControls
.filter( "input, select" )
.filter( "[data-role='slider'], [data-type='range']" )
.filter( ":jqmData(role='slider'), :jqmData(type='range')" )
.slider();
nonNativeControls
.filter( "select:not([data-role='slider'])" )
.filter( "select:not(:jqmData(role='slider'))" )
.selectmenu();
}
});

2
js/jquery.mobile.widget.js
View file

@ -11,7 +11,7 @@ $.widget( "mobile.widget", {
var elem = this.element,
options = {};
$.each( this.options, function( option ) {
var value = elem.data( option.replace( /[A-Z]/g, function( c ) {
var value = elem.jqmData( option.replace( /[A-Z]/g, function( c ) {
return "-" + c.toLowerCase();
} ) );
if ( value !== undefined ) {

10
tests/functional/addrbar.html
View file

@ -28,17 +28,17 @@
</style>
</head>
<body>
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header">
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header">
<h1>Event Logger</h1>
</div>
<div data-role="content">
<div data-role="content">
<p>Touch events on this page will log out below, prepending to the top as they arrive.</p>
<a href="foo.html" data-role="button">Click me</a>
<a href="foo.html" data-role="button">Click me</a>
<ul data-role="listview" id="log">
<ul data-role="listview" id="log">
</ul>

8
tests/functional/eventlogger.html
View file

@ -20,15 +20,15 @@
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header">
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header">
<h1>Event Logger</h1>
</div>
<div data-role="content">
<div data-role="content">
<p>Touch events on this page will log out below, prepending to the top as they arrive.</p>
<ul data-role="listview" id="log">
<ul data-role="listview" id="log">
</ul>

10
tests/jquery.testHelper.js
View file

@ -34,6 +34,16 @@
$("body").append(lib);
},
rerunQunit: function(){
var self = this;
QUnit.init();
$("script:not([src*='.\/'])").each(function(i, elem){
var src = elem.src.split("/");
self.reloadLib(src[src.length - 1]);
});
QUnit.start();
},
alterExtend: function(extraExtension){
var extendFn = $.extend;

6
tests/speed/basic-page.html
View file

@ -31,11 +31,11 @@
</head>
<body>
<div data-role="page">
<div data-role="header">
<div data-role="page">
<div data-role="header">
<h1>Basic Page</h1>
</div>
<div data-role="content">
<div data-role="content">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
<p>Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>

8
tests/speed/lists-ul.html
View file

@ -10,15 +10,15 @@
</head>
<body>
<div data-role="page">
<div data-role="page">
<div data-role="header">
<div data-role="header">
<h1>400 item list</h1>
</div><!-- /header -->
<div data-role="content" data-filter="true">
<div data-role="content" data-filter="true">
<ul data-role="listview" data-theme="d">
<ul data-role="listview" data-theme="d">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">BMW</a></li>

12
tests/unit/checkboxradio/index.html
View file

@ -5,9 +5,11 @@
<title>jQuery Mobile Page Test Suite</title>
<script type="text/javascript" src="../../../js/jquery.js"></script>
<script src="../jquery.setNameSpace.js"></script>
<script type="text/javascript" src="../../../js/"></script>
<script type="text/javascript" src="../../../tests/jquery.testHelper.js"></script>
<link rel="stylesheet" href="../../../themes/default/" type="text/css"/>
<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
<script type="text/javascript" src="../../../external/qunit.js"></script>
@ -22,14 +24,14 @@
</ol>
<div id="qunit-fixture">
<div data-role="page">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<div data-nstest-role="page">
<div data-nstest-role="content">
<div data-nstest-role="fieldcontain">
<fieldset data-nstest-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</fieldset>
</fieldset>
</div>
</div>
</div>

62
tests/unit/core/core.js
View file

@ -4,13 +4,20 @@
(function($){
var libName = "jquery.mobile.core.js",
setGradeA = function(value, version) { \
setGradeA = function(value, version) {
$.support.mediaquery = value;
$.mobile.browser.ie = version;
},
extendFn = $.extend;
module(libName, {
setup: function(){
// NOTE reset for gradeA tests
$('html').removeClass('ui-mobile');
// NOTE reset for pageLoading tests
$('.ui-loader').remove();
},
teardown: function(){
$.extend = extendFn;
}
@ -27,4 +34,57 @@
ok($.mobile.gradeA());
});
});
//data tests
test( "$.fn.jqmData and $.fn.jqmRemoveData methods are working properly", function(){
same( $("body").jqmData("foo", true), $("body"), "setting data returns the element" );
same( $("body").jqmData("foo"), true, "getting data returns the right value" );
same( $("body").data($.mobile.ns + "foo"), true, "data was set using namespace" );
same( $("body").jqmData("foo", undefined), true, "getting data still returns the value if there's an undefined second arg" );
same( $("body").jqmData(), { "nstest-foo": true}, "passing no arguments returns a hash with all set properties" );
same( $("body").jqmData(undefined), { "nstest-foo": true}, "passing a single undefined argument returns a hash with all set properties" );
same( $("body").jqmData(undefined, undefined), {"nstest-foo": true}, "passing 2 undefined arguments returns a hash with all set properties" );
same( $("body").jqmRemoveData("foo"), $("body"), "jqmRemoveData returns the element" );
same( $("body").jqmData("foo"), undefined, "jqmRemoveData properly removes namespaced data" );
});
test( "$.jqmData and $.jqmRemoveData methods are working properly", function(){
same( $.jqmData(document.body, "foo", true), true, "setting data returns the value" );
same( $.jqmData(document.body, "foo"), true, "getting data returns the right value" );
same( $.data(document.body, $.mobile.ns + "foo"), true, "data was set using namespace" );
same( $.jqmData(document.body, "foo", undefined), true, "getting data still returns the value if there's an undefined second arg" );
same( $.jqmData(document.body), { "nstest-foo": true}, "passing no arguments returns a hash with all set properties" );
same( $.jqmData(document.body, undefined), { "nstest-foo": true}, "passing a single undefined argument returns a hash with all set properties" );
same( $.jqmData(document.body, undefined, undefined), {"nstest-foo": true}, "passing 2 undefined arguments returns a hash with all set properties" );
same( $.jqmRemoveData(document.body, "foo"), undefined, "jqmRemoveData returns the undefined value" );
same( $("body").jqmData("foo"), undefined, "jqmRemoveData properly removes namespaced data" );
});
test( "jqmHasData method is working properly", function(){
same( $.jqmHasData(document.body, "foo"), false, "body has no data defined under 'foo'" );
$.jqmData(document.body, "foo", true);
same( $.jqmHasData(document.body, "foo"), true, "after setting, body has data defined under 'foo' equal to true" );
$.jqmRemoveData(document.body, "foo");
});
})(jQuery);

4
tests/unit/core/index.html
View file

@ -6,10 +6,10 @@
<title>jQuery Mobile Core Test Suite</title>
<script type="text/javascript" src="../../../js/jquery.js"></script>
<script src="../jquery.setNameSpace.js"></script>
<script type="text/javascript" src="../../../external/qunit.js"></script>
<script type="text/javascript" src="../../../js/"></script>
<!-- added explicitly for library reloading (see testHelper ) -->
<script type="text/javascript" src="../../../js/jquery.mobile.core.js"></script>
<script type="text/javascript" src="../../jquery.testHelper.js"></script>
<link rel="stylesheet" href="../../../themes/default" />
<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
@ -25,7 +25,7 @@
<ol id="qunit-tests">
</ol>
<div data-role="page">
<div data-nstest-role="page">
</div>
</body>

2
tests/unit/dialog/dialog_events.js
View file

@ -13,7 +13,7 @@
setTimeout(function(){
ok(/&ui-state=dialog/.test(location.hash), "ui-state=dialog =~ location.hash");
// close the dialog
$(".ui-dialog .ui-icon-delete").parents("a").click();
$(".ui-dialog").dialog("close");
}, 500);
setTimeout(function(){

9
tests/unit/dialog/index.html
View file

@ -6,6 +6,7 @@
<title>jQuery Mobile Dialog Test Suite</title>
<script type="text/javascript" src="../../../js/jquery.js"></script>
<script src="../jquery.setNameSpace.js"></script>
<script type="text/javascript" src="../../../js/"></script>
<script type="text/javascript" src="../../../tests/jquery.testHelper.js"></script>
@ -24,12 +25,12 @@
<ol id="qunit-tests">
</ol>
<div id="bar" data-role="page">
<a href="#foo-dialog" data-role="button" data-inline="true" data-rel="dialog"></a>
<div id="bar" data-nstest-role="page">
<a href="#foo-dialog" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog"></a>
</div>
<div id="foo-dialog" data-role="dialog">
<div data-role="header" data-theme="d" data-position="inline">
<div id="foo-dialog" data-nstest-role="dialog">
<div data-nstest-role="header" data-nstest-theme="d" data-nstest-position="inline">
<h1>Dialog</h1>
</div>
<a href="#" id="internal-link">foo</a>

108
tests/unit/event/event_core.js
View file

@ -11,15 +11,18 @@
"swipe swipeleft swiperight scrollstart scrollstop").split( " " );
module(libName, {
teardown: function(){
$.each(events, function(i, name){
$("#qunit-fixture").unbind(name);
});
setup: function(){
$($.event.special.scrollstart).unbind("scrollstart");
$($.event.special.tap).unbind("tap");
$($.event.special.tap).unbind("taphold");
$($.event.special.swipe).unbind("swipe");
// ensure bindings are removed
$.each(events, function(i, name){
$.each([$("#qunit-fixture"),
$($.event.special.scrollstart),
$($.event.special.tap),
$($.event.special.tap),
$($.event.special.swipe)], function(j, obj){
obj.unbind(name);
});
});
//NOTE unmock
Math.abs = absFn;
@ -43,24 +46,28 @@
});
});
test( "defined event functions bind a closure when passed", function(){
asyncTest( "defined event functions bind a closure when passed", function(){
expect( 1 );
$('#qunit-fixture')[events[0]](function(){
$('#qunit-fixture').bind(events[0], function(){
ok(true, "event fired");
start();
});
$('#qunit-fixture').trigger(events[0]);
stop();
});
test( "defined event functions trigger the event with no arguments", function(){
asyncTest( "defined event functions trigger the event with no arguments", function(){
expect( 1 );
$('#qunit-fixture')[events[0]](function(){
$('#qunit-fixture').bind('touchstart', function(){
ok(true, "event fired");
start();
});
$('#qunit-fixture')[events[0]]();
$('#qunit-fixture').touchstart();
stop();
});
test( "defining event functions sets the attrFn to true", function(){
@ -75,7 +82,7 @@
ok($.event.special.scrollstart.enabled, "scrollstart enabled");
});
test( "scrollstart setup binds a function that returns when its disabled", function(){
asyncTest( "scrollstart setup binds a function that returns when its disabled", function(){
expect( 1 );
$.event.special.scrollstart.enabled = false;
@ -85,22 +92,24 @@
$($.event.special.scrollstart).bind("touchmove", function(){
ok(true, "touchmove fired");
start();
});
$($.event.special.scrollstart).trigger("touchmove");
});
test( "scrollstart setup binds a function that triggers scroll start when enabled", function(){
asyncTest( "scrollstart setup binds a function that triggers scroll start when enabled", function(){
$.event.special.scrollstart.enabled = true;
$($.event.special.scrollstart).bind("scrollstart", function(){
ok(true, "scrollstart fired");
start();
});
$($.event.special.scrollstart).trigger("touchmove");
});
test( "scrollstart setup binds a function that triggers scroll stop after 50 ms", function(){
asyncTest( "scrollstart setup binds a function that triggers scroll stop after 50 ms", function(){
var triggered = false;
$.event.special.scrollstart.enabled = true;
@ -112,7 +121,6 @@
$($.event.special.scrollstart).trigger("touchmove");
stop();
setTimeout(function(){
ok(triggered, "triggered");
start();
@ -123,13 +131,13 @@
$.support.touch = true;
$.testHelper.reloadLib(libName);
// mock originalEvent information
//mock originalEvent information
$.Event.prototype.originalEvent = {
touches: [{ 'pageX' : 0 }, { 'pageY' : 0 }]
};
};
test( "long press fires tap hold after 750 ms", function(){
asyncTest( "long press fires tap hold after 750 ms", function(){
var taphold = false;
forceTouchSupport();
@ -140,7 +148,6 @@
$($.event.special.tap).trigger("touchstart");
stop();
setTimeout(function(){
ok(taphold);
start();
@ -155,15 +162,16 @@
};
};
test( "touchmove prevents taphold", function(){
asyncTest( "touchmove prevents taphold", function(){
expect( 1 );
var taphold = false;
forceTouchSupport();
mockAbs(100);
//NOTE record taphold event
stop();
$($.event.special.tap).bind("taphold", function(){
ok(false, "taphold fired");
taphold = true;
});
@ -183,30 +191,34 @@
}, 751);
});
test( "tap event fired without movement", function(){
var tap = false;
asyncTest( "tap event fired without movement", function(){
expect( 1 );
var tap = false,
checkTap = function(){
ok(true, "tap fired");
};
forceTouchSupport();
//NOTE record the tap event
$($.event.special.tap).bind("tap", function(){
start();
tap = true;
});
$($.event.special.tap).bind("tap", checkTap);
stop();
$($.event.special.tap).trigger("touchstart");
$($.event.special.tap).trigger("touchend");
ok(tap, "tapped");
setTimeout(function(){
start();
}, 400);
});
test( "tap event not fired when there is movement", function(){
asyncTest( "tap event not fired when there is movement", function(){
expect( 1 );
var tap = false;
forceTouchSupport();
//NOTE record tap event
$($.event.special.tap).bind("tap", function(){
ok(false, "tap fired");
tap = true;
});
@ -218,13 +230,14 @@
$($.event.special.tap).trigger("touchmove");
//NOTE end touch sequence after 20 ms
stop();
setTimeout(function(){
$($.event.special.tap).trigger("touchend");
start();
}, 20);
ok(!tap, "not tapped");
setTimeout(function(){
ok(!tap, "not tapped");
start();
}, 40);
});
var swipeTimedTest = function(opts){
@ -234,7 +247,6 @@
$($.event.special.swipe).bind('swipe', function(){
swipe = true;
start();
});
//NOTE bypass the trigger source check
@ -251,15 +263,14 @@
setTimeout(function(){
$($.event.special.swipe).trigger("touchmove");
$($.event.special.swipe).trigger("touchend");
}, opts.timeout);
}, opts.timeout + 100);
stop();
setTimeout(function(){
same(swipe, opts.expected, "swipe expected");
start();
}, opts.timeout + 200);
//NOTE the start in the event closure won't be fired, fire it here
if(!opts.expected) { start(); }
}, opts.timeout + 10);
stop();
};
test( "swipe fired when coordinate change in less than a second", function(){
@ -278,9 +289,14 @@
swipeTimedTest({ timeout: 1000, coordChange: 75, expected: false });
});
test( "scrolling prevented when coordinate change > 10", function(){
asyncTest( "scrolling prevented when coordinate change > 10", function(){
expect( 1 );
forceTouchSupport();
// ensure the swipe custome event is setup
$($.event.special.swipe).bind('swipe', function(){});
//NOTE bypass the trigger source check
$.Event.prototype.originalEvent = {
touches: false
@ -288,6 +304,7 @@
$.Event.prototype.preventDefault = function(){
ok(true, "prevent default called");
start();
};
mockAbs(11);
@ -296,18 +313,25 @@
$($.event.special.swipe).trigger("touchmove");
});
test( "move handler returns when touchstart has been fired since touchstop", function(){
asyncTest( "move handler returns when touchstart has been fired since touchstop", function(){
expect( 1 );
// bypass triggered event check
$.Event.prototype.originalEvent = {
touches: false
};
forceTouchSupport();
// ensure the swipe custome event is setup
$($.event.special.swipe).bind('swipe', function(){});
$($.event.special.swipe).trigger("touchstart");
$($.event.special.swipe).trigger("touchend");
$($.event.special.swipe).bind("touchmove", function(){
ok(true, "touchmove bound functions are fired");
start();
});
Math.abs = function(){

6
tests/unit/event/index.html
View file

@ -7,11 +7,9 @@
<script type="text/javascript" src="../../../js/jquery.js"></script>
<script type="text/javascript" src="../../../tests/jquery.testHelper.js"></script>
<script type="text/javascript" src="../../../js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.widget.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.media.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.support.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.event.js"></script>
<script type="text/javascript" src="../../../js"></script>
<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
<script type="text/javascript" src="../../../external/qunit.js"></script>

10
tests/unit/fieldContain/fieldContain_events.js Normal file
View file

@ -0,0 +1,10 @@
/*
* mobile dialog unit tests
*/
(function($){
module('jquery.mobile.fieldContain.js');
test( "Field container contains appropriate css styles", function(){
ok($('#test-fieldcontain').hasClass('ui-field-contain ui-body ui-br'), 'A fieldcontain element must contain styles "ui-field-contain ui-body ui-br"');
});
})(jQuery);

42
tests/unit/fieldContain/index.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Mobile FieldContain Integration Test</title>
<script type="text/javascript" src="../../../js/jquery.js"></script>
<script src="../jquery.setNameSpace.js"></script>
<script type="text/javascript" src="../../../js/"></script>
<script type="text/javascript" src="../../../tests/jquery.testHelper.js"></script>
<link rel="stylesheet" href="../../../themes/default/" type="text/css"/>
<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
<script type="text/javascript" src="../../../external/qunit.js"></script>
<script type="text/javascript" src="fieldContain_events.js"></script>
</head>
<body>
<h1 id="qunit-header">jQuery Mobile FieldContainer Test Suite</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>
<div data-nstest-role="page">
<!-- Basic fieldcontain test -->
<div id="test-fieldcontain" data-nstest-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
</div>
</body>
</html>

7
tests/unit/init/index.html
View file

@ -5,13 +5,14 @@
<title>jQuery Mobile Init Test Suite</title>
<!-- meta viewport left out on purpose for test append -->
<script type="text/javascript" src="../../../js/jquery.js"></script>
<script src="../jquery.setNameSpace.js"></script>
<script type="text/javascript" src="../../../js/"></script>
<script type="text/javascript" src="../../../external/qunit.js"></script>
<script type="text/javascript" src="../../jquery.testHelper.js"></script>
<script type="text/javascript" src="init_core.js"></script>
<!-- added explicitly for library reloading (see testHelper ) -->
<script type="text/javascript" src="../../../js/jquery.mobile.init.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.mobile.init.js"></script>
<link rel="stylesheet" href="../../../themes/default" />
<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
</head>
@ -23,10 +24,10 @@
<ol id="qunit-tests">
</ol>
<div data-role="page" id="foo">
<div data-nstest-role="page" id="foo">
</div>
<div data-role="page" id="bar" data-url="bak">
<div data-nstest-role="page" id="bar" data-nstest-url="bak">
</div>
</body>

63
tests/unit/init/init_core.js
View file

@ -6,8 +6,15 @@
mobileSelect = undefined,
metaViewportContentDefault = $.mobile.metaViewportContent,
libName = 'jquery.mobile.init.js',
coreLib = 'jquery.mobile.core.js',
extendFn = $.extend,
setGradeA = function(value) { $.mobile.gradeA = function(){ return value; }; },
extendFn = $.extend;
reloadCoreNSandInit = function(){
$.testHelper.reloadLib(coreLib);
$.testHelper.reloadLib("jquery.setNamespace.js");
$.testHelper.reloadLib(libName);
};
module(libName, {
setup: function(){
@ -35,6 +42,7 @@
mobileSelect = $.mobile.selectmenu;
});
// NOTE for the following two tests see index html for the binding
test( "mobile.page is available when mobile init is fired", function(){
ok(mobilePage !== undefined, "$.mobile.page is defined");
});
@ -44,14 +52,20 @@
});
$.testHelper.excludeFileProtocol(function(){
test( "loading the init library triggers mobilinit on the document", function(){
asyncTest( "loading the init library triggers mobilinit on the document", function(){
var initFired = false;
expect( 1 );
$(window.document).bind('mobileinit', function(event){
ok(true);
initFired = true;
});
$.testHelper.reloadLib(libName);
setTimeout(function(){
ok(initFired, "init fired");
start();
}, 1000);
});
test( "enhancments are skipped when the browser is not grade A", function(){
@ -97,29 +111,32 @@
});
var findFirstPage = function() {
return $("[data-role='page']").first();
return $(":jqmData(role='page')").first();
};
test( "active page and start page should be set to the fist page in the selected set", function(){
var firstPage = findFirstPage();
expect( 2 );
$.testHelper.reloadLib(libName);
var firstPage = findFirstPage();
same($.mobile.firstPage, firstPage);
same($.mobile.activePage, firstPage);
same($.mobile.firstPage[0], firstPage[0]);
same($.mobile.activePage[0], firstPage[0]);
});
test( "mobile viewport class is defined on the first page's parent", function(){
var firstPage = findFirstPage();
expect( 1 );
$.testHelper.reloadLib(libName);
var firstPage = findFirstPage();
ok(firstPage.parent().hasClass('ui-mobile-viewport'));
});
test( "mobile page container is the first page's parent", function(){
var firstPage = findFirstPage();
expect( 1 );
$.testHelper.reloadLib(libName);
var firstPage = findFirstPage();
same($.mobile.pageContainer, firstPage.parent());
same($.mobile.pageContainer[0], firstPage.parent()[0]);
});
test( "page loading is called on document ready", function(){
@ -143,17 +160,15 @@
});
test( "pages without a data-url attribute have it set to their id", function(){
same($("#foo").data('url'), "foo");
same($("#foo").jqmData('url'), "foo");
});
test( "pages with a data-url attribute are left with the original value", function(){
same($("#bar").data('url'), "bak");
same($("#bar").jqmData('url'), "bak");
});
//TODO lots of duplication
asyncTest( "pageLoading doesn't add the dialog to the page when loading message is false", function(){
$.testHelper.alterExtend({loadingMessage: false});
$.testHelper.reloadLib(libName);
$.mobile.loadingMessage = false;
$.mobile.pageLoading(false);
setTimeout(function(){
@ -163,30 +178,27 @@
});
asyncTest( "pageLoading doesn't add the dialog to the page when done is passed as true", function(){
$.testHelper.alterExtend({loadingMessage: true});
$.testHelper.reloadLib(libName);
$.mobile.loadingMessage = true;
$.mobile.pageLoading(true);
setTimeout(function(){
ok(!$(".ui-loader").length);
same($(".ui-loading").length, 0, "page should not be in the loading state");
start();
}, 500);
});
asyncTest( "pageLoading adds the dialog to the page when done is true", function(){
$.testHelper.alterExtend({loadingMessage: true});
$.testHelper.reloadLib(libName);
$.mobile.loadingMessage = true;
$.mobile.pageLoading(false);
setTimeout(function(){
ok($(".ui-loader").length);
same($(".ui-loading").length, 1, "page should be in the loading state");
start();
}, 500);
});
asyncTest( "page loading should contain default loading message", function(){
$.testHelper.reloadLib('jquery.mobile.core.js');
$.testHelper.reloadLib(libName);
reloadCoreNSandInit();
$.mobile.pageLoading(false);
setTimeout(function(){
@ -196,10 +208,7 @@
});
asyncTest( "page loading should contain custom loading message", function(){
$(document).bind('mobileinit', function(){
$.mobile.loadingMessage = "foo";
});
$.mobile.loadingMessage = "foo";
$.testHelper.reloadLib(libName);
$.mobile.pageLoading(false);

4
tests/unit/jquery.setNameSpace.js Normal file
View file

@ -0,0 +1,4 @@
//set namespace for unit test markp
$( document ).bind( "mobileinit", function(){
$.mobile.ns = "nstest-";
});

93
tests/unit/listview/index.html
View file

@ -6,6 +6,7 @@
<title>jQuery Mobile Listview Integration Test</title>
<script type="text/javascript" src="../../../js/jquery.js"></script>
<script src="../jquery.setNameSpace.js"></script>
<script type="text/javascript" src="../../../js/"></script>
<script type="text/javascript" src="../../jquery.testHelper.js"></script>
<link rel="stylesheet" href="../../../themes/default" />
@ -23,12 +24,12 @@
</ol>
<!-- Basic Linked view test -->
<div data-role="page" id='basic-linked-test'>
<div data-role="header" data-position="inline">
<div data-nstest-role="page" id='basic-linked-test'>
<div data-nstest-role="header" data-nstest-position="inline">
<h1>Basic List View</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<div data-nstest-role="content">
<ul data-nstest-role="listview">
<li><a href="#basic-link-results">Home</a></li>
<li><a href="#basic-link-results">Back</a></li>
<li><a href="#basic-link-results">Return</a></li>
@ -36,19 +37,19 @@
</div>
</div>
<div data-role='page' id='basic-link-results'>
<div data-role="header" data-position="inline">
<div data-nstest-role='page' id='basic-link-results'>
<div data-nstest-role="header" data-nstest-position="inline">
<h1>Results</h1>
</div>
</div>
<!-- Nested List -->
<div data-role="page" id='nested-list-test'>
<div data-role="header" data-position="inline">
<div data-nstest-role="page" id='nested-list-test'>
<div data-nstest-role="header" data-nstest-position="inline">
<h1>Basic List View</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<div data-nstest-role="content">
<ul data-nstest-role="listview">
<li>Groups of animals
<ul>
<li>pod of whales</li>
@ -71,12 +72,12 @@
</div>
<!-- Numbered List -->
<div data-role="page" id='numbered-list-test'>
<div data-role="header" data-position="inline">
<div data-nstest-role="page" id='numbered-list-test'>
<div data-nstest-role="header" data-nstest-position="inline">
<h1>Basic List View</h1>
</div>
<div data-role="content">
<ol data-role="listview">
<div data-nstest-role="content">
<ol data-nstest-role="listview">
<li><a href="#numbered-list-results">Number 1</a></li>
<li><a href="#numbered-list-results">Number 2</a></li>
<li><a href="#numbered-list-results">Number 3</a></li>
@ -84,19 +85,19 @@
</div>
</div>
<div data-role='page' id='numbered-list-results'>
<div data-role="header" data-position="inline">
<div data-nstest-role='page' id='numbered-list-results'>
<div data-nstest-role="header" data-nstest-position="inline">
<h1>Numbered List</h1>
</div>
</div>
<!-- Read only List -->
<div data-role="page" id='read-only-list-test'>
<div data-role="header" data-position="inline">
<div data-nstest-role="page" id='read-only-list-test'>
<div data-nstest-role="header" data-nstest-position="inline">
<h1>Basic List View</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<div data-nstest-role="content">
<ul data-nstest-role="listview">
<li>Read</li>
<li>Only</li>
<li>List</li>
@ -106,12 +107,12 @@
</div>
<!-- Split listview -->
<div data-role="page" id='split-list-test'>
<div data-role="header" data-position="inline">
<div data-nstest-role="page" id='split-list-test'>
<div data-nstest-role="header" data-nstest-position="inline">
<h1>Split List View</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<div data-nstest-role="content">
<ul data-nstest-role="listview">
<li>
<a href="#split-list-link1">link one</a>
<a href="#split-list-link2">link second</a>
@ -128,42 +129,42 @@
</div>
</div>
<div data-role="page" id='split-list-link1'>
<div data-role="header" data-position="inline">
<div data-nstest-role="page" id='split-list-link1'>
<div data-nstest-role="header" data-nstest-position="inline">
<h1>Split List view 1</h1>
</div>
</div>
<div data-role="page" id='split-list-link2'>
<div data-role="header" data-position="inline">
<div data-nstest-role="page" id='split-list-link2'>
<div data-nstest-role="header" data-nstest-position="inline">
<h1>Split List view 2</h1>
</div>
</div>
<!-- List divider -->
<div data-role="page" id='list-divider-test'>
<div data-role="header" data-position="inline">
<div data-nstest-role="page" id='list-divider-test'>
<div data-nstest-role="header" data-nstest-position="inline">
<h1>List Divider Test</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<div data-nstest-role="content">
<ul data-nstest-role="listview">
<li>a is for aquaman</li>
<li>b is for batman</li>
<li data-role="list-divider">This is a list divider</li>
<li data-nstest-role="list-divider">This is a list divider</li>
<li>c is for catwoman</li>
<li data-role="list-divider">This is another list divider</li>
<li data-nstest-role="list-divider">This is another list divider</li>
<li>d is for darkwing</li>
</ul>
</div>
</div>
<!-- Search bar filter -->
<div data-role="page" id='search-filter-test'>
<div data-role="header" data-position="inline">
<div data-nstest-role="page" id='search-filter-test'>
<div data-nstest-role="header" data-nstest-position="inline">
<h1>Split List View</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<div data-nstest-role="content">
<ul data-nstest-role="listview" data-nstest-filter="true">
<li>a is for aquaman</li>
<li>b is for batman</li>
<li>c is for catwoman</li>
@ -173,19 +174,19 @@
</div>
<!-- Search bar filter with list-dividers -->
<div data-role="page" id='search-filter-with-dividers-test'>
<div data-role="header" data-position="inline">
<div data-nstest-role="page" id='search-filter-with-dividers-test'>
<div data-nstest-role="header" data-nstest-position="inline">
<h1>Split List View</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li data-role="list-divider">a</li>
<div data-nstest-role="content">
<ul data-nstest-role="listview" data-nstest-filter="true">
<li data-nstest-role="list-divider">a</li>
<li>a is for aquaman</li>
<li data-role="list-divider">b</li>
<li data-nstest-role="list-divider">b</li>
<li>b is for batman</li>
<li data-role="list-divider">c</li>
<li data-nstest-role="list-divider">c</li>
<li>c is for catwoman</li>
<li data-role="list-divider">d</li>
<li data-nstest-role="list-divider">d</li>
<li>d is for darkwing</li>
</ul>
</div>

183
tests/unit/listview/listview_core.js
View file

@ -2,21 +2,29 @@
* mobile listview unit tests
*/
// TODO splite out into seperate test files
// TODO split out into seperate test files
(function($){
module('Basic Linked list');
$.mobile.defaultTransition = "none";
module('Basic Linked list', {
setup: function(){
$.testHelper.openPage("#basic-linked-test");
}
});
asyncTest( "The page should enhanced correctly", function(){
setTimeout(function() {
ok($('.ui-page-active').length > 0, "ui-page-active added to current page");
ok($('.ui-page-active [role="option"]').length == 3, "roles added to li elements");
ok($('#basic-linked-test [role="option"]').length == 3, "roles added to li elements");
start();
}, 100);
});
asyncTest( "Slides to the listview page when the li is clicked", function() {
$('.ui-page-active li').first().click();
asyncTest( "Slides to the listview page when the li a is clicked", function() {
$.testHelper.openPage("#basic-linked-test");
setTimeout(function(){
$('#basic-linked-test li a').first().click();
}, 500);
setTimeout(function() {
ok($('#basic-link-results').hasClass('ui-page-active'));
start();
@ -24,7 +32,10 @@
});
asyncTest( "Slides back to main page when back button is clicked", function() {
$('#basic-link-results a:contains("Back")').click();
$.testHelper.openPage("#basic-link-results");
$('.ui-page-active a:jqmData(rel="back")').click();
setTimeout(function() {
ok($('#basic-linked-test').hasClass('ui-page-active'));
start();
@ -34,20 +45,22 @@
module('Nested List Test');
asyncTest( "Changes page to nested list test and enhances", function() {
location.href = location.href.split('#')[0] + "#nested-list-test";
$.testHelper.openPage("#nested-list-test");
setTimeout(function() {
ok($('#nested-list-test').hasClass('ui-page-active'), "makes nested list test page active");
ok($('[role="option"]', $('#nested-list-test')).length == 2, 'Adds data role to the two LIs');
ok($('body > [data-url="nested-list-test&ui-page=More-animals-0"]').length == 1, "Adds first UL to the page");
ok($('body > [data-url="nested-list-test&ui-page=Groups-of-animals-1"]').length == 1, "Adds second nested UL to the page");
ok($(':jqmData(url="nested-list-test&ui-page=More-animals-0")').length == 1, "Adds first UL to the page");
ok($(':jqmData(url="nested-list-test&ui-page=Groups-of-animals-1")').length == 1, "Adds second nested UL to the page");
start();
}, 1000);
});
asyncTest( "change to nested page when the li is clicked", function() {
$('.ui-page-active li:eq(1)').click();
asyncTest( "change to nested page when the li a is clicked", function() {
$.testHelper.openPage("#nested-list-test");
$('.ui-page-active li:eq(1) a:eq(0)').click();
setTimeout(function() {
var $new_page = $('body > [data-url="nested-list-test&ui-page=More-animals-0"]');
var $new_page = $(':jqmData(url="nested-list-test&ui-page=More-animals-0")');
ok($new_page.hasClass('ui-page-active'), 'Makes the nested page the active page.');
ok($('.ui-listview', $new_page).find(":contains('Rhumba of rattlesnakes')").length == 1, "The current page should have the proper text in the list.");
ok($('.ui-listview', $new_page).find(":contains('Shoal of Bass')").length == 1, "The current page should have the proper text in the list.");
@ -56,7 +69,9 @@
});
asyncTest( "should go back to top level when the back button is clicked", function() {
$('body > [data-url="nested-list-test&ui-page=More-animals-0"]').find('a:contains("Back")').click();
$('.ui-page-active a:jqmData(rel="back")').click();
setTimeout(function() {
ok($('#nested-list-test').hasClass('ui-page-active'), 'Transitions back to the parent nested page');
start();
@ -80,8 +95,8 @@
}, 1000);
});
asyncTest( "changes to number 1 page when the li is clicked", function() {
$('.ui-page-active li').first().click();
asyncTest( "changes to number 1 page when the li a is clicked", function() {
$('.ui-page-active li a').first().click();
setTimeout(function() {
ok($('#numbered-list-results').hasClass('ui-page-active'), "The new numbered page was transitioned correctly.");
start();
@ -89,7 +104,7 @@
});
asyncTest( "takes us back to the numbered list when the back button is clicked", function() {
$('.ui-page-active a:contains("Back")').click();
$('.ui-page-active a:jqmData(rel="back")').click();
setTimeout(function() {
ok($('#numbered-list-test').hasClass('ui-page-active'));
start();
@ -120,7 +135,8 @@
module('Split view list');
asyncTest( "changes the page to the split view list and enhances it correctly.", function() {
location.href = location.href.split('#')[0] + "#split-list-test";
$.testHelper.openPage("#split-list-test");
setTimeout(function() {
var $new_page = $('#split-list-test');
ok($('[role="option"]', $new_page).length == 3);
@ -131,7 +147,12 @@
});
asyncTest( "change the page to the split view page 1 when the first link is clicked", function() {
$('.ui-page-active [role="option"]:eq(0)').click();
$.testHelper.openPage("#split-list-test");
setTimeout(function(){
$('.ui-page-active [role="option"]:eq(0) a:eq(0)').click();
}, 500);
setTimeout(function() {
ok($('#split-list-link1').hasClass('ui-page-active'));
start();
@ -139,29 +160,37 @@
});
asyncTest( "Slide back to the parent list view when the back button is clicked", function() {
$('.ui-page-active a:contains("Back")').click();
setTimeout(function() {
ok($('#split-list-test').hasClass('ui-page-active'));
start();
}, 1000);
$.testHelper.openPage("#split-list-test");
$.testHelper.sequence([
function(){
$('.ui-page-active [role="option"]:eq(0)').click();
},
function(){
$('.ui-page-active a:jqmData(rel="back")').click();
},
function() {
ok($('#split-list-test').hasClass('ui-page-active'));
start();
}
], 1000);
});
asyncTest( "Clicking on the icon (the second link) should take the user to other a href of this LI", function() {
$('.ui-page-active .ui-li-link-alt:eq(0)').click();
$.testHelper.openPage("#split-list-test");
setTimeout(function(){
$('.ui-page-active .ui-li-link-alt:eq(0)').click();
}, 500);
setTimeout(function() {
ok($('#split-list-link2').hasClass('ui-page-active'));
start();
}, 1000);
});
asyncTest( "Slide back to the parent list view when the back button is clicked", function() {
$('.ui-page-active a:contains("Back")').click();
setTimeout(function() {
ok($('#split-list-test').hasClass('ui-page-active'));
start();
}, 1000);
});
module( "List Dividers" );
asyncTest( "Makes the list divider page the active page and enhances it correctly.", function() {
@ -174,41 +203,42 @@
}, 1000);
});
module( "Search Filter", {
setup: function(){
location.href = location.href.split('#')[0] + "#search-filter-test";
}
});
module( "Search Filter");
var searchFilterId = "#search-filter-test";
asyncTest( "Make the search filter page the actie page and enhance it correctly.", function() {
setTimeout(function() {
var $new_page = $('#search-filter-test');
ok($new_page.find('input').length == 1);
ok($new_page.hasClass('ui-page-active'));
start();
}, 1000);
});
asyncTest( "Filter downs results when the user enters information", function() {
$('.ui-page-active input').val('at');
$('.ui-page-active input').trigger('change');
var $searchPage = $(searchFilterId);
$.testHelper.openPage(searchFilterId);
setTimeout(function(){
$searchPage.find('input').val('at');
$searchPage.find('input').trigger('change');
}, 500);
setTimeout(function() {
same($('.ui-page-active li[style^="display: none;"]').length, 2);
same($searchPage.find('li[style^="display: none;"]').length, 2);
start();
}, 1000);
});
asyncTest( "Redisplay results when user removes values", function() {
$('.ui-page-active input').val('a');
$('.ui-page-active input').trigger('change');
var $searchPage = $(searchFilterId);
$.testHelper.openPage(searchFilterId);
setTimeout(function(){
$searchPage.find('input').val('a');
$searchPage.find('input').trigger('change');
}, 500);
setTimeout(function() {
same($('.ui-page-active li[style^="display: none;"]').length, 0);
same($searchPage.find("li[style^='display: none;']").length, 0);
start();
}, 1000);
});
test( "Refresh applys thumb styling", function(){
test( "Refresh applies thumb styling", function(){
var ul = $('.ui-page-active ul');
ul.append("<li id='fiz'><img/></li>");
@ -217,54 +247,61 @@
ok(ul.find("#fiz img").hasClass("ui-li-thumb"));
});
asyncTest( "Filter downs results and dividers when the user enters information", function() {
var $searchPage = $("#search-filter-with-dividers-test");
$.testHelper.openPage("#search-filter-with-dividers-test");
module( "Search Filter with dividers", {
setup: function(){
location.href = location.href.split('#')[0] + "#search-filter-with-dividers-test";
}
});
asyncTest( "Filter downs results when the user enters information", function() {
// wait for the page to become active/enhanced
setTimeout(function(){
$('.ui-page-active input').val('at');
$('.ui-page-active input').trigger('change');
$searchPage.find('input').val('at');
$searchPage.find('input').trigger('change');
}, 500);
setTimeout(function() {
same($('.ui-page-active li[style^="display: none;"]').length, 4);
same($('.ui-page-active li[data-role=list-divider][style^="display: none;"]').length, 2);
same($('.ui-page-active li:not([data-role=list-divider])[style^="display: none;"]').length, 2);
//there should be four hidden list entries
same($searchPage.find('li[style^="display: none;"]').length, 4);
//there should be two list entries that are list dividers and hidden
same($searchPage.find('li:jqmData(role=list-divider)[style^="display: none;"]').length, 2);
//there should be two list entries that are not list dividers and hidden
same($searchPage.find('li:not(:jqmData(role=list-divider))[style^="display: none;"]').length, 2);
start();
}, 1000);
});
asyncTest( "Redisplay results when user removes values", function() {
$.testHelper.openPage("#search-filter-with-dividers-test");
// wait for the page to become active/enhanced
setTimeout(function(){
$('.ui-page-active input').val('a');
$('.ui-page-active input').trigger('change');
}, 500);
setTimeout(function() {
same($('.ui-page-active input').val(), 'a');
same($('.ui-page-active li[style^="display: none;"]').length, 0);
start();
}, 1000);
});
asyncTest( "Dividers are hidden when preceding hidden rows and shown when preceding shown rows", function () {
$.testHelper.openPage("#search-filter-with-dividers-test");
var $page = $('.ui-page-active');
// wait for the page to become active/enhanced
setTimeout(function(){
$('.ui-page-active input').val('at');
$('.ui-page-active input').trigger('change');
$page.find('input').val('at');
$page.find('input').trigger('change');
}, 500);
setTimeout(function() {
same($('.ui-page-active li[data-role=list-divider][style^="display: none;"]').length, 2);
same($('.ui-page-active li[data-role=list-divider][style^="display: none;"] + li:not([data-role=list-divider])[style^="display: none;"]').length, 2);
same($('.ui-page-active li[data-role=list-divider]:not([style^="display: none;"]) + li:not([data-role=list-divider]):not([style^="display: none;"])').length, 2);
same($page.find('li:jqmData(role=list-divider):hidden').length, 2);
same($page.find('li:jqmData(role=list-divider):hidden + li:not(:jqmData(role=list-divider)):hidden').length, 2);
same($page.find('li:jqmData(role=list-divider):not(:hidden) + li:not(:jqmData(role=list-divider)):not([:hidden)').length, 2);
start();
}, 1000);
});
})(jQuery);

2
tests/unit/navigation/data-url-tests/data-url.html
View file

@ -3,7 +3,7 @@
<head>
</head>
<body>
<div data-role="page" data-url="foo/" data-other="for testing">
<div data-nstest-role="page" data-nstest-url="foo/" data-other="for testing">
</div>
</body>
</html>

2
tests/unit/navigation/data-url-tests/nested.html
View file

@ -3,6 +3,6 @@
<head>
</head>
<body>
<div data-role="page" data-url="foo/bar.html"></div>
<div data-nstest-role="page" data-nstest-url="foo/bar.html"></div>
</body>
</html>

2
tests/unit/navigation/data-url-tests/non-data-url.html
View file

@ -3,7 +3,7 @@
<head>
</head>
<body>
<div data-role="page">
<div data-nstest-role="page">
</div>
</body>
</html>

2
tests/unit/navigation/data-url-tests/reverse-attr.html
View file

@ -3,6 +3,6 @@
<head>
</head>
<body>
<div data-url='foo/bar/reverse.html' data-role='page'></div>
<div data-nstest-url="foo/bar/reverse.html" data-nstest-role="page"></div>
</body>
</html>

2
tests/unit/navigation/data-url-tests/single-quotes.html
View file

@ -3,6 +3,6 @@
<head>
</head>
<body>
<div data-role='page' data-url='foo/bar/single.html'></div>
<div data-nstest-role='page' data-nstest-url='foo/bar/single.html'></div>
</body>
</html>

75
tests/unit/navigation/index.html
View file

@ -6,6 +6,7 @@
<title>jQuery Mobile Navigation Test Suite</title>
<script type="text/javascript" src="../../../js/jquery.js"></script>
<script src="../jquery.setNameSpace.js"></script>
<script type="text/javascript" src="../../../js/"></script>
<script type="text/javascript" src="../../../tests/jquery.testHelper.js"></script>
@ -25,109 +26,109 @@
<ol id="qunit-tests">
</ol>
<div id="foo" data-role="page">
<a href="#bar" data-transition="flip"></a>
<div id="foo" data-nstest-role="page">
<a href="#bar" data-nstest-transition="flip"></a>
</div>
<div id="bar" data-role="page">
<div id="bar" data-nstest-role="page">
<a href="#baz"></a>
</div>
<div id="baz" data-role="page">
<div id="baz" data-nstest-role="page">
<a href="#foo"></a>
</div>
<div id="fade-trans" data-role="page">
<a href="#flip-trans" data-transition="fade"></a>
<div id="fade-trans" data-nstest-role="page">
<a href="#flip-trans" data-nstest-transition="fade"></a>
</div>
<div id="flip-trans" data-role="page">
<a href="#fade-trans" data-transition="flip"></a>
<div id="flip-trans" data-nstest-role="page">
<a href="#fade-trans" data-nstest-transition="flip"></a>
</div>
<div id="no-trans" data-role="page">
<div id="no-trans" data-nstest-role="page">
<a href="#pop-trans"></a>
</div>
<div id="pop-trans" data-role="page">
<a href="#no-trans" data-transition="pop"></a>
<div id="pop-trans" data-nstest-role="page">
<a href="#no-trans" data-nstest-transition="pop"></a>
</div>
<div id="default-trans" data-role="page">
<div id="default-trans" data-nstest-role="page">
<a href="#no-trans"></a>
</div>
<div id="data-url" data-role="page">
<div id="data-url" data-nstest-role="page">
<a href="data-url-tests/data-url.html"></a>
</div>
<div id="non-data-url" data-role="page">
<div id="non-data-url" data-nstest-role="page">
<a href="data-url-tests/non-data-url.html"></a>
</div>
<div id="nested-data-url" data-role="page">
<div id="nested-data-url" data-nstest-role="page">
<a href="data-url-tests/nested.html"></a>
</div>
<div id="single-quotes-data-url" data-role="page">
<div id="single-quotes-data-url" data-nstest-role="page">
<a href="data-url-tests/single-quotes.html"></a>
</div>
<div id="reverse-attr-data-url" data-role="page">
<div id="reverse-attr-data-url" data-nstest-role="page">
<a href="data-url-tests/reverse-attr.html"></a>
</div>
<div id="ajax-diabled-form" data-role="page">
<form method="POST" id="non-ajax-form" action="/ajax-disabled-form" data-ajax="false">
<div id="ajax-diabled-form" data-nstest-role="page">
<form method="POST" id="non-ajax-form" action="/ajax-disabled-form" data-nstest-ajax="false">
</form>
<form method="POST" id="ajax-form" action="/ajax-diabled-form">
</form>
<form method="POST" id="rand-ajax-form" action="/ajax-disabled-form" data-ajax="foo">
<form method="POST" id="rand-ajax-form" action="/ajax-disabled-form" data-nstest-ajax="foo">
</form>
</div>
<div id="default-trans-dialog" data-role="page">
<a href="#no-trans-dialog" data-rel="dialog"></a>
<div id="default-trans-dialog" data-nstest-role="page">
<a href="#no-trans-dialog" data-nstest-rel="dialog"></a>
</div>
<div id="no-trans-dialog" data-role="page">
<div id="no-trans-dialog" data-nstest-role="page">
</div>
<div id="dup-history-first" data-role="page">
<a href="#dup-history-second" data-transition="slideup" data-role="button" >
<div id="dup-history-first" data-nstest-role="page">
<a href="#dup-history-second" data-nstest-transition="slideup" data-nstest-role="button" >
Page 2
</a>
</div>
<div id="dup-history-second" data-role="page">
<a href="#dup-history-first" data-transition="slideup" data-role="button">
<div id="dup-history-second" data-nstest-role="page">
<a href="#dup-history-first" data-nstest-transition="slideup" data-nstest-role="button">
Page 1
</a>
<a href="#dup-history-dialog" data-role="button" data-transition="pop" data-rel="dialog">Dialog</a>
<a href="#dup-history-dialog" data-nstest-role="button" data-nstest-transition="pop" data-nstest-rel="dialog">Dialog</a>
</div>
<div id="dup-history-dialog" data-role="dialog">
<div data-role="header" data-position="inline">
<div id="dup-history-dialog" data-nstest-role="dialog">
<div data-nstest-role="header" data-nstest-position="inline">
<h1>Dialog</h1>
</div>
</div>
<div id="skip-dialog-first" data-role="page">
<div data-role="content">
<a href="#skip-dialog" data-role="button" data-transition="pop" data-rel="dialog">Dialog</a>
<div id="skip-dialog-first" data-nstest-role="page">
<div data-nstest-role="content">
<a href="#skip-dialog" data-nstest-role="button" data-nstest-transition="pop" data-nstest-rel="dialog">Dialog</a>
</div>
</div>
<div id="skip-dialog" data-role="dialog">
<div data-role="content">
<div id="skip-dialog" data-nstest-role="dialog">
<div data-nstest-role="content">
<a href="#skip-dialog-second">Page 2</a>
</div>
</div>
<div id="skip-dialog-second" data-role="page">
<a href="#" data-rel="back">Go Back</a>
<div id="skip-dialog-second" data-nstest-role="page">
<a href="#" data-nstest-rel="back">Go Back</a>
</div>
</body>
</html>

8
tests/unit/navigation/navigation_core.js
View file

@ -47,7 +47,7 @@
fired = true;
});
$( "<a>test</a>" ).appendTo( $.mobile.pageContainer ).click();
$( "<a>test</a>" ).appendTo( $.mobile.firstPage ).click();
setTimeout(function(){
start();
@ -242,10 +242,12 @@
function(){ $("#dup-history-second a:first").click(); },
function(){ $("#dup-history-first a").click(); },
function(){ $("#dup-history-second a:last").click(); },
function(){ $("#dup-history-dialog .ui-icon-delete").click(); },
function(){ $("#dup-history-dialog :jqmData(rel=back)").click(); },
function(){
// third page in the stack to account for first page being hash manipulation
// fourth page (third index) in the stack to account for first page being hash manipulation,
// the third page is dup-history-second which has two entries in history
// the test is to make sure the index isn't 1 in this case, or the first entry for dup-history-second
same($.mobile.urlHistory.activeIndex, 3, "should be the third page in the stack");
start();
}], 1000);

7
tests/unit/page/index.html
View file

@ -6,6 +6,7 @@
<title>jQuery Mobile Page Test Suite</title>
<script type="text/javascript" src="../../../js/jquery.js"></script>
<script src="../jquery.setNameSpace.js"></script>
<script type="text/javascript" src="../../../js/"></script>
<script type="text/javascript" src="../../../tests/jquery.testHelper.js"></script>
@ -24,15 +25,15 @@
</ol>
<div id="qunit-fixture">
<div data-role="page">
<div data-role="header">
<div data-nstest-role="page">
<div data-nstest-role="header">
<div>
<a href="foo">foo</a>
</div>
<a href="foo">foo</a>
</div><!-- /header -->
<div data-role="footer">
<div data-nstest-role="footer">
<div>
<a href="foo">foo</a>
</div>

4
tests/unit/page/page_core.js
View file

@ -32,7 +32,7 @@
});
test( "no auto-generated back button exists on first page", function(){
ok( !$('.ui-header > [data-rel="back"]').length );
ok( !$(".ui-header > :jqmData(rel='back')").length );
});
test( "input type replacement regex works properly", function(){
@ -45,4 +45,4 @@
ok(!typeAttributeRegex.test( "<inputtype=\"range\"" ), "requires preceding space" );
});
})(jQuery);
})(jQuery);

Some files were not shown because too many files have changed in this diff Show more