Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'data-namespacing'

Browse source
This commit is contained in:
John Bender 2011-03-25 18:46:00 -07:00
commit 4fe0b29a0f
83 changed files with 708 additions and 568 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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>

3
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: "jq-"):</dt>
<dd>The namespaced used in data- attributes, for example, data-role. Can be set to anything, including a blank string.</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>

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

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

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;

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

@ -29,7 +29,7 @@
<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>

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>

8
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,7 +56,7 @@
<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>
@ -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-themes.html
View file

@ -35,7 +35,7 @@
</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;
@ -48,7 +48,7 @@
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></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>
@ -90,7 +90,7 @@
<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;
@ -127,7 +127,7 @@
<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>
<img src="images/album-bb.jpg" />
@ -143,7 +143,7 @@
</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;

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>

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

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

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

@ -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("[data-"+ $.mobile.ns +"role=list-divider]");
this._lastDivider = null;
},

6
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) {
$("[data-"+ $.mobile.ns +"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("[data-"+ $.mobile.ns +"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.

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[data-"+ $.mobile.ns +"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({
"touchstart mousedown": 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 );
},
"touchmove touchend mouseup": 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 );
},
"mouseover 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 );
},
"mouseout 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 );
}
});

16
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'),

63
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",
@ -48,13 +52,13 @@
loadingMessage: "loading",
//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 +98,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 +114,56 @@
}, 150 );
}
});
//mobile version of data() method
//treats namespaced data-attrs the same as non-namespaced ones
$.fn.jqmData = function( prop, value ){
var pUndef = prop === undefined,
vUndef = value === undefined;
if( pUndef || vUndef ){
var ret,
nsret;
//if no args are passed, a data hash is expected. Remap non-namespaced props
if( pUndef ){
ret = this.data();
$.each( ret, function( i ){
var nsIndex = i.indexOf( $.mobile.ns );
if( nsIndex == 0 ){
ret[ i.substr( $.mobile.ns.length ) ] = ret[ i ];
}
});
}
//if it's a prop get, try namepaced version if prop is undefined
else if( vUndef ){
ret = this.data( prop );
if( ret === undefined ){
nsret = this.data( $.mobile.ns + prop );
if( nsret !== undefined ){
ret = nsret;
}
}
}
return ret;
}
};
// Monkey-patching Sizzle to filter the :jqmData selector
var oldFind = jQuery.find;
jQuery.find = function( selector, context, ret, extra ) {
selector = selector.replace(/:jqmData\(([^)]*)\)/g, "[data-" + (jQuery.mobile.ns || "") + "$1]");
return oldFind.call( this, selector, context, ret, extra );
};
jQuery.extend( jQuery.find, oldFind );
jQuery.find.matches = function( expr, set ) {
return jQuery.find( expr, null, null, set );
};
jQuery.find.matchesSelector = function( node, expr ) {
return jQuery.find( expr, null, null, [node] ).length > 0;
};
})( jQuery, this );

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

@ -16,14 +16,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'>Close</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 +42,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");
}
});

4
js/jquery.mobile.event.js
View file

@ -66,13 +66,13 @@ $.event.special.tap = {
.bind( "mousedown touchstart", function( event ) {
if ( event.which && event.which !== 1 ||
//check if event fired once already by a device that fires both mousedown and touchstart (while supporting both events)
$this.data( "prevEvent") && $this.data( "prevEvent") !== event.type ) {
$this.jqmData( "prevEvent") && $this.jqmData( "prevEvent") !== event.type ) {
return false;
}
//save event type so only this type is let through for a temp duration,
//allowing quick repetitive taps but not duplicative events
$this.data( "prevEvent", event.type );
$this.jqmData( "prevEvent", event.type );
setTimeout(function(){
$this.removeData( "prevEvent" );
}, 800);

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

38
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
});
@ -55,14 +53,14 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
"touchmove": function( event ){
var oe = event.originalEvent.touches[0];
if( label.data("movestart") ){
if( Math.abs( label.data("movestart")[0] - oe.pageX ) > 10 ||
Math.abs( label.data("movestart")[1] - oe.pageY ) > 10 ){
label.data("moved", true);
if( label.jqmData("movestart") ){
if( Math.abs( label.jqmData("movestart")[0] - oe.pageX ) > 10 ||
Math.abs( label.jqmData("movestart")[1] - oe.pageY ) > 10 ){
label.jqmData("moved", true);
}
}
else{
label.data("movestart", [ parseFloat( oe.pageX ), parseFloat( oe.pageY ) ]);
label.jqmData("movestart", [ parseFloat( oe.pageX ), parseFloat( oe.pageY ) ]);
}
},
@ -71,16 +69,16 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
event.preventDefault();
return;
}
label.removeData("movestart");
if( label.data("etype") && label.data("etype") !== event.type || label.data("moved") ){
if( label.jqmData("etype") && label.jqmData("etype") !== event.type || label.jqmData("moved") ){
label.removeData("etype").removeData("moved");
if( label.data("moved") ){
if( label.jqmData("moved") ){
label.removeData("moved");
}
return false;
}
label.data( "etype", event.type );
label.jqmData( "etype", event.type );
self._cacheVals();
input.attr( "checked", inputtype === "radio" && true || !input.is( ":checked" ) );
self._updateAll();
@ -116,19 +114,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");
}

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

@ -82,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(),
@ -105,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>", {
@ -121,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(),
@ -194,7 +194,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
.removeClass( $.mobile.activeBtnClass );
});
} else {
//create list from select, update state
@ -211,11 +211,11 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
button
.bind( "touchstart" , function( event ){
//set startTouches to cached copy of
$( this ).data( "startTouches", $.extend({}, event.originalEvent.touches[ 0 ]) );
$( this ).jqmData( "startTouches", $.extend({}, event.originalEvent.touches[ 0 ]) );
})
.bind( $.support.touch ? "touchend" : "mouseup" , function( event ){
//if it's a scroll, don't open
if( $( this ).data( "moved" ) ){
if( $( this ).jqmData( "moved" ) ){
$( this ).removeData( "moved" );
} else {
self.open();
@ -225,12 +225,12 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
.bind( "touchmove", function( event ){
//if touch moved enough, set data moved and don't open menu
var thisTouches = event.originalEvent.touches[ 0 ],
startTouches = $( this ).data( "startTouches" ),
startTouches = $( this ).jqmData( "startTouches" ),
deltaX = Math.abs(thisTouches.pageX - startTouches.pageX),
deltaY = Math.abs(thisTouches.pageY - startTouches.pageY);
if( deltaX > 10 || deltaY > 10 ){
$( this ).data( "moved", true );
$( this ).jqmData( "moved", true );
}
});
@ -300,13 +300,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" );
}
@ -319,7 +319,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(" ") );
@ -408,7 +408,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
//add active class to button
self.button.addClass( $.mobile.activeBtnClass );
//remove after delay
setTimeout(function(){
self.button.removeClass( $.mobile.activeBtnClass );
@ -425,7 +425,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
//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 );

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

@ -68,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" ) );
}
});

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

@ -8,9 +8,10 @@
$.mobile.listview.prototype.options.filter = false;
$( "[data-role='listview']" ).live( "listviewcreate", function() {
$( ":jqmData(role='listview')" ).live( "listviewcreate", function() {
var list = $( this ),
listview = list.data( "listview" );
listview = list.jqmData( "listview" );
if ( !listview.options.filter ) {
return;
}
@ -18,9 +19,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: "Filter results..."
})
.attr( "data-" + $.mobile.ns + "type", "search" )
.bind( "keyup change", function() {
var val = this.value.toLowerCase(),
listItems = list.children();
@ -33,7 +34,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 +52,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 );
});

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

@ -122,7 +122,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
_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" );
@ -158,7 +158,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;
@ -189,12 +189,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 +212,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 +232,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" );
@ -307,32 +307,28 @@ $.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 ) {
var list = $( this ),
parent = list.parent(),
title = $.trim(parent.contents()[ 0 ].nodeValue) || parent.find('a:first').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) {

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

48
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
@ -254,7 +254,6 @@
else{
// defer execution for consistency between webkit/non webkit
setTimeout(callback, 0);
return $(this);
}
};
@ -380,12 +379,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 } );
}
@ -408,16 +407,16 @@
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 );
//trigger show/hide events
if( from ){
from.data( "page" )._trigger( "hide", null, { nextPage: to } );
from.jqmData( "page" )._trigger( "hide", null, { nextPage: to } );
}
//trigger pageshow, define prevPage as either from or empty jQuery obj
to.data( "page" )._trigger( "show", null, { prevPage: from || $("") } );
to.jqmData( "page" )._trigger( "show", null, { prevPage: from || $("") } );
//set "to" as activePage
$.mobile.activePage = to;
@ -486,10 +485,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;
}
}
@ -500,11 +499,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){
@ -535,15 +534,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
@ -565,7 +563,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 ){
@ -585,7 +583,7 @@
//append to page and enhance
to
.attr( "data-url", fileUrl )
.attr( "data-" + $.mobile.ns + "url", fileUrl )
.appendTo( $.mobile.pageContainer );
enhancePage();
@ -619,7 +617,7 @@
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" ) ),
@ -655,7 +653,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
@ -688,14 +686,14 @@
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(), "") == "#" ){
@ -725,14 +723,14 @@
}
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 ){

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

@ -32,7 +32,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 +41,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( $.mobile.ns + "role" ) );
});
$elem.find( "[data-role='nojs']" ).addClass( "ui-nojs" );
$elem.find( "[data-" + $.mobile.ns + "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 +76,10 @@ $.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 );
$( "<a href='#' class='ui-btn-left' data-" + $.mobile.ns + "rel='back' data-" + $.mobile.ns + "icon='arrow-l'>"+ o.backBtnText +"</a>" ).prependTo( $this );
}
//page title
@ -120,14 +120,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 +152,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 +194,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>

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>

9
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;
}

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>

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>

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

@ -12,14 +12,17 @@
module(libName, {
teardown: function(){
$.each(events, function(i, name){
$("#qunit-fixture").unbind(name);
});
$($.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){
@ -253,13 +266,14 @@
$($.event.special.swipe).trigger("touchend");
}, opts.timeout);
stop();
setTimeout(function(){
same(swipe, opts.expected, "swipe expected");
//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 +292,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 +307,7 @@
$.Event.prototype.preventDefault = function(){
ok(true, "prevent default called");
start();
};
mockAbs(11);
@ -296,18 +316,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>

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>

54
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 $("[data-"+ $.mobile.ns +"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,14 +160,13 @@
});
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(){
$.mobile.loadingMessage = false;
$.mobile.pageLoading(false);
@ -166,7 +182,7 @@
$.mobile.pageLoading(true);
setTimeout(function(){
ok(!$(".ui-loader").length);
same($(".ui-loading").length, 0, "page should not be in the loading state");
start();
}, 500);
});
@ -176,14 +192,13 @@
$.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(){
@ -193,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>

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

@ -2,21 +2,28 @@
* mobile listview unit tests
*/
// TODO splite out into seperate test files
// TODO split out into seperate test files
(function($){
module('Basic Linked list');
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();
$.testHelper.openPage("#basic-linked-test");
setTimeout(function(){
$('#basic-linked-test li').first().click();
}, 500);
setTimeout(function() {
ok($('#basic-link-results').hasClass('ui-page-active'));
start();
@ -24,6 +31,8 @@
});
asyncTest( "Slides back to main page when back button is clicked", function() {
$.testHelper.openPage("#basic-linked-results");
$('#basic-link-results a:contains("Back")').click();
setTimeout(function() {
ok($('#basic-linked-test').hasClass('ui-page-active'));
@ -38,8 +47,8 @@
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($('body > [data-'+ $.mobile.ns +'url="nested-list-test&ui-page=More-animals-0"]').length == 1, "Adds first UL to the page");
ok($('body > [data-'+ $.mobile.ns +'url="nested-list-test&ui-page=Groups-of-animals-1"]').length == 1, "Adds second nested UL to the page");
start();
}, 1000);
});
@ -47,7 +56,7 @@
asyncTest( "change to nested page when the li is clicked", function() {
$('.ui-page-active li:eq(1)').click();
setTimeout(function() {
var $new_page = $('body > [data-url="nested-list-test&ui-page=More-animals-0"]');
var $new_page = $('body > [data-'+ $.mobile.ns +'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 +65,7 @@
});
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();
$('body > [data-'+ $.mobile.ns +'url="nested-list-test&ui-page=More-animals-0"]').find('a:contains("Back")').click();
setTimeout(function() {
ok($('#nested-list-test').hasClass('ui-page-active'), 'Transitions back to the parent nested page');
start();
@ -120,7 +129,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 +141,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)').click();
}, 500);
setTimeout(function() {
ok($('#split-list-link1').hasClass('ui-page-active'));
start();
@ -139,29 +154,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:contains("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,36 +197,37 @@
}, 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);
});
@ -217,53 +241,59 @@
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)[style^="display: none;"]').length, 2);
same($page.find('li:jqmData(role=list-divider)[style^="display: none;"] + li:not(:jqmData(role=list-divider))[style^="display: none;"]').length, 2);
same($page.find('li:jqmData(role=list-divider):not([style^="display: none;"]) + li:not(:jqmData(role=list-divider)):not([style^="display: none;"])').length, 2);
start();
}, 1000);
});

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>

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 > [data-"+ $.mobile.ns +"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);

15
tests/unit/select/index.html
View file

@ -6,6 +6,7 @@
<title>jQuery Mobile Select Events 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,8 +26,8 @@
<ol id="qunit-tests">
</ol>
<div id="foo" data-role="page">
<div data-role="fieldcontain" id="select-choice-few-container">
<div id="foo" data-nstest-role="page">
<div data-nstest-role="fieldcontain" id="select-choice-few-container">
<select name="select-choice-few" id="select-choice-few">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
@ -35,8 +36,8 @@
</select>
</div>
<div data-role="fieldcontain" id="select-choice-native-container">
<select name="select-choice-native" id="select-choice-native" data-native-menu="true">
<div data-nstest-role="fieldcontain" id="select-choice-native-container">
<select name="select-choice-native" id="select-choice-native" data-nstest-native-menu="true">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
@ -44,7 +45,7 @@
</select>
</div>
<div data-role="fieldcontain" id="select-choice-global-native-container">
<div data-nstest-role="fieldcontain" id="select-choice-global-native-container">
<select name="select-choice-global-native" id="select-choice-global-native">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
@ -53,7 +54,7 @@
</select>
</div>
<div data-role="fieldcontain" id="select-choice-many-container">
<div data-nstest-role="fieldcontain" id="select-choice-many-container">
<label for="select-choice-many" class="select">Your state:</label>
<select name="select-choice-many" id="select-choice-many">
<option value="AL">Alabama</option>
@ -109,7 +110,7 @@
</select>
</div>
<div data-role="fieldcontain" id="select-offscreen-container">
<div data-nstest-role="fieldcontain" id="select-offscreen-container">
<style>
/* keep the select small and close to the screen border to test rendering */
#select-offscreen-container {

27
tests/unit/slider/index.html
View file

@ -6,6 +6,7 @@
<title>jQuery Mobile Slider Events 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,30 +25,30 @@
<ol id="qunit-tests">
</ol>
<div id="foo" data-role="page">
<div data-role="fieldcontain">
<input type="range" name="slider-1" id="range-slider-up" value="0" min="0" max="100" data-theme="b" data-track-theme="a" />
<div id="foo" data-nstest-role="page">
<div data-nstest-role="fieldcontain">
<input type="range" name="slider-1" id="range-slider-up" value="0" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
</div>
<div data-role="fieldcontain">
<input type="range" name="slider-1" id="range-slider-down" value="10" min="0" max="100" data-theme="b" data-track-theme="a" />
<div data-nstest-role="fieldcontain">
<input type="range" name="slider-1" id="range-slider-down" value="10" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
</div>
<div data-role="fieldcontain">
<input type="range" name="slider-1" id="range-slider-home" value="75" min="0" max="100" data-theme="b" data-track-theme="a" />
<div data-nstest-role="fieldcontain">
<input type="range" name="slider-1" id="range-slider-home" value="75" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
</div>
<div data-role="fieldcontain">
<div data-nstest-role="fieldcontain">
<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="range-slider-end" value="15" min="0" max="100" data-theme="b" data-track-theme="a" />
<input type="range" name="slider-1" id="range-slider-end" value="15" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" />
</div>
<div data-role="fieldcontain">
<input type="range" name="stepped" id="stepped" value="15" min="0" max="100" step="10" data-theme="b" data-track-theme="a" />
<div data-nstest-role="fieldcontain">
<input type="range" name="stepped" id="stepped" value="15" min="0" max="100" step="10" data-nstest-theme="b" data-nstest-track-theme="a" />
</div>
<div data-role="fieldcontain">
<select name="slider" id="slider-switch" data-role="slider">
<div data-nstest-role="fieldcontain">
<select name="slider" id="slider-switch" data-nstest-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>

3
tests/unit/widget/index.html
View file

@ -6,8 +6,7 @@
<title>jQuery Mobile Widget Test Suite</title>
<script type="text/javascript" src="../../../js/jquery.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/"></script>
<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
<script type="text/javascript" src="../../../external/qunit.js"></script>

47
tests/unit/widget/widget_core.js
View file

@ -1,32 +1,33 @@
/*
* mobile widget unit tests
*/
(function($){
module('jquery.mobile.widget.js');
module('jquery.mobile.widget.js');
test( "getting data from creation options", function(){
var expected = "bizzle";
test( "getting data from creation options", function(){
var expected = "bizzle";
$.mobile.widget.prototype.options = { "fooBar" : true };
$.mobile.widget.prototype.element = $("<div data-foo-bar=" + expected + ">");
same($.mobile.widget.prototype._getCreateOptions()["fooBar"],
expected);
});
$.mobile.widget.prototype.options = { "fooBar" : true };
$.mobile.widget.prototype.element = $("<div data-foo-bar=" + expected + ">");
same($.mobile.widget.prototype._getCreateOptions()["fooBar"],
expected);
});
test( "getting no data when the options are empty", function(){
var expected = {};
test( "getting no data when the options are empty", function(){
var expected = {};
$.mobile.widget.prototype.options = {};
$.mobile.widget.prototype.element = $("<div data-foo-bar=" + expected + ">");
same($.mobile.widget.prototype._getCreateOptions(),
expected);
});
$.mobile.widget.prototype.options = {};
$.mobile.widget.prototype.element = $("<div data-foo-bar=" + expected + ">");
same($.mobile.widget.prototype._getCreateOptions(),
expected);
});
test( "getting no data when the element has none", function(){
var expected = {};
test( "getting no data when the element has none", function(){
var expected = {};
$.mobile.widget.prototype.options = { "fooBar" : true };
$.mobile.widget.prototype.element = $("<div>");
same($.mobile.widget.prototype._getCreateOptions(),
expected);
});
$.mobile.widget.prototype.options = { "fooBar" : true };
$.mobile.widget.prototype.element = $("<div>");
same($.mobile.widget.prototype._getCreateOptions(),
expected);
});
})(jQuery);