mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-30 19:04:43 +00:00
Merge remote-tracking branch 'upstream/master'
This commit is contained in:
Mat Marquis
commit
252c269bf5
29 changed files with 690 additions and 197 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB |
|
|
@ -34,7 +34,6 @@
|
|||
|
||||
<p>To make this broad support possible, all pages in jQuery Mobile are built on a foundation of <strong>clean, semantic HTML</strong> to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies <strong>progressive enhancement techniques</strong> to unobtrusively transform the semantic page into a rich, interactive experience that leverages the power of jQuery and CSS. <strong>Accessibility features</strong> such as WAI-ARIA are tightly integrated throughout the framework to provide support for screen readers and other assistive technologies.</p>
|
||||
|
||||
<img src="../_assets/images/ipad-palm.png" alt="Smartphone and tablet designs" style="max-width:100%; margin-top:20px;">
|
||||
|
||||
</div><!--/content-primary -->
|
||||
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ $.mobile.hidePageLoadingMsg();
|
|||
<dd>The port specified within the URL. Most URLs rely on the default port for the protocol used, so this may be an empty string most of the time.</dd>
|
||||
<dt><code>protocol</code></dt>
|
||||
<dd>The protocol for the URL including the trailing ':' character.</dd>
|
||||
<dt><code>search<</code>/dt>
|
||||
<dt><code>search</code></dt>
|
||||
<dd>The query component of the URL including the leading '?' character.</dd>
|
||||
</dl>
|
||||
<p>But it also contains additional properties that provide access to additional components as well as some common forms of the URL developers access:</p>
|
||||
|
|
@ -481,7 +481,9 @@ $.mobile.silentScroll(100);
|
|||
|
||||
|
||||
<dt><code>$.mobile.addResolutionBreakpoints</code> (<em>method</em>)</dt>
|
||||
<dd>Add width breakpoints to the min/max width classes that are added to the HTML element.</dd>
|
||||
<dd>
|
||||
<p class="ui-bar-e ui-body"><strong>Note: This feature is deprecated in beta, and will be removed after that. We recommend using CSS3 Media Queries instead.</strong></p>
|
||||
Add width breakpoints to the min/max width classes that are added to the HTML element.</dd>
|
||||
<dd>
|
||||
<dl>
|
||||
<dt><code>·</code> Arguments:</dt>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Button Theming</title>
|
||||
<title>jQuery Mobile Docs - Theming buttons</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../js/jquery.js"></script>
|
||||
|
|
@ -23,9 +23,9 @@
|
|||
<div data-role="content">
|
||||
<div class="content-primary">
|
||||
|
||||
<h2>Theming</h2>
|
||||
<h2>Theming buttons</h2>
|
||||
|
||||
<p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches it's parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup: </p>
|
||||
<p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches its parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup: </p>
|
||||
|
||||
<div class="ui-body ui-body-a"><h4>A swatch</h4><a href="index.html" data-role="button">Button</a></div>
|
||||
<div class="ui-body ui-body-b"><h4>B swatch</h4><a href="index.html" data-role="button">Button</a></div>
|
||||
|
|
@ -34,13 +34,13 @@
|
|||
<div class="ui-body ui-body-e"><h4>E swatch</h4><a href="index.html" data-role="button">Button</a></div>
|
||||
|
||||
<h2>Assigning theme swatches</h2>
|
||||
<p>Button can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code> data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
|
||||
<p>Buttons can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code> data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
|
||||
|
||||
<pre><code>
|
||||
<a href="index.html" data-role="button" data-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 5 buttons with icons that have a different swatch letter assigned via the <code> data-theme</code> attribute.</p>
|
||||
|
||||
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
|
||||
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
|
||||
|
|
|
|||
|
|
@ -28,19 +28,19 @@
|
|||
<p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code> data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="collapsible-set">
|
||||
<strong><div data-role="collapsible-set"></strong>
|
||||
|
||||
<div data-role="collapsible" data-collapsed="false">
|
||||
<h3>Section A</h3>
|
||||
<div data-role="collapsible" <strong>data-collapsed="false"</strong>>
|
||||
<h3>Section 1</h3>
|
||||
<p>I'm the collapsible set content for section B.</p>
|
||||
</div>
|
||||
|
||||
<div data-role="collapsible">
|
||||
<h3>Section B</h3>
|
||||
<h3>Section 2</h3>
|
||||
<p>I'm the collapsible set content for section B.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<strong></div></strong>
|
||||
</code></pre>
|
||||
|
||||
|
||||
|
|
@ -48,30 +48,75 @@
|
|||
|
||||
<div data-role="collapsible-set">
|
||||
<div data-role="collapsible" data-collapsed="false">
|
||||
<h3>Section A</h3>
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
<h3>Section 1</h3>
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the <code>data-collapsed="false"</code> attribute.</p>
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Section B</h3>
|
||||
<h3>Section 2</h3>
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Section C</h3>
|
||||
<h3>Section 3</h3>
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Section D</h3>
|
||||
<h3>Section 4</h3>
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Section E</h3>
|
||||
<h3>Section 5</h3>
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Theming collapsible content</h2>
|
||||
<p>The standard <code>data-theme</code> attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the <code>data-content-theme</code> attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.</p>
|
||||
|
||||
|
||||
<pre><code>
|
||||
<div data-role="collapsible-set" <strong>data-theme="c" data-content-theme="d"</strong>>
|
||||
</code></pre>
|
||||
|
||||
|
||||
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 1</h3>
|
||||
<p>Collapsible content</p>
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 2</h3>
|
||||
<p>Collapsible content</p>
|
||||
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 3</h3>
|
||||
<p>Collapsible content</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Theming individual sections</h2>
|
||||
<p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>
|
||||
|
||||
<div data-role="collapsible-set" data-content-theme="c">
|
||||
<div data-role="collapsible" data-theme="b" data-content-theme="b">
|
||||
<h3>Section header, swatch B</h3>
|
||||
<p>Collapsible content, swatch B</p>
|
||||
|
||||
</div>
|
||||
<div data-role="collapsible" data-theme="a" data-content-theme="a">
|
||||
<h3>Section header, swatch A</h3>
|
||||
<p>Collapsible content, swatch A</p>
|
||||
</div>
|
||||
<div data-role="collapsible" data-theme="e" data-content-theme="d">
|
||||
<h3>Section header, swatch E</h3>
|
||||
<p>Collapsible content, swatch D</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!--/content-primary -->
|
||||
|
||||
|
|
|
|||
|
|
@ -24,30 +24,34 @@
|
|||
<div class="content-primary">
|
||||
|
||||
<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 block of content, create a container and add the <code> data-role="collapsible"</code> attribute.</p>
|
||||
|
||||
<p>Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible.</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>
|
||||
|
||||
<p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="collapsible">
|
||||
<h3>I'm a header</h3>
|
||||
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<p>By default, the content will be collapsed.</p>
|
||||
<pre><code>
|
||||
<div <strong>data-role="collapsible"</strong>>
|
||||
<h3>I'm a header</h3>
|
||||
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
|
||||
<div data-role="collapsible">
|
||||
<h3>I'm a header</h3>
|
||||
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
|
||||
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<p>As the example notes, by default the content will be collapsed. To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
|
||||
<h2>Expanding collapsibles on load</h2>
|
||||
|
||||
<p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
|
||||
|
||||
<code>
|
||||
<div data-role="collapsible" <strong>data-collapsed="true"></strong>
|
||||
<div data-role="collapsible" <strong>data-collapsed="false"></strong>
|
||||
</code>
|
||||
|
||||
<p>This code will create a collapsible widget like this:</p>
|
||||
|
|
@ -55,69 +59,106 @@
|
|||
|
||||
<div data-role="collapsible" data-collapsed="false">
|
||||
<h3>I'm a header</h3>
|
||||
<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false; you need to expand the header to see me.</p>
|
||||
<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
|
||||
</div>
|
||||
|
||||
<h2>Theming collapsible content</h2>
|
||||
|
||||
|
||||
<p>Collapsible content is minimally styled — we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>
|
||||
|
||||
<h2>Collapsible example</h2>
|
||||
<p>This page has 4 collapsible containers with different types of content inside.</p>
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true">
|
||||
<h3>Section 1: Collapsed text block</h3>
|
||||
<p>I'm closed when the page loads because I have the <code>data-collapsed="true"</code> attribute on my container. </p>
|
||||
<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. </p>
|
||||
</div><!-- /section 1 -->
|
||||
<p>To provide a stronger visual connection between the collapsible header and content, add the <code>data-content-theme</code> attribute to the wrapper and specify a theme swatch letter. This will apply the swatch's border and <em>flat</em> background color (not the gradient) to the content block and changes the corner rounding to square off the bottom of the header and round the bottom of the content block instead to visually group these elements.</p>
|
||||
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 2: Expanded on load</h3>
|
||||
<p>I'm closed when the page loads because I don't have the <code>data-collapsed="false"</code> attribute on my container. </p>
|
||||
<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.</p>
|
||||
</div><!-- /section 2 -->
|
||||
<pre><code>
|
||||
<div data-role="collapsible" <strong>data-content-theme="c"</strong>>
|
||||
<h3>Header swatch A</h3>
|
||||
<p>I'm the collapsible content with a themed content block set to "C".</p>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true">
|
||||
<h3>Section 3: Form elements</h3>
|
||||
<form action="#" method="get">
|
||||
<div data-role="fieldcontain">
|
||||
<label for="textarea">Textarea:</label>
|
||||
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider">Input slider:</label>
|
||||
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
|
||||
</div>
|
||||
<fieldset class="ui-grid-a">
|
||||
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
|
||||
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!-- /section 3 -->
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true">
|
||||
<h3>Section 4: Collapsed list</h3>
|
||||
<ul data-role="listview" data-inset="true" data-theme="d">
|
||||
<li><a href="index.html">Acura</a></li>
|
||||
<li><a href="index.html">Audi</a></li>
|
||||
<li><a href="index.html">BMW</a></li>
|
||||
<li><a href="index.html">Cadillac</a></li>
|
||||
<li><a href="index.html">Chrysler</a></li>
|
||||
<li><a href="index.html">Dodge</a></li>
|
||||
<li><a href="index.html">Ferrari</a></li>
|
||||
<li><a href="index.html">Ford</a></li>
|
||||
</ul>
|
||||
</div><!-- /section 4 -->
|
||||
|
||||
<h2>Nested Collapsibles</h2>
|
||||
<div data-role="collapsible">
|
||||
<h3>I'm a header</h3>
|
||||
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
|
||||
<div data-role="collapsible">
|
||||
<h3>I'm a nested collapsible header</h3>
|
||||
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
|
||||
</div>
|
||||
<div data-role="collapsible" data-content-theme="c">
|
||||
<h3>Header swatch</h3>
|
||||
<p>I'm the collapsible content with a themed content block set to "C".</p>
|
||||
</div>
|
||||
|
||||
<h2>Collapsible sets</h2>
|
||||
<h2>Theming collapsible headers</h2>
|
||||
<p>To set the theme on a collapsible header button, add the <code>data-theme</code> attribute to the wrapper and specify a swatch letter. Note that you can mix and match swatch letters between the header and content with these theme attributes.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="collapsible" <strong>data-theme="a" data-content-theme="a"</strong>>
|
||||
<h3>Header swatch A</h3>
|
||||
<p>I'm the collapsible content with a themed content block set to "A".</p>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<div data-role="collapsible" data-theme="a" data-content-theme="a">
|
||||
<h3>Header swatch A</h3>
|
||||
<p>I'm the collapsible content with a themed content block set to "A".</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div data-role="collapsible" data-theme="b" data-content-theme="d">
|
||||
<h3>Header swatch B</h3>
|
||||
<p>I'm the collapsible content with a themed content block set to "D".</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h2>Nested Collapsibles</h2>
|
||||
|
||||
<p>Collapsibles can be nested inside each other if needed. In this example, we're setting the content theme to provide clearer visual connection between the levels.</p>
|
||||
<div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
|
||||
<h3>I'm a header</h3>
|
||||
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
|
||||
|
||||
<div data-role="collapsible" data-theme="c" data-content-theme="c">
|
||||
<h3>I'm a nested collapsible with a child collapsible</h3>
|
||||
<p>I'm a child collapsible.</p>
|
||||
<div data-role="collapsible" data-theme="d" data-content-theme="d">
|
||||
<h3>Nested inside again.</h3>
|
||||
<p>Three levels deep now.</p>
|
||||
</div><!-- /section 1A -->
|
||||
</div><!-- /section 1 -->
|
||||
|
||||
|
||||
<div data-role="collapsible" data-content-theme="c">
|
||||
<h3>Section 3: Form elements</h3>
|
||||
<form action="#" method="get">
|
||||
<div data-role="fieldcontain">
|
||||
<label for="textarea">Textarea:</label>
|
||||
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider">Input slider:</label>
|
||||
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
|
||||
</div>
|
||||
<fieldset class="ui-grid-a">
|
||||
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
|
||||
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!-- /section 2 -->
|
||||
|
||||
<div data-role="collapsible" data-content-theme="c">
|
||||
<h3>Section 4: Collapsed list</h3>
|
||||
<p>Here is an inset list:</p>
|
||||
<ul data-role="listview" data-inset="true" data-theme="d">
|
||||
<li><a href="index.html">Acura</a></li>
|
||||
<li><a href="index.html">Audi</a></li>
|
||||
<li><a href="index.html">BMW</a></li>
|
||||
<li><a href="index.html">Cadillac</a></li>
|
||||
<li><a href="index.html">Chrysler</a></li>
|
||||
<li><a href="index.html">Dodge</a></li>
|
||||
<li><a href="index.html">Ferrari</a></li>
|
||||
<li><a href="index.html">Ford</a></li>
|
||||
</ul>
|
||||
</div><!-- /section 3 -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h2>Collapsible sets (accordions)</h2>
|
||||
<p>It's possible to combine multiple collapsibles into a grouped sets that acts like an accordion widget. <a href="content-collapsible-set.html">Learn more</a></p>
|
||||
|
||||
|
||||
|
|
@ -134,13 +175,13 @@
|
|||
<li data-role="list-divider">Content Formatting</li>
|
||||
<li><a href="content-html.html">Basic HTML styles</a></li>
|
||||
<li><a href="content-grids.html">Layout grids (columns)</a></li>
|
||||
<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
|
||||
<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
|
||||
<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
|
||||
<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
|
||||
<li><a href="content-themes.html">Theming content</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /content -->
|
||||
|
||||
|
|
|
|||
|
|
@ -24,10 +24,12 @@
|
|||
<div class="content-primary">
|
||||
<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>Additionally, the content area can be themed to match the theme of the collapsible header using the <code>data-content-theme</code> attribute.</p>
|
||||
|
||||
<code>
|
||||
<div data-role="page" <strong> data-theme="a"</strong>>
|
||||
</code>
|
||||
<div data-role="page" <strong> data-theme="a"</strong> <strong>data-content-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>
|
||||
|
||||
|
|
@ -44,6 +46,10 @@
|
|||
<h3>I'm an themed collapsible</h3>
|
||||
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div><!-- /collapsible -->
|
||||
<div data-role="collapsible" data-theme="a" data-content-theme="a">
|
||||
<h3>I'm a themed collapsible with a themed content</h3>
|
||||
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div>
|
||||
</div><!-- /themed container -->
|
||||
|
||||
<p><strong>B</strong> theme swatch on content & collapsible</p>
|
||||
|
|
@ -54,6 +60,10 @@
|
|||
<h3>I'm an themed collapsible</h3>
|
||||
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div><!-- /collapsible -->
|
||||
<div data-role="collapsible" data-theme="b" data-content-theme="b">
|
||||
<h3>I'm a themed collapsible with a themed content</h3>
|
||||
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div>
|
||||
</div><!-- /themed container -->
|
||||
|
||||
<p><strong>C</strong> theme swatch on content & collapsible</p>
|
||||
|
|
@ -64,6 +74,10 @@
|
|||
<h3>I'm an themed collapsible</h3>
|
||||
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div><!-- /collapsible -->
|
||||
<div data-role="collapsible" data-theme="c" data-content-theme="c">
|
||||
<h3>I'm a themed collapsible with a themed content</h3>
|
||||
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div>
|
||||
</div><!-- /themed container -->
|
||||
|
||||
<p><strong>D</strong> theme swatch on content & collapsible</p>
|
||||
|
|
@ -74,6 +88,10 @@
|
|||
<h3>I'm an themed collapsible</h3>
|
||||
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div><!-- /collapsible -->
|
||||
<div data-role="collapsible" data-theme="d" data-content-theme="d">
|
||||
<h3>I'm a themed collapsible with a themed content</h3>
|
||||
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div>
|
||||
</div><!-- /themed container -->
|
||||
|
||||
<p><strong>E</strong> theme swatch on content & collapsible</p>
|
||||
|
|
@ -84,6 +102,10 @@
|
|||
<h3>I'm an themed collapsible</h3>
|
||||
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div><!-- /collapsible -->
|
||||
<div data-role="collapsible" data-theme="e" data-content-theme="e">
|
||||
<h3>I'm a themed collapsible with a themed content</h3>
|
||||
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div>
|
||||
</div><!-- /themed container -->
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
|
|||
collapsed: true,
|
||||
heading: ">:header,>legend",
|
||||
theme: null,
|
||||
contentTheme: null,
|
||||
iconTheme: "d",
|
||||
initSelector: ":jqmData(role='collapsible')"
|
||||
},
|
||||
|
|
@ -20,11 +21,11 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
|
|||
|
||||
var $el = this.element,
|
||||
o = this.options,
|
||||
expandedCls = "ui-btn-up-" + (o.theme || "c"),
|
||||
collapsible = $el.addClass( "ui-collapsible" ),
|
||||
collapsibleHeading = $el.find( o.heading ).eq( 0 ),
|
||||
collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
|
||||
collapsibleParent = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
|
||||
collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
|
||||
colllapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
|
||||
|
||||
// Replace collapsibleHeading if it's a legend
|
||||
if ( collapsibleHeading.is( "legend" ) ) {
|
||||
|
|
@ -32,6 +33,20 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
|
|||
collapsibleHeading.next().remove();
|
||||
}
|
||||
|
||||
// If we are in a collapsible set
|
||||
if ( collapsibleSet.length ) {
|
||||
// Inherit the theme from collapsible-set
|
||||
if ( !o.theme ) {
|
||||
o.theme = collapsibleSet.jqmData( "theme" );
|
||||
}
|
||||
// Inherit the content-theme from collapsible-set
|
||||
if ( !o.contentTheme ) {
|
||||
o.contentTheme = collapsibleSet.jqmData( "content-theme" );
|
||||
}
|
||||
}
|
||||
|
||||
collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-btn-up-" + o.contentTheme ) : "");
|
||||
|
||||
collapsibleHeading
|
||||
//drop heading in before content
|
||||
.insertBefore( collapsibleContent )
|
||||
|
|
@ -47,21 +62,43 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
|
|||
icon: "plus",
|
||||
theme: o.theme
|
||||
})
|
||||
.find( ".ui-icon" )
|
||||
.removeAttr( "class" )
|
||||
.buttonMarkup({
|
||||
shadow: true,
|
||||
corners: true,
|
||||
iconPos: "notext",
|
||||
icon: "plus",
|
||||
theme: o.iconTheme
|
||||
});
|
||||
|
||||
if ( !collapsibleParent.length ) {
|
||||
if ( !collapsibleSet.length ) {
|
||||
collapsibleHeading
|
||||
.find( "a:eq(0), .ui-btn-inner" )
|
||||
.addClass( "ui-corner-top ui-corner-bottom" );
|
||||
} else {
|
||||
// If we are in a collapsible set
|
||||
|
||||
// Initialize the collapsible set if it's not already initialized
|
||||
if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) {
|
||||
|
||||
collapsibleSet
|
||||
.jqmData( "collapsiblebound", true )
|
||||
.bind( "expand", function( event ) {
|
||||
|
||||
$( event.target )
|
||||
.closest( ".ui-collapsible" )
|
||||
.siblings( ".ui-collapsible" )
|
||||
.trigger( "collapse" );
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
colllapsiblesInSet.first()
|
||||
.find( "a:eq(0)" )
|
||||
.addClass( "ui-corner-top" )
|
||||
.find( ".ui-btn-inner" )
|
||||
.addClass( "ui-corner-top" );
|
||||
|
||||
colllapsiblesInSet.last()
|
||||
.jqmData( "collapsible-last", true )
|
||||
.find( "a:eq(0)" )
|
||||
.addClass( "ui-corner-bottom" )
|
||||
.find( ".ui-btn-inner" )
|
||||
.addClass( "ui-corner-bottom" );
|
||||
|
||||
|
||||
if ( collapsible.jqmData( "collapsible-last" ) ) {
|
||||
collapsibleHeading
|
||||
.find( "a:eq(0), .ui-btn-inner" )
|
||||
|
|
@ -76,7 +113,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
|
|||
|
||||
event.preventDefault();
|
||||
|
||||
var isCollapse = ( event.type === "collapse" );
|
||||
var $this = $( this ),
|
||||
isCollapse = ( event.type === "collapse" ),
|
||||
contentTheme = o.contentTheme;
|
||||
|
||||
collapsibleHeading
|
||||
.toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
|
||||
|
|
@ -87,11 +126,10 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
|
|||
.toggleClass( "ui-icon-minus", !isCollapse )
|
||||
.toggleClass( "ui-icon-plus", isCollapse );
|
||||
|
||||
collapsible.toggleClass( "ui-collapsible-collapsed", isCollapse );
|
||||
$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
|
||||
collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
|
||||
collapsibleContent.toggleClass( expandedCls, !isCollapse );
|
||||
|
||||
if ( !collapsibleParent.length || collapsible.jqmData( "collapsible-last" ) ) {
|
||||
if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
|
||||
collapsibleHeading
|
||||
.find( "a:eq(0), .ui-btn-inner" )
|
||||
.toggleClass( "ui-corner-bottom", isCollapse );
|
||||
|
|
@ -101,36 +139,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
|
|||
})
|
||||
.trigger( o.collapsed ? "collapse" : "expand" );
|
||||
|
||||
// Close others in a set
|
||||
if ( collapsibleParent.length && !collapsibleParent.jqmData( "collapsiblebound" ) ) {
|
||||
|
||||
collapsibleParent
|
||||
.jqmData( "collapsiblebound", true )
|
||||
.bind( "expand", function( event ) {
|
||||
|
||||
$( event.target )
|
||||
.closest( ".ui-collapsible" )
|
||||
.siblings( ".ui-collapsible" )
|
||||
.trigger( "collapse" );
|
||||
|
||||
});
|
||||
|
||||
var set = collapsibleParent.children( ":jqmData(role='collapsible')" );
|
||||
|
||||
set.first()
|
||||
.find( "a:eq(0)" )
|
||||
.addClass( "ui-corner-top" )
|
||||
.find( ".ui-btn-inner" )
|
||||
.addClass( "ui-corner-top" );
|
||||
|
||||
set.last()
|
||||
.jqmData( "collapsible-last", true )
|
||||
.find( "a:eq(0)" )
|
||||
.addClass( "ui-corner-bottom" )
|
||||
.find( ".ui-btn-inner" )
|
||||
.addClass( "ui-corner-bottom" );
|
||||
}
|
||||
|
||||
collapsibleHeading
|
||||
.bind( "vclick", function( event ) {
|
||||
|
||||
|
|
|
|||
|
|
@ -151,6 +151,27 @@
|
|||
return $.removeData( elem, $.mobile.nsNormalize( prop ) );
|
||||
};
|
||||
|
||||
$.fn.removeWithDependents = function() {
|
||||
$.removeWithDependents( this );
|
||||
};
|
||||
|
||||
$.removeWithDependents = function( elem ) {
|
||||
var $elem = $( elem );
|
||||
|
||||
( $elem.jqmData('dependents') || $() ).remove();
|
||||
$elem.remove();
|
||||
};
|
||||
|
||||
$.fn.addDependents = function( newDependents ) {
|
||||
$.addDependents( $(this), newDependents );
|
||||
};
|
||||
|
||||
$.addDependents = function( elem, newDependents ) {
|
||||
var dependents = $(elem).jqmData( 'dependents' ) || $();
|
||||
|
||||
$(elem).jqmData( 'dependents', $.merge(dependents, newDependents) );
|
||||
};
|
||||
|
||||
// Monkey-patching Sizzle to filter the :jqmData selector
|
||||
var oldFind = $.find;
|
||||
|
||||
|
|
|
|||
|
|
@ -39,10 +39,13 @@ $( document ).bind( "pagecreate enhance", function( e ){
|
|||
optType = o.degradeInputs[ type ] || "text";
|
||||
|
||||
if ( o.degradeInputs[ type ] ) {
|
||||
$this.replaceWith(
|
||||
$( "<div>" ).html( $this.clone() ).html()
|
||||
.replace( /\s+type=["']?\w+['"]?/, " type=\"" + optType + "\" data-" + $.mobile.ns + "type=\"" + type + "\" " )
|
||||
);
|
||||
var html = $( "<div>" ).html( $this.clone() ).html(),
|
||||
// In IE browsers, the type sometimes doesn't exist in the cloned markup, so we replace the closing tag instead
|
||||
hasType = html.indexOf( " type=" ) > -1,
|
||||
findstr = hasType ? /\s+type=["']?\w+['"]?/ : /\/?>/,
|
||||
repstr = " type=\"" + optType + "\" data-" + $.mobile.ns + "type=\"" + type + "\"" + ( hasType ? "" : ">" );
|
||||
|
||||
$this.replaceWith( html.replace( findstr, repstr ) );
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -13,27 +13,36 @@ $.widget( "mobile.dialog", $.mobile.widget, {
|
|||
initSelector : ":jqmData(role='dialog')"
|
||||
},
|
||||
_create: function() {
|
||||
var $el = this.element,
|
||||
pageTheme = $el.attr( "class" ).match( /ui-body-[a-z]/ );
|
||||
|
||||
var self = this,
|
||||
$el = this.element,
|
||||
pageTheme = $el.attr( "class" ).match( /ui-body-[a-z]/ ),
|
||||
headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" );
|
||||
|
||||
if( pageTheme.length ){
|
||||
$el.removeClass( pageTheme[ 0 ] );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$el.addClass( "ui-body-" + this.options.theme );
|
||||
|
||||
|
||||
// Class the markup for dialog styling
|
||||
// Set aria role
|
||||
$el.attr( "role", "dialog" )
|
||||
.addClass( "ui-dialog" )
|
||||
.find( ":jqmData(role='header')" )
|
||||
.addClass( "ui-corner-top ui-overlay-shadow" )
|
||||
.prepend( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "rel='back' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" )
|
||||
.prepend( headerCloseButton )
|
||||
.end()
|
||||
.find( ":jqmData(role='content'),:jqmData(role='footer')" )
|
||||
.last()
|
||||
.addClass( "ui-corner-bottom ui-overlay-shadow" );
|
||||
|
||||
// this must be an anonymous function so that select menu dialogs can replace
|
||||
// the close method. This is a change from previously just defining data-rel=back
|
||||
// on the button and letting nav handle it
|
||||
headerCloseButton.bind( "vclick", function() {
|
||||
self.close();
|
||||
});
|
||||
|
||||
/* 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
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@
|
|||
|
||||
(function( $, undefined ) {
|
||||
|
||||
$.mobile.touchOverflowEnabled = true;
|
||||
// Enable touch overflow scrolling when it's natively supported
|
||||
$.mobile.touchOverflowEnabled = false;
|
||||
|
||||
// Enabled zoom when touch overflow is enabled. Can cause usability issues, unfortunately
|
||||
$.mobile.touchOverflowZoomEnabled = false;
|
||||
|
||||
$( document ).bind( "pagecreate", function( event ) {
|
||||
if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){
|
||||
|
|
|
|||
|
|
@ -186,6 +186,20 @@
|
|||
self.menuPage.bind( "pagehide", function() {
|
||||
self.list.appendTo( self.listbox );
|
||||
self._focusButton();
|
||||
|
||||
// TODO centralize page removal binding / handling in the page plugin.
|
||||
// Suggestion from @jblas to do refcounting
|
||||
//
|
||||
// TODO extremely confusing dependency on the open method where the pagehide.remove
|
||||
// bindings are stripped to prevent the parent page from disappearing. The way
|
||||
// we're keeping pages in the DOM right now sucks
|
||||
//
|
||||
// rebind the page remove that was unbound in the open function
|
||||
// to allow for the parent page removal from actions other than the use
|
||||
// of a dialog sized custom select
|
||||
//
|
||||
// doing this here provides for the back button on the custom select dialog
|
||||
$.mobile._bindPageRemove.call( self.thisPage );
|
||||
});
|
||||
|
||||
// Events on "screen" overlay
|
||||
|
|
@ -200,6 +214,10 @@
|
|||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// track this dependency so that when the parent page
|
||||
// is removed on pagehide it will also remove the menupage
|
||||
self.thisPage.addDependents( this.menuPage );
|
||||
},
|
||||
|
||||
_isRebuildRequired: function() {
|
||||
|
|
@ -257,18 +275,6 @@
|
|||
var self = this;
|
||||
|
||||
if ( self.menuType == "page" ) {
|
||||
// TODO centralize page removal binding / handling in the page plugin.
|
||||
// Suggestion from @jblas to do refcounting
|
||||
//
|
||||
// rebind the page remove that was unbound in the open function
|
||||
// to allow for the parent page removal from actions other than the use
|
||||
// of a dialog sized custom select
|
||||
if( !self.thisPage.data("page").options.domCache ){
|
||||
self.thisPage.bind( "pagehide.remove", function() {
|
||||
$(self).remove();
|
||||
});
|
||||
}
|
||||
|
||||
// doesn't solve the possible issue with calling change page
|
||||
// where the objects don't define data urls which prevents dialog key
|
||||
// stripping - changePage has incoming refactor
|
||||
|
|
@ -292,7 +298,10 @@
|
|||
var self = this,
|
||||
menuHeight = self.list.parent().outerHeight(),
|
||||
menuWidth = self.list.parent().outerWidth(),
|
||||
scrollTop = $( window ).scrollTop(),
|
||||
activePage = $( ".ui-page-active" ),
|
||||
tOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled,
|
||||
tScrollElem = activePage.is( ".ui-native-fixed" ) ? activePage.find( ".ui-content" ) : activePage;
|
||||
scrollTop = tOverflow ? tScrollElem.scrollTop() : $( window ).scrollTop(),
|
||||
btnOffset = self.button.offset().top,
|
||||
screenHeight = window.innerHeight,
|
||||
screenWidth = window.innerWidth;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
$.widget( "mobile.textinput", $.mobile.widget, {
|
||||
options: {
|
||||
theme: null,
|
||||
initSelector: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea"
|
||||
initSelector: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"
|
||||
},
|
||||
|
||||
_create: function() {
|
||||
|
|
@ -33,18 +33,21 @@ $.widget( "mobile.textinput", $.mobile.widget, {
|
|||
input.addClass("ui-input-text ui-body-"+ o.theme );
|
||||
|
||||
focusedEl = input;
|
||||
|
||||
// XXX: Temporary workaround for issue 785. Turn off autocorrect and
|
||||
// autocomplete since the popup they use can't be dismissed by
|
||||
// the user. Note that we test for the presence of the feature
|
||||
// by looking for the autocorrect property on the input element.
|
||||
if ( typeof input[0].autocorrect !== "undefined" ) {
|
||||
|
||||
// XXX: Temporary workaround for issue 785 (Apple bug 8910589).
|
||||
// Turn off autocorrect and autocomplete on non-iOS 5 devices
|
||||
// since the popup they use can't be dismissed by the user. Note
|
||||
// that we test for the presence of the feature by looking for
|
||||
// the autocorrect property on the input element. We currently
|
||||
// have no test for iOS 5 or newer so we're temporarily using
|
||||
// the touchOverflow support flag for jQM 1.0. Yes, I feel dirty. - jblas
|
||||
if ( typeof input[0].autocorrect !== "undefined" && !$.support.touchOverflow ) {
|
||||
// Set the attribute instead of the property just in case there
|
||||
// is code that attempts to make modifications via HTML.
|
||||
input[0].setAttribute( "autocorrect", "off" );
|
||||
input[0].setAttribute( "autocomplete", "off" );
|
||||
}
|
||||
|
||||
|
||||
|
||||
//"search" input widget
|
||||
if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
|
||||
|
|
@ -125,11 +128,11 @@ $.widget( "mobile.textinput", $.mobile.widget, {
|
|||
|
||||
//auto self-init widgets
|
||||
$( document ).bind( "pagecreate create", function( e ){
|
||||
|
||||
|
||||
$( $.mobile.textinput.prototype.options.initSelector, e.target )
|
||||
.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
|
||||
.textinput();
|
||||
|
||||
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
|
|
|
|||
|
|
@ -103,6 +103,24 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
// This function injects a meta viewport tag to prevent scaling. Off by default, on by default when touchOverflow scrolling is enabled
|
||||
function disableZoom() {
|
||||
var cont = "user-scalable=no",
|
||||
meta = $( "meta[name='viewport']" );
|
||||
|
||||
if( meta.length ){
|
||||
meta.attr( "content", meta.attr( "content" ) + ", " + cont );
|
||||
}
|
||||
else{
|
||||
$( "head" ).prepend( "<meta>", { "name": "viewport", "content": cont } );
|
||||
}
|
||||
}
|
||||
|
||||
// if touch-overflow is enabled, disable user scaling, as it creates usability issues
|
||||
if( $.support.touchOverflow && $.mobile.touchOverflowEnabled && !$.mobile.touchOverflowZoomEnabled ){
|
||||
disableZoom();
|
||||
}
|
||||
|
||||
// initialize events now, after mobileinit has occurred
|
||||
$.mobile._registerInternalEvents();
|
||||
|
|
|
|||
|
|
@ -272,7 +272,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
|
|||
// on pagehide, remove any nested pages along with the parent page, as long as they aren't active
|
||||
// and aren't embedded
|
||||
if( hasSubPages &&
|
||||
parentPage.is( "jqmData(external-page='true')" ) &&
|
||||
parentPage.is( ":jqmData(external-page='true')" ) &&
|
||||
parentPage.data("page").options.domCache === false ) {
|
||||
|
||||
var newRemove = function( e, ui ){
|
||||
|
|
|
|||
|
|
@ -579,6 +579,10 @@
|
|||
|
||||
//simply set the active page's minimum height to screen height, depending on orientation
|
||||
function resetActivePageHeight(){
|
||||
// Don't apply this height in touch overflow enabled mode
|
||||
if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){
|
||||
return;
|
||||
}
|
||||
$( "." + $.mobile.activePageClass ).css( "min-height", getScreenHeight() );
|
||||
}
|
||||
|
||||
|
|
@ -650,6 +654,19 @@
|
|||
return asParsedObject ? $.extend( {}, documentBase ) : documentBase.href;
|
||||
};
|
||||
|
||||
$.mobile._bindPageRemove = function() {
|
||||
var page = $(this);
|
||||
|
||||
// when dom caching is not enabled or the page is embedded bind to remove the page on hide
|
||||
if( !page.data("page").options.domCache
|
||||
&& page.is(":jqmData(external-page='true')") ) {
|
||||
|
||||
page.bind( 'pagehide.remove', function() {
|
||||
$( this ).removeWithDependents();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Load a page into the DOM.
|
||||
$.mobile.loadPage = function( url, options ) {
|
||||
// This function uses deferred notifications to let callers
|
||||
|
|
@ -686,7 +703,7 @@
|
|||
absUrl = path.addSearchParams( absUrl, settings.data );
|
||||
settings.data = undefined;
|
||||
}
|
||||
|
||||
|
||||
// If the caller is using a "post" request, reloadPage must be true
|
||||
if( settings.data && settings.type === "post" ){
|
||||
settings.reloadPage = true;
|
||||
|
|
@ -742,6 +759,18 @@
|
|||
dupCachedPage = page;
|
||||
}
|
||||
|
||||
var mpc = settings.pageContainer,
|
||||
pblEvent = new $.Event( "pagebeforeload" ),
|
||||
triggerData = { url: url, absUrl: absUrl, dataUrl: dataUrl, deferred: deferred, options: settings };
|
||||
|
||||
// Let listeners know we're about to load a page.
|
||||
mpc.trigger( pblEvent, triggerData );
|
||||
|
||||
// If the default behavior is prevented, stop here!
|
||||
if( pblEvent.isDefaultPrevented() ){
|
||||
return deferred.promise();
|
||||
}
|
||||
|
||||
if ( settings.showLoadMsg ) {
|
||||
|
||||
// This configurable timeout allows cached pages a brief delay to load without showing a message
|
||||
|
|
@ -837,15 +866,7 @@
|
|||
.appendTo( settings.pageContainer );
|
||||
|
||||
// wait for page creation to leverage options defined on widget
|
||||
page.one('pagecreate', function(){
|
||||
|
||||
// when dom caching is not enabled bind to remove the page on hide
|
||||
if( !page.data("page").options.domCache ){
|
||||
page.bind( "pagehide.remove", function(){
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
page.one( 'pagecreate', $.mobile._bindPageRemove );
|
||||
|
||||
enhancePage( page, settings.role );
|
||||
|
||||
|
|
@ -863,6 +884,12 @@
|
|||
hideMsg();
|
||||
}
|
||||
|
||||
// Add the page reference to our triggerData.
|
||||
triggerData.page = page;
|
||||
|
||||
// Let listeners know the page loaded successfully.
|
||||
settings.pageContainer.trigger( "pageload", triggerData );
|
||||
|
||||
deferred.resolve( absUrl, options, page, dupCachedPage );
|
||||
},
|
||||
error: function() {
|
||||
|
|
@ -871,6 +898,19 @@
|
|||
base.set( path.get() );
|
||||
}
|
||||
|
||||
var plfEvent = new $.Event( "pageloadfailed" );
|
||||
|
||||
// Let listeners know the page load failed.
|
||||
settings.pageContainer.trigger( plfEvent, triggerData );
|
||||
|
||||
// If the default behavior is prevented, stop here!
|
||||
// Note that it is the responsibility of the listener/handler
|
||||
// that called preventDefault(), to resolve/reject the
|
||||
// deferred object within the triggerData.
|
||||
if( plfEvent.isDefaultPrevented() ){
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove loading message.
|
||||
if ( settings.showLoadMsg ) {
|
||||
|
||||
|
|
@ -983,13 +1023,17 @@
|
|||
pageTitle = document.title,
|
||||
isDialog = settings.role === "dialog" || toPage.jqmData( "role" ) === "dialog";
|
||||
|
||||
// If we are trying to transition to the same page that we are currently on ignore the request.
|
||||
// an illegal same page request is defined by the current page being the same as the url, as long as there's history
|
||||
// and toPage is not an array or object (those are allowed to be "same")
|
||||
//
|
||||
// XXX_jblas: We need to remove this at some point when we allow for transitions
|
||||
// to the same page.
|
||||
if( fromPage && fromPage[0] === toPage[0] ) {
|
||||
// By default, we prevent changePage requests when the fromPage and toPage
|
||||
// are the same element, but folks that generate content manually/dynamically
|
||||
// and reuse pages want to be able to transition to the same page. To allow
|
||||
// this, they will need to change the default value of allowSamePageTransition
|
||||
// to true, *OR*, pass it in as an option when they manually call changePage().
|
||||
// It should be noted that our default transition animations assume that the
|
||||
// formPage and toPage are different elements, so they may behave unexpectedly.
|
||||
// It is up to the developer that turns on the allowSamePageTransitiona option
|
||||
// to either turn off transition animations, or make sure that an appropriate
|
||||
// animation transition is used.
|
||||
if( fromPage && fromPage[0] === toPage[0] && !settings.allowSamePageTransition ) {
|
||||
isPageTransitioning = false;
|
||||
mpc.trigger( "pagechange", triggerData );
|
||||
return;
|
||||
|
|
@ -1092,7 +1136,8 @@
|
|||
pageContainer: undefined,
|
||||
showLoadMsg: true, //loading message shows by default when pages are being fetched during changePage
|
||||
dataUrl: undefined,
|
||||
fromPage: undefined
|
||||
fromPage: undefined,
|
||||
allowSamePageTransition: false
|
||||
};
|
||||
|
||||
/* Event Bindings - hashchange, submit, and click */
|
||||
|
|
|
|||
|
|
@ -116,5 +116,50 @@
|
|||
]);
|
||||
});
|
||||
|
||||
module( "Theming", {});
|
||||
|
||||
asyncTest( "Collapsible", 6, function(){
|
||||
$.testHelper.pageSequence([
|
||||
function(){
|
||||
$.testHelper.openPage( "#collapsible-with-theming" );
|
||||
},
|
||||
|
||||
function() {
|
||||
var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
|
||||
ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
|
||||
ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a");
|
||||
ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
|
||||
ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should have class ui-btn-up-b");
|
||||
ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-c" ), "Heading of third collapsible should have class ui-btn-up-c");
|
||||
ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-c" ), "Content of third collapsible should have class ui-btn-up-c");
|
||||
start();
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
asyncTest( "Collapsible Set", function(){
|
||||
$.testHelper.pageSequence([
|
||||
function(){
|
||||
$.testHelper.openPage( "#collapsible-set-with-theming" );
|
||||
},
|
||||
|
||||
function() {
|
||||
var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
|
||||
ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
|
||||
ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a");
|
||||
ok( collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of first collapsible should NOT have class ui-btn-up-d");
|
||||
ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
|
||||
ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should have class ui-btn-up-b");
|
||||
ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of third collapsible should have class ui-btn-up-d");
|
||||
ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of third collapsible should have class ui-btn-up-d");
|
||||
ok( !collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-collapsible-content-collapsed" ), "Content of third collapsible should NOT have class ui-collapsible-content-collapsed");
|
||||
ok( collapsibles.eq(3).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of fourth collapsible should have class ui-btn-up-d");
|
||||
ok( collapsibles.eq(3).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of fourth collapsible should have class ui-btn-up-d");
|
||||
start();
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
})( jQuery );
|
||||
|
|
|
|||
|
|
@ -89,6 +89,75 @@
|
|||
have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-nstest-role="collapsible" >
|
||||
<h3>Section E</h3>
|
||||
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
|
||||
have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-nstest-role="page" id='collapsible-with-theming'>
|
||||
<div data-nstest-role="header">
|
||||
<h1>Themed collapsibles</h1>
|
||||
</div>
|
||||
<div data-nstest-role="content">
|
||||
<div data-nstest-role="collapsible" data-nstest-theme="a">
|
||||
<h3>Section A</h3>
|
||||
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
|
||||
have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
</div>
|
||||
<div data-nstest-role="collapsible" data-nstest-theme="b" data-nstest-content-theme="b">
|
||||
<h3>Section B</h3>
|
||||
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
|
||||
have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
</div>
|
||||
<div data-nstest-role="collapsible" data-nstest-theme="c" data-nstest-content-theme="c" data-nstest-collapsed="false">
|
||||
<h3>Section B</h3>
|
||||
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
|
||||
have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-nstest-role="page" id='collapsible-set-with-theming'>
|
||||
<div data-nstest-role="header">
|
||||
<h1>Themed collapsibles</h1>
|
||||
</div>
|
||||
<div data-nstest-role="content">
|
||||
<div data-nstest-role="collapsible-set" data-nstest-theme="d" data-nstest-content-theme="d">
|
||||
<div data-nstest-role="collapsible" data-nstest-theme="a">
|
||||
<h3>Section A</h3>
|
||||
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
|
||||
have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
</div>
|
||||
<div data-nstest-role="collapsible" data-nstest-theme="b" data-nstest-content-theme="b">
|
||||
<h3>Section B</h3>
|
||||
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
|
||||
have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
</div>
|
||||
<div data-nstest-role="collapsible" data-nstest-collapsed="false">
|
||||
<h3>Section C</h3>
|
||||
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
|
||||
have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
</div>
|
||||
<div data-nstest-role="collapsible">
|
||||
<h3>Section D</h3>
|
||||
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
|
||||
have the "collapsed" state; you need to expand the header to see me.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -105,4 +105,16 @@
|
|||
|
||||
});
|
||||
|
||||
test( "addDependents works properly", function() {
|
||||
same( $("#parent").jqmData('dependents'), undefined );
|
||||
$( "#parent" ).addDependents( $("#dependent") );
|
||||
same( $("#parent").jqmData('dependents').length, 1 );
|
||||
});
|
||||
|
||||
test( "removeWithDependents removes the parent element and ", function(){
|
||||
$( "#parent" ).addDependents( $("#dependent") );
|
||||
same($( "#parent, #dependent" ).length, 2);
|
||||
$( "#parent" ).removeWithDependents();
|
||||
same($( "#parent, #dependent" ).length, 0);
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -28,5 +28,9 @@
|
|||
<div data-nstest-role="page">
|
||||
</div>
|
||||
|
||||
<div id="qunit-fixtures">
|
||||
<div id="parent"></div>
|
||||
<div id="dependent"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -345,7 +345,7 @@
|
|||
function(){ $("#dup-history-second a:first").click(); },
|
||||
function(){ $("#dup-history-first a").click(); },
|
||||
function(){ $("#dup-history-second a:last").click(); },
|
||||
function(){ $("#dup-history-dialog :jqmData(rel=back)").click(); },
|
||||
function(){ $("#dup-history-dialog a:contains('Close')").click(); },
|
||||
function(){
|
||||
|
||||
// fourth page (third index) in the stack to account for first page being hash manipulation,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
<!-- forces the base-tests into a push state disabled run and allows for
|
||||
the test suite runner to pick it up as a seperate test set. See test/unit/ls.php,
|
||||
test/unit/runner.js, base-tests.html, and tests/jquery.testHelper.js for more. -->
|
||||
<meta http-equiv="refresh" content="0; url='base-tests.html?push-state=false'">
|
||||
<meta http-equiv="refresh" content="0; url='base-tests.html?push-state=false'"></meta>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
<!-- forces the base-tests into a push state disabled run and allows for
|
||||
the test suite runner to pick it up as a seperate test set. See test/unit/ls.php,
|
||||
test/unit/runner.js, base-tests.html, and tests/jquery.testHelper.js for more. -->
|
||||
<meta http-equiv="refresh" content="0; url='./?push-state=false'">
|
||||
<meta http-equiv="refresh" content="0; url='./?push-state=false'"></meta>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
start
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
asyncTest( "dialog sized select shouldn't rebind its parent page remove handler when closing, if the parent page domCache option is true", function(){
|
||||
expect( 3 );
|
||||
|
||||
|
|
@ -98,4 +98,27 @@
|
|||
}
|
||||
]);
|
||||
});
|
||||
|
||||
asyncTest( "menupage is removed when the parent page is removed", function(){
|
||||
var dialogCount = $(":jqmData(role='dialog')").length;
|
||||
|
||||
$.testHelper.pageSequence([
|
||||
resetHash,
|
||||
|
||||
function(){
|
||||
|
||||
$.mobile.changePage( "uncached-dom-cached-false.html" );
|
||||
},
|
||||
|
||||
function(){
|
||||
same( $(":jqmData(role='dialog')").length, dialogCount + 1 );
|
||||
window.history.back();
|
||||
},
|
||||
|
||||
function() {
|
||||
same( $(":jqmData(role='dialog')").length, dialogCount );
|
||||
start();
|
||||
}
|
||||
]);
|
||||
});
|
||||
})(jQuery);
|
||||
65
tests/unit/select/uncached-dom-cached-false.html
Normal file
65
tests/unit/select/uncached-dom-cached-false.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<div id="dialog-select-parent-domcache-test" data-nstest-role="page">
|
||||
<div data-nstest-role="fieldcontain" id="domcache-page-select-container">
|
||||
<label for="domcache-page-select" class="select">Your state:</label>
|
||||
<select name="domcache-uncached-page-select" id="domcache-uncached-page-select" data-nstest-native-menu="false">
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OH">Ohio</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
29
tests/unit/textinput/index.html
Normal file
29
tests/unit/textinput/index.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Textinput Test Suite</title>
|
||||
|
||||
<script src="../../../js/jquery.js"></script>
|
||||
<script src="../jquery.setNameSpace.js"></script>
|
||||
<script src="../../../external/qunit.js"></script>
|
||||
<script src="../../../js/"></script>
|
||||
<link rel="stylesheet" href="../../../themes/default" />
|
||||
<link rel="stylesheet" href="../../../external/qunit.css"/>
|
||||
|
||||
<script src="textinput_core.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="qunit-header">jQuery Mobile Textinput Test Suite</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests">
|
||||
</ol>
|
||||
|
||||
<div data-nstest-role="page">
|
||||
<input name="" id="typeless-input" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
10
tests/unit/textinput/textinput_core.js
Normal file
10
tests/unit/textinput/textinput_core.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
* mobile textinput unit tests
|
||||
*/
|
||||
(function($){
|
||||
module( "jquery.mobile.forms.textinput.js" );
|
||||
|
||||
test( "inputs without type specified are enhanced", function(){
|
||||
ok( $( "#typeless-input" ).hasClass( "ui-input-text" ) );
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -36,6 +36,11 @@
|
|||
-ms-overflow-scrolling: touch;
|
||||
overflow-scrolling: touch;
|
||||
}
|
||||
.ui-page.ui-mobile-touch-overflow,
|
||||
.ui-page.ui-mobile-touch-overflow * {
|
||||
/* some level of transform keeps elements from blinking out of visibility on iOS */
|
||||
-webkit-transform: rotateY(0);
|
||||
}
|
||||
.ui-page.ui-mobile-pre-transition {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue