Skip to content
Browse files

Merge branch 'master' into 4005-fix

  • Loading branch information...
2 parents 9a3e556 + c3048aa commit 9d4d4deefac935d03c7e01c03fe37ae322d76aaa @deAtog committed
View
3 css/structure/jquery.mobile.fixedToolbar.css
@@ -7,6 +7,9 @@
position: fixed;
z-index: 1000;
}
+.ui-page-pre-in {
+ opacity: 0;
+}
.ui-header-fixed {
top: 0;
}
View
3 docs/_assets/css/jqm-docs.css
@@ -70,7 +70,6 @@ p.intro {
background: none;
margin: 1.5em 0;
padding: 1.5em 15px 0;
-
}
p.intro strong {
color: #558e08;
@@ -93,6 +92,8 @@ p.intro strong {
}
.type-home .ui-content {
margin-top: 5px;
+ overflow: hidden;
+ position: relative;
}
.type-interior .ui-content {
padding-bottom: 0;
View
10 docs/about/features.html
@@ -29,15 +29,15 @@
<h2>Key features:</h2>
<ul>
<li><strong>Built on jQuery core</strong> for familiar and consistent jQuery syntax and minimal learning curve and leverages jQuery UI code and patterns.</li>
- <li><strong>Compatible with all major mobile, tablet, e-reader & desktop platforms</strong> - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, and all modern browsers with graded levels of support.</li>
+ <li><strong>Compatible with all major mobile, tablet, e-reader & desktop platforms</strong> - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook and all modern browsers with graded levels of support.</li>
<li><strong>Lightweight size</strong> and minimal image dependencies for speed.</li>
- <li><strong>Modular architecture</strong> for creating custom builds that are optimized to only include the features needed for a particular application</li>
+ <li><strong>Modular architecture</strong> for creating custom builds that are optimized to only include the features needed for a particular application.</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>Responsive design</strong> techniques and tools allow the same underlying codebase to automatically scale from smartphone to desktop-sized screens</li>
- <li><strong>Powerful Ajax-powered navigation system</strong> to enable animated page transitions while maintaining back button, bookmarking and and clean URLs though pushState. </li>
+ <li><strong>Responsive design</strong> techniques and tools allow the same underlying codebase to automatically scale from smartphone to desktop-sized screens.</li>
+ <li><strong>Powerful Ajax-powered navigation system</strong> to enable animated page transitions while maintaining back button, bookmarking and clean URLs through pushState.</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>Touch and mouse event support</strong> streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API. </li>
+ <li><strong>Touch and mouse event support</strong> streamline the process of supporting touch, mouse and cursor focus-based user input methods with a simple API. </li>
<li><strong>Unified UI widgets</strong> for common controls enhance native controls with touch-optimized, themable controls that are platform-agnostic and easy to use.</li>
<li><strong>Powerful theming framework</strong> and the <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller</a> application make highly-branded experiences easy to build.</li>
View
39 docs/api/data-attributes.html
@@ -70,8 +70,7 @@
<td>swatch letter (a-z)</td>
</tr>
</table>
- <p>Multiple buttons can be wrapped in a container with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the buttons to sit side-by-side.</p>
-
+ <p>Multiple buttons can be wrapped in a container with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the buttons to sit side-by-side. Add the <code>data-mini="true"</code> to get the mini/compact sized version for all the buttons that appear in the controlgroup. </p>
<h2><a href="../forms/checkboxes/">Checkbox</a></h2>
<p>Pairs of labels and inputs with <code>type="checkbox"</code> are auto-enhanced, no <code>data-role</code> required</p>
@@ -89,6 +88,7 @@
<td>swatch letter (a-z) - Added to the form element</td>
</tr>
</table>
+ <p>Multiple checkboxes can be wrapped in a container with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the checkboxes to sit side-by-side. Add the <code>data-mini="true"</code> to get the mini/compact sized version for all the checkboxes that appear in the controlgroup. </p>
<h2><a href="../content/content-collapsible.html">Collapsible</a></h2>
<p>A heading and content wrapped in a container with the <code>data-role="collapsible"</code></p>
@@ -103,7 +103,7 @@
</tr>
<tr>
<th>data-iconpos</th>
- <td><strong>left</strong> | right | top | bottom | notext</td>
+ <td><strong>left</strong> | right | top | bottom</td>
</tr>
<tr>
<th>data-mini</th>
@@ -145,8 +145,21 @@
</tr>
</table>
+ <h2><a href="../buttons/buttons-grouped.html">Controlgroup</a></h2>
+ <p>DIV or FIELDSET container with <code>data-role="controlgroup"</code>. Visually integrate multiple button-styled inputs of a single type (<a href="../forms/checkboxes/">checkboxes</a>, <a href="../buttons/buttons-types.html">link-based buttons</a>, <a href="../forms/radiobuttons/">radio buttons</a>, <a href="../forms/selects/">selects</a>) into a group. For grouping form checkboxes and radio buttons, the <code>fieldset</code> container is recommended inside a div container with the <code>data-role="fieldcontain"</code>, to improve label styling.</p>
+ <table>
+ <tr>
+ <th>data-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version for all items in the controlgroup</td>
+ </tr>
+ <tr>
+ <th>data-type</th>
+ <td>horizontal | <strong>vertical</strong> - For horizontal or vertical item alignment</td>
+ </tr>
+ </table>
+
<h2><a href="../pages/page-dialogs.html">Dialog</a></h2>
- <p>Page with <code>data-role="page"</code> linked to with <code>data-rel="dialog"</code> on the anchor.</p>
+ <p>Container with <code>data-role="dialog"</code> or linked to with <code>data-rel="dialog"</code> on the anchor.</p>
<table>
<tr>
<th>data-close-btn-text</th>
@@ -304,7 +317,7 @@
</tr>
<tr>
<th>data-transition</th>
- <td><strong>slide</strong> | slideup | slidedown | pop | fade | flip</td>
+ <td><strong>fade</strong> | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none</td>
</tr>
</table>
@@ -358,7 +371,7 @@
</tr>
<tr>
<th>data-icon</th>
- <td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
+ <td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | false</td>
</tr>
<tr>
<th>data-role</th>
@@ -369,22 +382,19 @@
<td>swatch letter (a-z) - can also be set on individual LIs</td>
</tr>
</table>
+ <p>The <code>data-icon</code> attribute is only applicable for a listview item, if it contains a link.</p>
+
<h2><a href="../toolbars/docs-navbar.html">Navbar</a></h2>
<p>A number of LIs wrapped in a container with <code>data-role="navbar"</code></p>
<table>
<tr>
- <th>data-icon</th>
- <td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
- </tr>
- <tr>
<th>data-iconpos</th>
<td>left | right | <strong>top</strong> | bottom | notext</td>
</tr>
- <tr>
- <th>data-theme</th>
- <td>swatch letter (a-z) - can also be set on individual LIs</td>
- </tr>
</table>
+ <p>To add icons to the navbar items, the <code>data-icon</code> attribute is used, specifying a standard mobile icon for each item.</p>
+ <p>Navbars inherit the theme-swatch from their parent container. Setting the <code>data-theme</code> attribute to a navbar is not supported. The <code>data-theme</code> attribute can be set individual to the links inside a navbar.</p>
+
<h2><a href="../pages/page-anatomy.html">Page</a></h2>
<p>Container with <code>data-role="page"</code></p>
<table>
@@ -442,6 +452,7 @@
<td>swatch letter (a-z) - Added to the form element</td>
</tr>
</table>
+ <p>Multiple radion buttons can be wrapped in a container with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the radio buttons to sit side-by-side. Add the <code>data-mini="true"</code> to get the mini/compact sized version for all the radio buttons that appear in the controlgroup. </p>
<h2><a href="../forms/selects/">Select</a></h2>
<p>All <code>select</code> form elements are auto-enhanced, no <code>data-role</code> required</p>
View
48 docs/api/methods.html
@@ -529,6 +529,54 @@
</dd>
+ <dt><code>$.mobile.path.get</code> (<em>method</em>)</dt>
+ <dd>Utility method for determining the directory portion of an URL. If the URL has no trailing slash, the last component of the URL is considered to be a file.</dd>
+ <dd>
+
+ <dl>
+ <dt><code>&#183;</code> Arguments</dt>
+ <dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>
+
+ <dt><code>&#183;</code> Return Value</dt>
+ <dd>This function returns the directory portion of a given URL.</dd>
+
+ </dl>
+ </dd>
+ <dd>Examples:
+ <pre>
+ <code>
+<strong>// Returns: http://foo.com/a/</strong>
+var dirName = $.mobile.path.get("http://foo.com/a/file.html");
+
+<strong>// Returns: http://foo.com/a/</strong>
+var dirName = $.mobile.path.get("http://foo.com/a/");
+
+<strong>// Returns: http://foo.com/a</strong>
+var dirName = $.mobile.path.get("http://foo.com/a");
+
+<strong>// Returns: //foo.com/a/</strong>
+var dirName = $.mobile.path.get("//foo.com/a/file.html");
+
+<strong>// Returns: /a/</strong>
+var dirName = $.mobile.path.get("/a/file.html");
+
+<strong>// Returns: ""</strong>
+var dirName = $.mobile.path.get("file.html");
+
+<strong>// Returns: /</strong>
+var dirName = $.mobile.path.get("/file.html");
+
+<strong>// Returns: ?a=1&amp;b=2</strong>
+var dirName = $.mobile.path.get("?a=1&amp;b=2");
+
+<strong>// Returns: foo</strong>
+var dirName = $.mobile.path.isAbsoluteUrl("#foo");
+
+
+ </code>
+ </pre>
+
+ </dd>
<dt><code>$.mobile.base</code> (<em>methods, properties</em>)</dt>
<dd>Utilities for working with generated base element. TODO: document as public API is finalized.</dd>
View
4 docs/buttons/buttons-grouped.html
@@ -52,7 +52,7 @@
<a href="index.html" data-role="button">Maybe</a>
</div>
- <p>Mini horizontal grouped buttons by adding <code>data-mini="true</code> to the controlgroup:</p>
+ <p>Mini horizontal grouped buttons by adding <code>data-mini="true"</code> to the controlgroup:</p>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
@@ -65,7 +65,7 @@
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
</div>
- <p>Mini horizontal grouped buttons with icons by adding <code>data-mini="true</code> to the controlgroup::</p>
+ <p>Mini horizontal grouped buttons with icons by adding <code>data-mini="true"</code> to the controlgroup::</p>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
View
2 docs/forms/checkboxes/index.html
@@ -96,7 +96,7 @@
<h2>Vertically grouped checkboxes</h2>
- <p>Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the fie.</p>
+ <p>Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the <code>fieldset</code>.</p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
View
2 docs/forms/search/index.html
@@ -42,7 +42,7 @@
<pre><code>
&lt;label for=&quot;search-basic&quot;&gt;Search Input:&lt;/label&gt;
-&lt;input type=&quot;search&quot; name=&quot;search&quot; id=&quot;searc-basic&quot; value=&quot;&quot; /&gt;
+&lt;input type=&quot;search&quot; name=&quot;search&quot; id=&quot;search-basic&quot; value=&quot;&quot; /&gt;
</code></pre>
<p>This will produce a basic search input. The default styles set the width of the input to 100% of the parent container and stack the label on a separate line.</p>
View
2 docs/lists/lists-inset.html
@@ -53,7 +53,7 @@
<li><a href="index.html">Schindler's List</a></li>
</ol>
- <h2>Divided, formatted content</h2>
+ <h2>Formatted content</h2>
<ul data-role="listview" data-inset="true">
<li><a href="index.html">
<h3>Stephen Weber</h3>
View
2 docs/toolbars/docs-navbar.html
@@ -27,7 +27,7 @@
<h2>Simple navbar</h2>
<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. There is also a <a href="footer-persist-a.html">persistent navbar</a> variation that works more like a tab bar that stays fixed as you navigate across pages.</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 the links to the active (selected) state, add <code>class="ui-btn-active"</code> to the anchor. In this example, we have a two-button navbar in the footer with the "One" item set to active:</p>
+ <p>A navbar is coded as an unordered list of links wrapped in a container element that has the <code> data-role="navbar"</code> attribute. To set one of the 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 with the "One" item set to active:</p>
<pre><code>
<strong>&lt;div data-role=&quot;navbar&quot;&gt;</strong>
View
4 docs/toolbars/footer-persist-d.html
@@ -24,8 +24,8 @@
<div data-role="content">
<div class="content-primary">
<h2>About persistent toolbars</h2>
- <p>These pages are a demo of persistent toolbars. Click on any of the links in the footer, and you'll see the page content transition, but both the persistent header and footer on these pages remains in place durning the animation to a new HTML page.</p>
- <p>To tell the framework to apply the persistent behavior, add a <code>data-id</code> attribute to the footer of all HTML pages in the navigation set to the same ID. It's that simple: if the page you're navigating to has a header or footer with the same <code>data-id</code>, the toolbars will appear fixed outside of the transition. Each of these pages has a different transition to test out how this works.</p>
+ <p>These pages are a demo of persistent toolbars. Click on any of the links in the footer, and you'll see the page content transition. But both, the persistent header and footer on these pages, remains in place during the animation to a new HTML page.</p>
+ <p>To tell the framework to apply the persistent behavior, add the same <code>data-id</code> attribute to the header and/or footer of all HTML pages in the navigation. It's that simple: If the page you're navigating to has a header or footer with the same <code>data-id</code> as the page you're navigating from, the toolbars will appear fixed outside of the transition. Each of the pages in this demo has a different transition to test out how this works.</p>
<p>Typically, the persistent toolbar technique will be combined with fixed positioning. In this example, the footer also has a navbar, like this:</p>
View
4 js/jquery.mobile.forms.button.js
@@ -55,7 +55,7 @@ $.widget( "mobile.button", $.mobile.widget, {
// Add ARIA role
this.button = $( "<div></div>" )
- .text( $el.text() || $el.val() )
+ [ $el.html() ? "html" : "text" ]( $el.html() || $el.val() )
.insertBefore( $el )
.buttonMarkup({
theme: o.theme,
@@ -132,7 +132,7 @@ $.widget( "mobile.button", $.mobile.widget, {
}
// Grab the button's text element from its implementation-independent data item
- $( this.button.data( 'buttonElements' ).text ).text( $el.text() || $el.val() );
+ $( this.button.data( 'buttonElements' ).text )[ $el.html() ? "html" : "text" ]( $el.html() || $el.val() );
}
});
View
7 js/jquery.mobile.transition.js
@@ -25,6 +25,7 @@ var createHandler = function( sequential ){
screenHeight = $.mobile.getScreenHeight(),
maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
+ toPreClass = " ui-page-pre-in",
toggleViewportClass = function(){
$.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + name );
},
@@ -72,7 +73,7 @@ var createHandler = function( sequential ){
startIn = function(){
- $to.addClass( $.mobile.activePageClass );
+ $to.addClass( $.mobile.activePageClass + toPreClass );
// Send focus to page as it is now display: block
$.mobile.focusPage( $to );
@@ -86,7 +87,9 @@ var createHandler = function( sequential ){
$to.animationComplete( doneIn );
}
- $to.addClass( name + " in" + reverseClass );
+ $to
+ .removeClass( toPreClass )
+ .addClass( name + " in" + reverseClass );
if( none ){
doneIn();
View
9 tests/unit/button/button_core.js
@@ -55,4 +55,13 @@
ok( $inherited.closest("div").hasClass( "ui-btn-up-a" ), "should inherit from page" );
ok( $explicit.closest("div").hasClass( "ui-btn-up-b" ), "should not inherit" );
});
+
+ test( "Enhanced button elements should allow for phrasing content.", function() {
+ var $htmlstring = $( "#contains-html" ),
+ $htmlval = $( "#val-contains-html" );
+
+ ok( $htmlstring.parent().find(".ui-btn-text").find("sup").length, "HTML contained within a button element should carry over to the enhanced version" );
+ ok( $htmlval.parent().find(".ui-btn-text").text().length > 1, "If the text is pulled from a button’s value, anything HTML-like should be disregarded." );
+ });
+
})( jQuery );
View
2 tests/unit/button/index.html
@@ -46,6 +46,8 @@ <h2 id="qunit-userAgent"></h2>
</form>
<button id="theme-check" value="foo"></button>
<button id="theme-check-explicit" value="foo" data-nstest-theme="b"></button>
+ <button id="contains-html">Supports <sup>phrasing content</sup></button>
+ <button id="val-contains-html" value="<fake markup>"></button>
</div>
</div>
</body>
View
19 tests/unit/buttonMarkup/buttonMarkup_core.js
@@ -62,7 +62,7 @@
ok( $mini.is('.ui-mini'), "Original element has data attribute, enhanced version recieves .ui-mini." );
ok( $minicontrol.is('.ui-mini'), "Controlgroup has data attribute and recieves .ui-mini.");
});
-
+
test( "Ensure icon positioning defaults to left, and can be overridden with “data-iconpos”", function() {
var posdefault = $("#iconpos1"),
posleft = $("#iconpos2"),
@@ -80,21 +80,16 @@
var $btn = $( "#hover-delay" );
- $.testHelper.sequence([
- function() {
- $btn.trigger( "vmousedown" );
- },
- function() {
+ $btn.trigger( "vmousedown" );
+
+ setTimeout(function() {
ok( $btn.attr("class").indexOf( "ui-btn-down" ) == -1, "button doesn't have the down class yet" );
- },
+ }, $.mobile.buttonMarkup.hoverDelay / 2);
- function() {
+ setTimeout(function() {
ok( $btn.attr("class").indexOf( "ui-btn-down" ) >= 0, "button has the down class yet" );
start();
- }
- // the value is split and some padding is added to make sure that the last check fires
- // after the hoverDelay has expired
- ], $.mobile.buttonMarkup.hoverDelay / 2 + 50 );
+ }, $.mobile.buttonMarkup.hoverDelay + 100 );
});
})(jQuery);
View
7 tests/unit/navigation/navigation_core.js
@@ -465,7 +465,7 @@
}]);
});
- asyncTest( "opening a dialog, closing it, moving forward, and opening it again, does not result in a dialog that needs to be closed twice ", function() {
+ asyncTest( "opening a dialog, closing it, moving forward, and opening it again, does not result in a dialog that needs to be closed twice", function() {
$.testHelper.pageSequence([
// setup
function(){ $.testHelper.openPage("#dialog-double-hash-test"); },
@@ -491,9 +491,10 @@
function() {
setTimeout( function() {
same($("#dialog-double-hash-test")[0], $.mobile.activePage[0], "should be back to the test page");
+ start();
}, 300);
- start();
- }]);
+ }
+ ]);
});
asyncTest( "going back from a dialog triggered from a dialog should result in the first dialog ", function(){

0 comments on commit 9d4d4de

Please sign in to comment.
Something went wrong with that request. Please try again.