mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
updated docs with jq namespace, found some more stragglers
This commit is contained in:
scottjehl
parent
237db243dd
commit
9e91fa6752
59 changed files with 343 additions and 225 deletions
|
|
@ -26,7 +26,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-jq-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>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,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-jq-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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -150,7 +150,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-jq-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-jq-role="header" data-jq-theme="a" class="ui-bar" data-jq-backbtn="false">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div><!-- /header -->
|
||||
|
||||
<div data-jq-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 — 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-jq-role="controlgroup"</code> attribute — 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>
|
||||
<div data-jq-role="controlgroup">
|
||||
<a href="index.html" data-jq-role="button">Yes</a>
|
||||
|
|
|
|||
|
|
@ -24,10 +24,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-jq-icon</code> attribute on the anchor specifying the icon to display. For example, the following markup:</p>
|
||||
|
||||
<code>
|
||||
<a href="index.html" data-jq-role="button" <strong>data-icon="delete"</strong>>Delete</a>
|
||||
<a href="index.html" data-jq-role="button" <strong> data-jq-icon="delete"</strong>>Delete</a>
|
||||
</code>
|
||||
|
||||
<p>Creates this button with an icon:</p>
|
||||
|
|
@ -35,7 +35,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-jq-icon</code> attributes can be referenced to create the icons shown below:</p>
|
||||
|
||||
<p><strong>Left arrow</strong> - data-jq-icon="arrow-l"</p>
|
||||
<a href="index.html" data-jq-role="button" data-jq-icon="arrow-l">My button</a>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
<p>By default, all icons in buttons are placed to the left of the button text. </p>
|
||||
<a href="index.html" data-jq-role="button" data-jq-icon="delete" data-jq-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-jq-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:</p>
|
||||
|
||||
<code>
|
||||
<a href="index.html" data-jq-role="button" data-jq-icon="delete"<strong> data-jq-iconpos="right"</strong>>Delete</a>
|
||||
|
|
@ -88,13 +88,13 @@
|
|||
<p>Creates this button with right-aligned icon:</p>
|
||||
<a href="index.html" data-jq-role="button" data-jq-icon="delete" data-jq-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-jq-iconpos="top"</code></p>
|
||||
<a href="index.html" data-jq-role="button" data-jq-icon="delete" data-jq-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-jq-iconpos="bottom"</code></p>
|
||||
<a href="index.html" data-jq-role="button" data-jq-icon="delete" data-jq-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-jq-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-jq-iconpos="right"</code> on the previous example with <code> data-jq-iconpos="notext"</code>:</p>
|
||||
|
||||
<code>
|
||||
<a href="index.html" data-jq-role="button" data-jq-icon="delete"<strong> data-jq-iconpos="notext"</strong>>Delete</a>
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
<a href="index.html" data-jq-role="button" data-jq-icon="delete" data-jq-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-jq-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-jq-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>
|
||||
|
|
|
|||
|
|
@ -25,12 +25,12 @@
|
|||
<a href="index.html" data-jq-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-jq-inline="true"</code> attribute to the button:</p>
|
||||
|
||||
|
||||
<a href="index.html" data-jq-role="button" data-jq-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-jq-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>
|
||||
<div data-jq-inline="true">
|
||||
|
|
|
|||
|
|
@ -31,13 +31,13 @@
|
|||
<div data-jq-role="content" data-jq-theme="e"><h4>E swatch</h4><a href="index.html" data-jq-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-jq-theme</code> attribute on the button markup and specifying a swatch letter. </p>
|
||||
|
||||
<pre><code>
|
||||
<a href="index.html" data-jq-role="button" data-jq-theme="a">Theme a</a>
|
||||
</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-jq-theme</code> attribute.</p>
|
||||
|
||||
<a href="index.html" data-jq-role="button" data-jq-theme="a" data-jq-icon="arrow-l" data-jq-inline="true">Theme a</a>
|
||||
<a href="index.html" data-jq-role="button" data-jq-theme="b" data-jq-icon="arrow-l" data-jq-inline="true">Theme b</a>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,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-jq-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>
|
||||
<a href="index.html" data-jq-role="button">Link button</a>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<a href="index.html" data-jq-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 — 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 — there is no need to add the <code> data-jq-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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<div data-jq-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-jq-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>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,16 +22,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-jq-role="content"</code> attribute) should be themed by adding the <code> data-jq-theme</code> attribute to the <code> data-jq-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-jq-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>
|
||||
<div data-jq-role="page" <strong>data-theme="a"</strong>>
|
||||
<div data-jq-role="page" <strong> data-jq-theme="a"</strong>>
|
||||
</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-jq-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>
|
||||
<div data-jq-role="collapsible" data-jq-collapsed="true" <strong>data-theme="a"></strong>
|
||||
<div data-jq-role="collapsible" data-jq-collapsed="true" <strong> data-jq-theme="a"></strong>
|
||||
</code>
|
||||
<h2>Themed examples</h2>
|
||||
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<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-jq-role="collapsible" data-jq-collapsed="true" data-jq-theme="a">
|
||||
<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>
|
||||
<p>I have <code> data-jq-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,7 +51,7 @@
|
|||
<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-jq-role="collapsible" data-jq-collapsed="true" data-jq-theme="b">
|
||||
<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>
|
||||
<p>I have <code> data-jq-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,7 +61,7 @@
|
|||
<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-jq-role="collapsible" data-jq-collapsed="true" data-jq-theme="c">
|
||||
<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>
|
||||
<p>I have <code> data-jq-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,7 +71,7 @@
|
|||
<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-jq-role="collapsible" data-jq-collapsed="true" data-jq-theme="d">
|
||||
<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>
|
||||
<p>I have <code> data-jq-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,7 +81,7 @@
|
|||
<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-jq-role="collapsible" data-jq-collapsed="true" data-jq-theme="e">
|
||||
<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>
|
||||
<p>I have <code> data-jq-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 -->
|
||||
|
||||
|
|
|
|||
|
|
@ -40,10 +40,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-jq-role="none"</code>. For example:</p>
|
||||
<pre><code>
|
||||
<label for="foo">
|
||||
<select name="foo" id="foo" <strong>data-role="none"</strong>>
|
||||
<select name="foo" id="foo" <strong> data-jq-role="none"</strong>>
|
||||
<option value="a" >A</option>
|
||||
<option value="b" >B</option>
|
||||
<option value="c" >C</option>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</code></pre>
|
||||
|
||||
|
||||
<p>Or, if you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's <code>keepNative</code> option (which defaults to <code>"[data-role="none"]</code>. Be sure to configure this option inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
|
||||
<p>Or, if you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's <code>keepNative</code> option (which defaults to <code>"[ data-jq-role="none"]</code>. Be sure to configure this option inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
|
||||
<pre><code>
|
||||
$(document).bind('mobileinit',function(){
|
||||
<strong>$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";</strong>
|
||||
|
|
@ -68,7 +68,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-jq-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>
|
||||
<div data-jq-role="fieldcontain">
|
||||
|
|
|
|||
|
|
@ -29,9 +29,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-jq-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-jq-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>
|
||||
|
|
@ -54,7 +54,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-jq-role="controlgroup"</code> attribute on the fie.</p>
|
||||
|
||||
<div data-jq-role="fieldcontain">
|
||||
<fieldset data-jq-role="controlgroup">
|
||||
|
|
|
|||
|
|
@ -33,7 +33,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-jq-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>
|
||||
<div data-jq-role="fieldcontain">
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
</div>
|
||||
</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-jq-role="controlgroup"</code> attribute on the fie.</p>
|
||||
|
||||
<div data-jq-role="fieldcontain">
|
||||
<fieldset data-jq-role="controlgroup">
|
||||
|
|
|
|||
|
|
@ -24,7 +24,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-jq-role="fieldcontain"</code> attribute to group them.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-jq-role="fieldcontain">
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<p>The select menus are driven off native <code>select</code> elements, but the native selects are hidden from view and replaced with more style-friendly markup. The replacement buttons and menus are ARIA-enabled and are keyboard accessible on the desktop as well. </p>
|
||||
<p>When clicked, if the menu has room it will appear as an overlay listbox, but if there are too many options to fit in the window without scrolling, the page content is wrapped in a div and hidden, and the menu is appended as a whole new page. This lets us take advantage of native scrolling while the menu is in use. </p>
|
||||
|
||||
<p>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-jq-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>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,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-jq-role="fieldcontain"</code> attribute to group them.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-jq-role="fieldcontain">
|
||||
|
|
|
|||
|
|
@ -23,7 +23,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-jq-role="fieldcontain"</code> attribute to group them.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-jq-role="fieldcontain">
|
||||
|
|
|
|||
|
|
@ -26,7 +26,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-jq-role="fieldcontain"</code> attribute to group them.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-jq-role="fieldcontain">
|
||||
|
|
@ -44,7 +44,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-jq-role="fieldcontain"</code> attribute to group them.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-jq-role="fieldcontain">
|
||||
|
|
@ -86,7 +86,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-jq-role="fieldcontain"</code> attribute to group them.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-jq-role="fieldcontain">
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@
|
|||
<div data-jq-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-jq-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-jq-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>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<div data-jq-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-jq-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>
|
||||
<ul data-jq-role="listview" data-jq-theme="g">
|
||||
|
|
@ -34,7 +34,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-jq-theme</code> attribute on each list inside.</p>
|
||||
<a href="lists-nested.html" data-jq-role="button" data-jq-icon="arrow-r" data-jq-iconpos="right">Nested list example</a>
|
||||
|
||||
<h2>Numbered lists</h2>
|
||||
|
|
@ -55,7 +55,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-jq-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-jq-dividertheme</code> attribute to the list element (ul or ol) and specifying a theme swatch letter.</p>
|
||||
|
||||
<a href="lists-divider.html" data-jq-role="button" data-jq-icon="arrow-r" data-jq-iconpos="right">List divider example</a>
|
||||
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
<a href="lists-icons.html" data-jq-role="button" data-jq-icon="arrow-r" data-jq-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-jq-inset="true"</code> attribute to the list (ul or ol), applies the inset appearance.</p>
|
||||
|
||||
<a href="lists-inset.html" data-jq-role="button" data-jq-icon="arrow-r" data-jq-iconpos="right">Inset list example</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,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 "a" swatch applied. </p>
|
||||
<p>The list item color scheme can be changed to any button color theme swatch by adding the <code> data-jq-theme</code> attribute to the list, and setting the letter theme swatch. Here is the same list above with the "a" swatch applied. </p>
|
||||
|
||||
<code>
|
||||
<ul data-jq-role="listview" data-jq-inset="true" data-jq-theme="d">
|
||||
|
|
@ -47,7 +47,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-jq-theme attributes also work at the LI-level, for styling a single item.</p>
|
||||
|
||||
<ul data-jq-role="listview" data-jq-inset="true" data-jq-theme="d">
|
||||
<li data-jq-role="list-divider">Divider</li>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
|
||||
<h2>Theming dividers</h2>
|
||||
|
||||
<p>The theme for <strong>list dividers</strong> can be set by adding the <code>data-dividertheme</code> to the list and specifying a swatch letter. Here is an example of the same list above with swatch "d" set on the dividers.</p>
|
||||
<p>The theme for <strong>list dividers</strong> can be set by adding the <code>data-jq-dividertheme</code> to the list and specifying a swatch letter. Here is an example of the same list above with swatch "d" set on the dividers.</p>
|
||||
|
||||
<code>
|
||||
<ul data-jq-role="listview" data-jq-inset="true" data-jq-theme="d" data-jq-dividertheme="c">
|
||||
|
|
@ -89,7 +89,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 "false".</p>
|
||||
<p>The default icon for each list item is <code>arrow-r</code>. To override this, set the <code> data-jq-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-jq-icon</code> attribute to "false".</p>
|
||||
<pre>
|
||||
<code>
|
||||
<li data-jq-icon="info"><a href="#">Notices</a></li>
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
<code>
|
||||
<ul data-jq-role="listview" data-jq-inset="true" data-jq-splittheme="a">
|
||||
</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-jq-theme</code> attribute to specific links (see second list item).</p>
|
||||
<ul data-jq-role="listview" data-jq-inset="true" data-jq-splittheme="a">
|
||||
<li>
|
||||
<img src="images/album-bb.jpg" />
|
||||
|
|
@ -142,7 +142,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-jq-icon</code> attribute to specific links (see second list item).</p>
|
||||
|
||||
<code>
|
||||
<ul data-jq-role="listview" data-jq-inset="true" data-jq-splittheme="a" data-jq-spliticon="plus">
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<div data-jq-role="content" data-jq-theme="e">
|
||||
<h1>I'm colorful</h1>
|
||||
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
|
||||
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-jq-rel="dialog"</code> attribute.</p>
|
||||
<a href="docs-dialogs.html" data-jq-role="button" data-jq-rel="back" data-jq-theme="a">Good for you</a>
|
||||
<a href="docs-dialogs.html" data-jq-role="button" data-jq-rel="back" data-jq-theme="c">Don't care, really</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<div data-jq-role="content" data-jq-theme="c">
|
||||
<h1>Delete page?</h1>
|
||||
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
|
||||
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-jq-rel="dialog"</code> attribute.</p>
|
||||
<a href="docs-dialogs.html" data-jq-role="button" data-jq-rel="back" data-jq-theme="b">Sounds good</a>
|
||||
<a href="docs-dialogs.html" data-jq-role="button" data-jq-rel="back" data-jq-theme="c">Cancel</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<div data-jq-role="content" class="ui-body">
|
||||
<h2>Creating dialogs</h2>
|
||||
<p>Any page can be presented as a modal dialog by adding the <code>data-rel="dialog"</code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.</p>
|
||||
<p>Any page can be presented as a modal dialog by adding the <code>data-jq-rel="dialog"</code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.</p>
|
||||
|
||||
<p>
|
||||
<code>
|
||||
|
|
@ -32,22 +32,22 @@
|
|||
|
||||
|
||||
<h2>Transitions</h2>
|
||||
<p>By default, the dialog will open with a 'pop' transition. Like all pages, you can specify any page transition you want on the dialog by adding the <code>data-transition</code> attribute to the link. To make it feel more dialog-like, we recommend specifying a transition of "pop", "slideup" or "flip".</p>
|
||||
<p>By default, the dialog will open with a 'pop' transition. Like all pages, you can specify any page transition you want on the dialog by adding the <code>data-jq-transition</code> attribute to the link. To make it feel more dialog-like, we recommend specifying a transition of "pop", "slideup" or "flip".</p>
|
||||
|
||||
<code>
|
||||
<a href="foo.html" data-jq-rel="dialog" data-jq-transition="pop">Open dialog</a>
|
||||
</code>
|
||||
|
||||
<div>
|
||||
<a href="dialog.html" data-jq-role="button" data-jq-inline="true" data-jq-rel="dialog" data-jq-transition="pop">data-transition="pop"</a>
|
||||
<a href="dialog.html" data-jq-role="button" data-jq-inline="true" data-jq-rel="dialog" data-jq-transition="slidedown">data-transition="slidedown"</a>
|
||||
<a href="dialog.html" data-jq-role="button" data-jq-inline="true" data-jq-rel="dialog" data-jq-transition="flip">data-transition="flip"</a>
|
||||
<a href="dialog.html" data-jq-role="button" data-jq-inline="true" data-jq-rel="dialog" data-jq-transition="pop">data-jq-transition="pop"</a>
|
||||
<a href="dialog.html" data-jq-role="button" data-jq-inline="true" data-jq-rel="dialog" data-jq-transition="slidedown">data-jq-transition="slidedown"</a>
|
||||
<a href="dialog.html" data-jq-role="button" data-jq-inline="true" data-jq-rel="dialog" data-jq-transition="flip">data-jq-transition="flip"</a>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Closing dialogs</h2>
|
||||
<p>When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the <code>data-rel="back"</code> attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.</p>
|
||||
<p>For JavaScript-generated links, you can simply set the href attribute to "#" and use the <code>data-rel="back"</code> attribute. You can also call the dialog's <code>close()</code> method to programmatically close dialogs, for example: <code>$('.ui-dialog').dialog('close')</code>. </p>
|
||||
<p>When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the <code>data-jq-rel="back"</code> attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.</p>
|
||||
<p>For JavaScript-generated links, you can simply set the href attribute to "#" and use the <code>data-jq-rel="back"</code> attribute. You can also call the dialog's <code>close()</code> method to programmatically close dialogs, for example: <code>$('.ui-dialog').dialog('close')</code>. </p>
|
||||
|
||||
<h2>History & Back button behavior</h2>
|
||||
<p>Since dialogs are typically used to support actions within a page, the framework does not include dialogs in the hash state history tracking. This means that dialogs will not appear in your browsing history chronology when the Back button is clicked. For example, if you are on a page, click a link to open a dialog, close the dialog, then navigate to another page, if you were to click the browser's Back button at that point you will navigate back to the first page, not the dialog.</p>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,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-jq-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>
|
||||
|
||||
|
|
@ -43,16 +43,16 @@
|
|||
|
||||
<pre>
|
||||
<div class="highlight">
|
||||
<code><span class="nt"><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">></span>
|
||||
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">></span>
|
||||
<code><span class="nt"><div</span> <span class="na"> data-jq-role=</span><span class="s">"page"</span> <span class="na">id=</span><span class="s">"foo"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na"> data-jq-role=</span><span class="s">"content"</span><span class="nt">></span>
|
||||
I'm the "foo" page. Since I'm the first page
|
||||
in the source order, I will be displayed onLoad.
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#bar"</span><span class="nt">></span>Visit the bar "page"<span class="nt"></a></span>
|
||||
<span class="nt"></div><!-- /content --></span>
|
||||
<span class="nt"></div><!-- /foo page --></span>
|
||||
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na"> data-jq-role=</span><span class="s">"page"</span> <span class="na">id=</span><span class="s">"bar"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na"> data-jq-role=</span><span class="s">"content"</span><span class="nt">></span>
|
||||
I'm the "bar" page. I will be shown only if the
|
||||
anchor link on the <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#foo"</span><span class="nt">></span>foo<span class="nt"></a></span>
|
||||
page is clicked.
|
||||
|
|
|
|||
|
|
@ -21,7 +21,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-jq-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>
|
||||
|
||||
|
|
|
|||
|
|
@ -44,10 +44,10 @@
|
|||
</html>
|
||||
</code></pre>
|
||||
|
||||
<p>Inside the <code><body></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><body></code> tag, each view or "page" on the mobile device is identified with an element (usually a <code>div</code>) with the <code> data-jq-role="page"</code> attribute:</p>
|
||||
|
||||
<div class="highlight">
|
||||
<pre><span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">></span>
|
||||
<pre><span class="nt"><div</span> <span class="na"> data-jq-role=</span><span class="s">"page"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span>
|
||||
</pre>
|
||||
|
|
@ -56,10 +56,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-jq-roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>.</p>
|
||||
|
||||
<div class="highlight">
|
||||
<pre><span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<pre><span class="nt"><div</span> <span class="na"> data-jq-role=</span><span class="s">"page"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na"> data-jq-role=</span><span class="s">"header"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na"> data-jq-role=</span><span class="s">"content"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na"> data-jq-role=</span><span class="s">"footer"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
</pre>
|
||||
</div>
|
||||
|
|
@ -113,7 +113,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-jq-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>
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
|
||||
|
||||
<h2>Back linking</h2>
|
||||
<p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, <strong>be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers</strong>. Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute instead.</p>
|
||||
<p>If you use the attribute <code>data-jq-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, <strong>be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers</strong>. Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the <code>data-jq-direction="reverse"</code> attribute instead.</p>
|
||||
|
||||
<h2>Redirects and linking to directories</h2>
|
||||
<p>When linking to directory indexes (such as href="typesofcats/" instead of href="typesofcats/index.html"), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced.</p>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
<p>The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.</p>
|
||||
|
||||
<p>To set a custom transition effect, add the <code>data-transition</code> attribute to the link. Possible values include: </p>
|
||||
<p>To set a custom transition effect, add the <code>data-jq-transition</code> attribute to the link. Possible values include: </p>
|
||||
|
||||
<code><code>
|
||||
<a href="index.html" data-jq-transition="pop">I'll pop</a>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
<a href="transition-success.html" data-jq-role="button" data-jq-rel="dialog" data-jq-transition="flip">flip</a>
|
||||
</p>
|
||||
|
||||
<p>In addition, you can also force a "backwards" transition by specifying <code>data-direction="reverse"</code> on your link. Note: (this was formerly <code>data-back="true"</code>, which will remain supported until 1.0)</p>
|
||||
<p>In addition, you can also force a "backwards" transition by specifying <code>data-jq-direction="reverse"</code> on your link. Note: (this was formerly <code>data-jq-back="true"</code>, which will remain supported until 1.0)</p>
|
||||
|
||||
<div class="ui-body ui-body-e">
|
||||
<p><strong>Transitions from <a href="http://www.jqtouch.com/">jQtouch</a></strong> (<em>with small modifications</em>): Built by David Kaneda and maintained by Jonathan Stark.</p>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,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-jq-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-jq-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-jq-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>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</div><!-- /header -->
|
||||
|
||||
<div data-jq-role="content">
|
||||
<p>That was an animated page transition effect that we added with a <code>data-transition</code> attribute on the link.</p>
|
||||
<p>That was an animated page transition effect that we added with a <code>data-jq-transition</code> attribute on the link.</p>
|
||||
<p>Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.</p>
|
||||
<p>What do you think?</p>
|
||||
<a href="docs-transitions.html" data-jq-role="button" data-jq-theme="b" data-jq-rel="back">I like it</a>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,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 — 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-jq-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>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,11 +24,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-jq-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"><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">></span>
|
||||
<span class="nt"><div</span> <span class="na"> data-jq-role=</span><span class="s">"header"</span> <span class="na"> data-jq-theme=</span><span class="s">"b"</span><span class="nt">></span>
|
||||
<span class="nt"><h1></span>Page Title<span class="nt"></h1></span>
|
||||
<span class="nt"></div></span>
|
||||
</pre>
|
||||
|
|
@ -37,11 +37,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-jq-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-jq-theme</code> attribute to "b" (blue in our default theme) on the Save button's anchor.</p>
|
||||
|
||||
<div class="highlight">
|
||||
<pre>
|
||||
<span class="nt"><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">></span>Save<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"add-user.php"</span> <span class="na"> data-jq-theme=</span><span class="s">"b"</span><span class="nt">></span>Save<span class="nt"></a></span>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
<div class="highlight">
|
||||
<pre>
|
||||
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na"> data-jq-role=</span><span class="s">"header"</span><span class="nt">></span>
|
||||
<span class="nt"><h1></span>Page Title<span class="nt"></h1></span>
|
||||
<span class="nt"></div></span>
|
||||
</pre>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<h1>Page title</h1>
|
||||
</div>
|
||||
|
||||
<p><strong>See that "back" button?</strong> The framework automatically generates a "back" button on every page, to simplify the process of including this common navigation element. To prevent the back button from being added to a header, either add your own button to the left slot (see below) or, add this attribute: <code>data-backbtn="false"</code> to the header container.
|
||||
<p><strong>See that "back" button?</strong> The framework automatically generates a "back" button on every page, to simplify the process of including this common navigation element. To prevent the back button from being added to a header, either add your own button to the left slot (see below) or, add this attribute: <code>data-jq-backbtn="false"</code> to the header container.
|
||||
|
||||
<h2>Adding buttons</h2>
|
||||
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
|
||||
<h2>Creating custom back buttons</h2>
|
||||
<p>If you use the attribute <code>data-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, <strong>be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers</strong>. Also, pease keep in mind that if you just want a reverse transition without actually going back in history, you should use the <code>data-direction="reverse"</code> attribute instead.</p>
|
||||
<p>If you use the attribute <code>data-jq-rel="back"</code> on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, <strong>be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers</strong>. Also, pease keep in mind that if you just want a reverse transition without actually going back in history, you should use the <code>data-jq-direction="reverse"</code> attribute instead.</p>
|
||||
|
||||
<h3>Default button positioning</h3>
|
||||
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
<h1>Edit Contact</h1>
|
||||
<a href="index.html" data-jq-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 — 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 — here, we add the <code> data-jq-theme</code> attribute and set the color swatch for the button to "b" to make the "Save" button pop.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-jq-role="header" data-jq-position="inline">
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
|
||||
<p>The button position can also be controlled by adding classes to the button anchors, rather than relying on source order. This is especially useful if you only want a button in the right slot. To specify the button position, add the class of <code>ui-btn-left</code> or <code>ui-btn-right</code> to the anchor.</p>
|
||||
|
||||
<p>In this example, we're adding only a single button to the right slot so the <code>data-backbtn="false"</code> needs to be added to the header container to suppress the automatic Back button behavior and the button needs the <code>ui-btn-right</code> class on the link.</p>
|
||||
<p>In this example, we're adding only a single button to the right slot so the <code>data-jq-backbtn="false"</code> needs to be added to the header container to suppress the automatic Back button behavior and the button needs the <code>ui-btn-right</code> class on the link.</p>
|
||||
|
||||
|
||||
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
|
||||
<h2>Customizing the back button text</h2>
|
||||
|
||||
<p>If you'd like to configure the back button text, you can either use the <code>data-back-btn-text="previous"</code> attribute on your page element, or set it programmatically via the page plugin's options: <code>$.mobile.page.prototype.options.backBtnText = "previous";</code>. If you're doing this programmatically, set this option inside the mobileinit event handler.</p>
|
||||
<p>If you'd like to configure the back button text, you can either use the <code>data-jq-back-btn-text="previous"</code> attribute on your page element, or set it programmatically via the page plugin's options: <code>$.mobile.page.prototype.options.backBtnText = "previous";</code>. If you're doing this programmatically, set this option inside the mobileinit event handler.</p>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,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-jq-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>
|
||||
<div data-jq-role="footer">
|
||||
|
|
@ -124,7 +124,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-jq-icon</code> attribute specifying a <a href="../buttons/buttons-icons.html">standard mobile icon</a> to each anchor.</p>
|
||||
|
||||
<div data-jq-role="footer">
|
||||
<div data-jq-role="navbar">
|
||||
|
|
@ -136,7 +136,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-jq-iconpos="top"</code> attribute to each anchor.</p>
|
||||
|
||||
<div data-jq-role="footer">
|
||||
<div data-jq-role="navbar">
|
||||
|
|
@ -181,7 +181,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-jq-theme</code> attribute to the links and specifying any theme swatch.</p>
|
||||
|
||||
<div data-jq-role="footer">
|
||||
<div data-jq-role="navbar" data-jq-theme="e" >
|
||||
|
|
|
|||
|
|
@ -24,7 +24,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-jq-role=page]").live("pageshow", function(event) {
|
||||
var $page = $(this);
|
||||
$page.find("[data-scroll]:not(.ui-scrollview-clip)").each(function(){
|
||||
var $this = $(this);
|
||||
|
|
|
|||
|
|
@ -5,18 +5,18 @@
|
|||
var themesDir = 'http://jquerymobile.com/test/themes/',
|
||||
themes = ['default','valencia'],
|
||||
currentPage = $.mobile.activePage,
|
||||
menuPage = $( '<div data-jq-'+ $.mobile.ns +'url="themeswitcher" data-jq-'+ $.mobile.ns +'role=\'dialog\' data-jq-'+ $.mobile.ns +'theme=\'a\'>' +
|
||||
'<div data-jq-'+ $.mobile.ns +'role=\'header\' data-jq-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-jq-'+ $.mobile.ns +'role=\'content\' data-jq-'+ $.mobile.ns +'theme=\'c\'><ul data-jq-'+ $.mobile.ns +'role=\'listview\' data-jq-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-jq-'+ $.mobile.ns +'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;
|
||||
|
|
|
|||
2
external/qunit.css
vendored
2
external/qunit.css
vendored
|
|
@ -195,7 +195,7 @@
|
|||
left: -10000px;
|
||||
}
|
||||
|
||||
[data-role='page'], [data-role='dialog'] {
|
||||
[ data-jq-role='page'], [ data-jq-role='dialog'] {
|
||||
position: absolute !important;
|
||||
top: -10000px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
//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-jq-rel, or pages with a data-jq-role, that match these selectors will be untrackable in history
|
||||
//(no change in URL, not bookmarkable)
|
||||
nonHistorySelectors: "dialog",
|
||||
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@ $.widget( "mobile.dialog", $.mobile.widget, {
|
|||
|
||||
/* bind events
|
||||
- clicks and submits should use the closing transition that the dialog opened with
|
||||
unless a data-transition is specified on the link/form
|
||||
- if the click was on the close button, or the link has a data-rel="back" it'll go back in history naturally
|
||||
unless a data-jq-transition is specified on the link/form
|
||||
- if the click was on the close button, or the link has a data-jq-rel="back" it'll go back in history naturally
|
||||
*/
|
||||
this.element
|
||||
.bind( "click submit", function(e){
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
|
|||
//button theme
|
||||
theme = /ui-btn-up-([a-z])/.exec( button.attr("class") )[1],
|
||||
|
||||
menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' data-theme='"+ o.menuPageTheme +"'>" +
|
||||
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>"+
|
||||
|
|
|
|||
|
|
@ -308,20 +308,16 @@ $.widget( "mobile.listview", $.mobile.widget, {
|
|||
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>" )
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@
|
|||
//define first selector to receive focus when a page is shown
|
||||
focusable = "[tabindex],a,button:visible,select:visible,input",
|
||||
|
||||
//contains role for next page, if defined on clicked link via data-rel
|
||||
//contains role for next page, if defined on clicked link via data-jq-rel
|
||||
nextPageRole = null,
|
||||
|
||||
//queue to hold simultanious page transitions
|
||||
|
|
@ -651,7 +651,7 @@
|
|||
//if data-ajax attr is set to false, use the default behavior of a link
|
||||
hasAjaxDisabled = $this.is( "[data-" + $.mobile.ns + "ajax='false']" );
|
||||
|
||||
//if there's a data-rel=back attr, go back in history
|
||||
//if there's a data-jq-rel=back attr, go back in history
|
||||
if( $this.is( "[data-" + $.mobile.ns + "rel='back']" ) ){
|
||||
window.history.back();
|
||||
return false;
|
||||
|
|
@ -690,7 +690,7 @@
|
|||
// deprecated - remove by 1.0
|
||||
$this.data( "back" );
|
||||
|
||||
//this may need to be more specific as we use data-rel more
|
||||
//this may need to be more specific as we use data-jq-rel more
|
||||
nextPageRole = $this.attr( "data-" + $.mobile.ns + "rel" );
|
||||
|
||||
//if it's a relative href, prefix href with base url
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ $.widget( "mobile.page", $.mobile.widget, {
|
|||
//enhance form controls
|
||||
this._enhanceControls();
|
||||
|
||||
//links in bars, or those with data-role become buttons
|
||||
//links in bars, or those with data-jq-role become buttons
|
||||
$elem.find( "[data-" + $.mobile.ns + "role='button'], .ui-bar > a, .ui-header > a, .ui-footer > a" )
|
||||
.not( ".ui-btn" )
|
||||
.not(this.keepNative)
|
||||
|
|
|
|||
|
|
@ -19,15 +19,15 @@
|
|||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" data-theme="b" id="jqm-home">
|
||||
<div data-role="header">
|
||||
<div data-jq-role="page" data-jq-theme="b" id="jqm-home">
|
||||
<div data-jq-role="header">
|
||||
<h1>Event Logger</h1>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
<div data-jq-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-jq-role="listview" id="log">
|
||||
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,11 +30,11 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page">
|
||||
<div data-role="header">
|
||||
<div data-jq-role="page">
|
||||
<div data-jq-role="header">
|
||||
<h1>Basic Page</h1>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<div data-jq-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>
|
||||
|
|
|
|||
|
|
@ -9,15 +9,15 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page">
|
||||
<div data-jq-role="page">
|
||||
|
||||
<div data-role="header">
|
||||
<div data-jq-role="header">
|
||||
<h1>400 item list</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content" data-filter="true">
|
||||
<div data-jq-role="content" data-filter="true">
|
||||
|
||||
<ul data-role="listview" data-theme="d">
|
||||
<ul data-jq-role="listview" data-jq-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>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,13 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -23,5 +30,120 @@
|
|||
$.testHelper.reloadLib(libName);
|
||||
ok($.mobile.gradeA());
|
||||
});
|
||||
|
||||
test( "loading the core library triggers mobilinit on the document", function(){
|
||||
expect( 1 );
|
||||
|
||||
$(window.document).bind('mobileinit', function(event){
|
||||
ok(true);
|
||||
});
|
||||
|
||||
$.testHelper.reloadLib(libName);
|
||||
});
|
||||
|
||||
test( "enhancments are skipped when the browser is not grade A", function(){
|
||||
setGradeA(false);
|
||||
$.testHelper.reloadLib(libName);
|
||||
|
||||
//NOTE easiest way to check for enhancements, not the most obvious
|
||||
ok(!$("html").hasClass("ui-mobile"));
|
||||
});
|
||||
|
||||
test( "enhancments are added when the browser is grade A", function(){
|
||||
setGradeA(true);
|
||||
$.testHelper.reloadLib(libName);
|
||||
|
||||
ok($("html").hasClass("ui-mobile"));
|
||||
});
|
||||
|
||||
|
||||
//TODO lots of duplication
|
||||
test( "pageLoading doesn't add the dialog to the page when loading message is false", function(){
|
||||
$.testHelper.alterExtend({loadingMessage: false});
|
||||
$.testHelper.reloadLib(libName);
|
||||
$.mobile.pageLoading(false);
|
||||
ok(!$(".ui-loader").length);
|
||||
});
|
||||
|
||||
test( "pageLoading doesn't add the dialog to the page when done is passed as true", function(){
|
||||
$.testHelper.alterExtend({loadingMessage: true});
|
||||
$.testHelper.reloadLib(libName);
|
||||
|
||||
// TODO add post reload callback
|
||||
$('.ui-loader').remove();
|
||||
|
||||
$.mobile.pageLoading(true);
|
||||
ok(!$(".ui-loader").length);
|
||||
});
|
||||
|
||||
test( "pageLoading adds the dialog to the page when done is true", function(){
|
||||
$.testHelper.alterExtend({loadingMessage: true});
|
||||
$.testHelper.reloadLib(libName);
|
||||
$.mobile.pageLoading(false);
|
||||
ok($(".ui-loader").length);
|
||||
});
|
||||
|
||||
var metaViewportSelector = "head meta[name=viewport]",
|
||||
setViewPortContent = function(value){
|
||||
$(metaViewportSelector).remove();
|
||||
$.testHelper.alterExtend({metaViewportContent: value});
|
||||
$.testHelper.reloadLib(libName);
|
||||
};
|
||||
|
||||
test( "meta view port element is added to head when defined on mobile", function(){
|
||||
setViewPortContent("width=device-width");
|
||||
same($(metaViewportSelector).length, 1);
|
||||
});
|
||||
|
||||
test( "meta view port element not added to head when not defined on mobile", function(){
|
||||
setViewPortContent(false);
|
||||
same($(metaViewportSelector).length, 0);
|
||||
});
|
||||
|
||||
var findFirstPage = function() {
|
||||
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();
|
||||
$.testHelper.reloadLib(libName);
|
||||
|
||||
same($.mobile.firstPage, firstPage);
|
||||
same($.mobile.activePage, firstPage);
|
||||
});
|
||||
|
||||
test( "mobile viewport class is defined on the first page's parent", function(){
|
||||
var firstPage = findFirstPage();
|
||||
$.testHelper.reloadLib(libName);
|
||||
|
||||
ok(firstPage.parent().hasClass('ui-mobile-viewport'));
|
||||
});
|
||||
|
||||
test( "mobile page container is the first page's parent", function(){
|
||||
var firstPage = findFirstPage();
|
||||
$.testHelper.reloadLib(libName);
|
||||
|
||||
same($.mobile.pageContainer, firstPage.parent());
|
||||
});
|
||||
|
||||
test( "page loading is called on document ready", function(){
|
||||
$.testHelper.alterExtend({ pageLoading: function(){
|
||||
start();
|
||||
ok("called");
|
||||
}});
|
||||
|
||||
stop();
|
||||
$.testHelper.reloadLib(libName);
|
||||
});
|
||||
|
||||
test( "hashchange triggered on document ready with single argument: true", function(){
|
||||
$(window).bind("hashchange", function(ev, arg){
|
||||
same(arg, true);
|
||||
start();
|
||||
});
|
||||
|
||||
stop();
|
||||
$.testHelper.reloadLib(libName);
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -23,12 +23,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-jq-role="page">
|
||||
<a href="#foo-dialog" data-jq-role="button" data-jq-inline="true" data-jq-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-jq-role="dialog">
|
||||
<div data-jq-role="header" data-jq-theme="d" data-position="inline">
|
||||
<h1>Dialog</h1>
|
||||
</div>
|
||||
<a href="#" id="internal-link">foo</a>
|
||||
|
|
|
|||
|
|
@ -22,12 +22,12 @@
|
|||
</ol>
|
||||
|
||||
<!-- Basic Linked view test -->
|
||||
<div data-role="page" id='basic-linked-test'>
|
||||
<div data-role="header" data-position="inline">
|
||||
<div data-jq-role="page" id='basic-linked-test'>
|
||||
<div data-jq-role="header" data-position="inline">
|
||||
<h1>Basic List View</h1>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<ul data-role="listview">
|
||||
<div data-jq-role="content">
|
||||
<ul data-jq-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>
|
||||
|
|
@ -35,19 +35,19 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role='page' id='basic-link-results'>
|
||||
<div data-role="header" data-position="inline">
|
||||
<div data-jq-role='page' id='basic-link-results'>
|
||||
<div data-jq-role="header" data-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-jq-role="page" id='nested-list-test'>
|
||||
<div data-jq-role="header" data-position="inline">
|
||||
<h1>Basic List View</h1>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<ul data-role="listview">
|
||||
<div data-jq-role="content">
|
||||
<ul data-jq-role="listview">
|
||||
<li>Groups of animals
|
||||
<ul>
|
||||
<li>pod of whales</li>
|
||||
|
|
@ -70,12 +70,12 @@
|
|||
</div>
|
||||
|
||||
<!-- Numbered List -->
|
||||
<div data-role="page" id='numbered-list-test'>
|
||||
<div data-role="header" data-position="inline">
|
||||
<div data-jq-role="page" id='numbered-list-test'>
|
||||
<div data-jq-role="header" data-position="inline">
|
||||
<h1>Basic List View</h1>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<ol data-role="listview">
|
||||
<div data-jq-role="content">
|
||||
<ol data-jq-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>
|
||||
|
|
@ -83,19 +83,19 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role='page' id='numbered-list-results'>
|
||||
<div data-role="header" data-position="inline">
|
||||
<div data-jq-role='page' id='numbered-list-results'>
|
||||
<div data-jq-role="header" data-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-jq-role="page" id='read-only-list-test'>
|
||||
<div data-jq-role="header" data-position="inline">
|
||||
<h1>Basic List View</h1>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<ul data-role="listview">
|
||||
<div data-jq-role="content">
|
||||
<ul data-jq-role="listview">
|
||||
<li>Read</li>
|
||||
<li>Only</li>
|
||||
<li>List</li>
|
||||
|
|
@ -105,12 +105,12 @@
|
|||
</div>
|
||||
|
||||
<!-- Split listview -->
|
||||
<div data-role="page" id='split-list-test'>
|
||||
<div data-role="header" data-position="inline">
|
||||
<div data-jq-role="page" id='split-list-test'>
|
||||
<div data-jq-role="header" data-position="inline">
|
||||
<h1>Split List View</h1>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<ul data-role="listview">
|
||||
<div data-jq-role="content">
|
||||
<ul data-jq-role="listview">
|
||||
<li>
|
||||
<a href="#split-list-link1">link one</a>
|
||||
<a href="#split-list-link2">link second</a>
|
||||
|
|
@ -127,42 +127,42 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="page" id='split-list-link1'>
|
||||
<div data-role="header" data-position="inline">
|
||||
<div data-jq-role="page" id='split-list-link1'>
|
||||
<div data-jq-role="header" data-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-jq-role="page" id='split-list-link2'>
|
||||
<div data-jq-role="header" data-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-jq-role="page" id='list-divider-test'>
|
||||
<div data-jq-role="header" data-position="inline">
|
||||
<h1>List Divider Test</h1>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<ul data-role="listview">
|
||||
<div data-jq-role="content">
|
||||
<ul data-jq-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-jq-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-jq-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-jq-role="page" id='search-filter-test'>
|
||||
<div data-jq-role="header" data-position="inline">
|
||||
<h1>Split List View</h1>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<ul data-role="listview" data-filter="true">
|
||||
<div data-jq-role="content">
|
||||
<ul data-jq-role="listview" data-filter="true">
|
||||
<li>a is for aquaman</li>
|
||||
<li>b is for batman</li>
|
||||
<li>c is for catwoman</li>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" data-url="foo/" data-other="for testing">
|
||||
<div data-jq-role="page" data-url="foo/" data-other="for testing">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" data-url="foo/bar.html"></div>
|
||||
<div data-jq-role="page" data-url="foo/bar.html"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page">
|
||||
<div data-jq-role="page">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div data-url='foo/bar/reverse.html' data-role='page'></div>
|
||||
<div data-url='foo/bar/reverse.html' data-jq-role='page'></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role='page' data-url='foo/bar/single.html'></div>
|
||||
<div data-jq-role='page' data-url='foo/bar/single.html'></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -24,59 +24,59 @@
|
|||
<ol id="qunit-tests">
|
||||
</ol>
|
||||
|
||||
<div id="foo" data-role="page">
|
||||
<a href="#bar" data-transition="flip"></a>
|
||||
<div id="foo" data-jq-role="page">
|
||||
<a href="#bar" data-jq-transition="flip"></a>
|
||||
</div>
|
||||
|
||||
<div id="bar" data-role="page">
|
||||
<div id="bar" data-jq-role="page">
|
||||
<a href="#baz"></a>
|
||||
</div>
|
||||
|
||||
<div id="baz" data-role="page">
|
||||
<div id="baz" data-jq-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-jq-role="page">
|
||||
<a href="#flip-trans" data-jq-transition="fade"></a>
|
||||
</div>
|
||||
|
||||
<div id="flip-trans" data-role="page">
|
||||
<a href="#fade-trans" data-transition="flip"></a>
|
||||
<div id="flip-trans" data-jq-role="page">
|
||||
<a href="#fade-trans" data-jq-transition="flip"></a>
|
||||
</div>
|
||||
|
||||
<div id="no-trans" data-role="page">
|
||||
<div id="no-trans" data-jq-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-jq-role="page">
|
||||
<a href="#no-trans" data-jq-transition="pop"></a>
|
||||
</div>
|
||||
|
||||
<div id="default-trans" data-role="page">
|
||||
<div id="default-trans" data-jq-role="page">
|
||||
<a href="#no-trans"></a>
|
||||
</div>
|
||||
|
||||
<div id="data-url" data-role="page">
|
||||
<div id="data-url" data-jq-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-jq-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-jq-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-jq-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-jq-role="page">
|
||||
<a href="data-url-tests/reverse-attr.html"></a>
|
||||
</div>
|
||||
|
||||
<div id="ajax-diabled-form" data-role="page">
|
||||
<div id="ajax-diabled-form" data-jq-role="page">
|
||||
<form method="POST" id="non-ajax-form" action="/ajax-disabled-form" data-ajax="false">
|
||||
</form>
|
||||
|
||||
|
|
@ -87,11 +87,11 @@
|
|||
</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-jq-role="page">
|
||||
<a href="#no-trans-dialog" data-jq-rel="dialog"></a>
|
||||
</div>
|
||||
|
||||
<div id="no-trans-dialog" data-role="page">
|
||||
<div id="no-trans-dialog" data-jq-role="page">
|
||||
</div>
|
||||
|
||||
<div id="dup-history-first" data-role="page">
|
||||
|
|
|
|||
|
|
@ -23,15 +23,15 @@
|
|||
</ol>
|
||||
|
||||
<div id="qunit-fixture">
|
||||
<div data-role="page">
|
||||
<div data-role="header">
|
||||
<div data-jq-role="page">
|
||||
<div data-jq-role="header">
|
||||
<div>
|
||||
<a href="foo">foo</a>
|
||||
</div>
|
||||
<a href="foo">foo</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-jq-role="footer">
|
||||
<div>
|
||||
<a href="foo">foo</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,5 +28,5 @@ test( "unnested bar anchors are styled", function(){
|
|||
});
|
||||
|
||||
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 );
|
||||
});
|
||||
|
|
|
|||
|
|
@ -23,8 +23,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-jq-role="page">
|
||||
<div data-jq-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>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain" id="select-choice-native-container">
|
||||
<div data-jq-role="fieldcontain" id="select-choice-native-container">
|
||||
<select name="select-choice-native" id="select-choice-native" data-native-menu="true">
|
||||
<option value="standard">Standard: 7 day</option>
|
||||
<option value="rush">Rush: 3 days</option>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain" id="select-choice-global-native-container">
|
||||
<div data-jq-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>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain" id="select-choice-many-container">
|
||||
<div data-jq-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>
|
||||
|
|
|
|||
|
|
@ -23,30 +23,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-jq-role="page">
|
||||
<div data-jq-role="fieldcontain">
|
||||
<input type="range" name="slider-1" id="range-slider-up" value="0" min="0" max="100" data-jq-theme="b" data-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-jq-role="fieldcontain">
|
||||
<input type="range" name="slider-1" id="range-slider-down" value="10" min="0" max="100" data-jq-theme="b" data-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-jq-role="fieldcontain">
|
||||
<input type="range" name="slider-1" id="range-slider-home" value="75" min="0" max="100" data-jq-theme="b" data-track-theme="a" />
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<div data-jq-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-jq-theme="b" data-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-jq-role="fieldcontain">
|
||||
<input type="range" name="stepped" id="stepped" value="15" min="0" max="100" step="10" data-jq-theme="b" data-track-theme="a" />
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<select name="slider" id="slider-switch" data-role="slider">
|
||||
<div data-jq-role="fieldcontain">
|
||||
<select name="slider" id="slider-switch" data-jq-role="slider">
|
||||
<option value="off">Off</option>
|
||||
<option value="on">On</option>
|
||||
</select>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
.ui-mobile-viewport { margin: 0; overflow-x: hidden; -webkit-text-size-adjust: none; -ms-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
|
||||
|
||||
/* "page" containers - full-screen views, one should always be in view post-pageload */
|
||||
.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; }
|
||||
.ui-mobile [ data-jq-role=page], .ui-mobile [ data-jq-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; }
|
||||
.ui-mobile .ui-page-active { display: block; overflow: visible; }
|
||||
|
||||
/*orientations from js are available */
|
||||
|
|
|
|||
Loading…
Reference in a new issue