mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
Merge branch 'master' of git://github.com/jquery/jquery-mobile into Issue-#2654
This commit is contained in:
Gabriele Rabbiosi
commit
7c34c5dc4b
91 changed files with 1983 additions and 661 deletions
4
Makefile
4
Makefile
|
|
@ -147,7 +147,7 @@ nightly: pull zip
|
|||
@@mkdir -p ${VER}
|
||||
|
||||
# Copy in the base stuff for the demos
|
||||
@@cp -r index.html themes experiments docs ${VER}/
|
||||
@@cp -r index.html themes experiments docs tools ${VER}/
|
||||
|
||||
# First change all the paths from super deep to the same level for JS files
|
||||
@@find ${VER} -type f -name '*.html' -exec sed -i 's|src="../../../js|src="js|g' {} \;
|
||||
|
|
@ -184,7 +184,7 @@ deploy: zip
|
|||
|
||||
# Deploy Demos to the jQueryMobile.com site
|
||||
@@mkdir -p ${VER}
|
||||
@@cp -r index.html themes experiments docs ${VER}/
|
||||
@@cp -r index.html themes experiments docs tools ${VER}/
|
||||
|
||||
@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../../../js|src="js|g' {} \;
|
||||
@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../../js|src="js|g' {} \;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,9 @@ A full, complete version and a minified, complete version of the jQuery Mobile J
|
|||
Submitting bugs
|
||||
===================================
|
||||
|
||||
If you think you've found a bug, please visit the Issue tracker (https://github.com/jquery/jquery-mobile/issues) and create an issue explaining the problem and expected result. Be sure to include any relevant information for reproducing the issue, such as the browser/device (with version #), and the version of the jQuery Mobile code you're running. It also helps a lot to make sure that the bug still exists on jquerymobile.com/test/, as it's possible we may have fixed it already! It is also best to include code to reproduce the bug.
|
||||
If you think you've found a bug, please visit the Issue tracker (https://github.com/jquery/jquery-mobile/issues) and create an issue explaining the problem and expected result. Be sure to include any relevant information for reproducing the issue, such as the browser/device (with version #), and the version of the jQuery Mobile code you're running. It also helps a lot to make sure that the bug still exists on http://jquerymobile.com/test/, as it's possible we may have fixed it already!
|
||||
|
||||
It is also best to include code to reproduce the bug. To do that please use [jsbin](http://jsbin.com) or [jsfiddle](http://jsfiddle.net) and include a link to it in the ticket.
|
||||
|
||||
|
||||
Submitting patches
|
||||
|
|
|
|||
|
|
@ -5,12 +5,11 @@ cobblers, shoes,
|
|||
*/
|
||||
|
||||
body { background: #dddddd; }
|
||||
|
||||
.ui-mobile .type-home .ui-content { margin: 0; background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; }
|
||||
.ui-mobile #jqm-homeheader { padding: 40px 10px 0; text-align: center; margin: 0 auto; }
|
||||
.ui-mobile #jqm-homeheader h1 { margin: 0 0 ; }
|
||||
.ui-mobile #jqm-homeheader p { margin: .3em 0 0; line-height: 1.3; font-size: .9em; font-weight: bold; color: #666; }
|
||||
.ui-mobile #jqm-version { text-indent: -99999px; background: url(../images/version.png) top right no-repeat; width: 119px; height: 122px; overflow: hidden; position: absolute; z-index: 50; top: 0; right: 0; }
|
||||
.ui-mobile #jqm-version { text-indent: -99999px; background: url(../images/version.png) top right no-repeat; width: 119px; height: 122px; overflow: hidden; position: absolute; z-index: 50; top: -11px; right: 0; }
|
||||
.ui-mobile .jqm-themeswitcher { margin: 10px 25px 10px 10px; }
|
||||
|
||||
h2 { margin:1.2em 0 .4em 0; }
|
||||
|
|
|
|||
|
|
@ -64,7 +64,12 @@
|
|||
<h2>Orientation change event</h2>
|
||||
<dl>
|
||||
<dt><code>orientationchange</code></dt>
|
||||
<dd>Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an <code>orientation</code> property equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationChange is not natively supported.</dd>
|
||||
<dd>Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an <code>orientation</code> property equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationChange is not natively supported, or when <code>$.mobile.orientationChangeEnabled</code> is set to false.</dd>
|
||||
<div class="ui-body ui-body-e">
|
||||
<h4>orientationchange timing</h4>
|
||||
|
||||
The timing of the <code>orientationchange</code> with relation to the change of the client height and width is different between browsers, though the current implementation will give you the correct value for <code>event.orientation</code> derived from <code>window.orientation</code>. This means that if your bindings are dependent on the height and width values you may want to disable orientationchange all together with <code>$.mobile.orientationChangeEnabled = false</code> to let the fallback resize code trigger your bindings.
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<h2>Scroll events</h2>
|
||||
|
|
@ -226,7 +231,7 @@ $( document ).bind( "pageloadfailed", function( event, data ){
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>options</code> (object)
|
||||
<li><code>options</code> (object)
|
||||
<ul>
|
||||
<li>This object contains the options that were passed into $.mobile.loadPage().</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ $(document).bind("mobileinit", function(){
|
|||
</code>
|
||||
</pre>
|
||||
|
||||
<p>To quickly preview these global configuration options in action, check out the <a href="../config/index.html">config test pages</a>.</p>
|
||||
|
||||
<h2>Configurable options</h2>
|
||||
<p>The following defaults are configurable via the <code>$.mobile</code> object:</p>
|
||||
|
|
@ -98,15 +99,17 @@ $(document).bind("mobileinit", function(){
|
|||
<dt><code>ajaxEnabled</code> <em>boolean</em>, default: true</dt>
|
||||
<dd>jQuery Mobile will automatically handle link clicks and form submissions through Ajax, when possible. If false, url hash listening will be disabled as well, and urls will load as regular http requests.</dd>
|
||||
|
||||
|
||||
<dt><code>hashListeningEnabled</code> <em>boolean</em>, default: true</dt>
|
||||
<dd>jQuery Mobile will automatically listen and handle changes to the location.hash. Disabling this will prevent jQuery Mobile from handling hash changes, which allows you to handle them yourself, or simply to use simple deep-links within a document that scroll to a particular ID.</dd>
|
||||
|
||||
<dt><code>pushStateEnabled</code> <em>boolean</em>, default: true</dt>
|
||||
<dd>Enhancement to use <code>history.replaceState</code> in supported browsers, to convert the hash-based Ajax URL into the full document path. Note that we <a href="../pages/page-navmodel.html">recommend</a> disabling this feature if Ajax is disabled or if extensive use of external links are used.</dd>
|
||||
|
||||
<dt><code>defaultPageTransition</code> <em>string</em>, default: 'slide'</dt>
|
||||
<dd>Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.</dd>
|
||||
|
||||
<dt><code>touchOverflowEnabled</code> <em>boolean</em>, default: false</dt>
|
||||
<dd>Enable pages to have self-contained native scrolling and fixed toolbars in devices that support the <code>overflow-scrolling: touch; </code> property.</dd>
|
||||
<dd>Enable smoother page transitions and true fixed toolbars in devices that support both the <code>overflow:</code> and <code>overflow-scrolling: touch; </code> CSS properties.</dd>
|
||||
|
||||
<dt><code>defaultDialogTransition</code> <em>string</em>, default: 'pop'</dt>
|
||||
<dd>Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions by default.</dd>
|
||||
|
|
|
|||
|
|
@ -51,11 +51,11 @@
|
|||
<p>The default theme contains the following five Bar styles:</p>
|
||||
|
||||
<div class="swatch-preview">
|
||||
<div class="ui-bar ui-bar-a">Bar A</div>
|
||||
<div class="ui-bar ui-bar-b">Bar B</div>
|
||||
<div class="ui-bar ui-bar-c">Bar C</div>
|
||||
<div class="ui-bar ui-bar-d">Bar D</div>
|
||||
<div class="ui-bar ui-bar-e">Bar E</div>
|
||||
<div class="ui-bar ui-bar-a">Bar A - <a href="#" data-role="none" class="ui-link">Link</a></div>
|
||||
<div class="ui-bar ui-bar-b">Bar B - <a href="#" data-role="none" class="ui-link">Link</a></div>
|
||||
<div class="ui-bar ui-bar-c">Bar C - <a href="#" data-role="none" class="ui-link">Link</a></div>
|
||||
<div class="ui-bar ui-bar-d">Bar D - <a href="#" data-role="none" class="ui-link">Link</a></div>
|
||||
<div class="ui-bar ui-bar-e">Bar E - <a href="#" data-role="none" class="ui-link">Link</a></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>
|
||||
|
|
@ -66,11 +66,11 @@
|
|||
<p>The default theme also includes color swatch values for use in content blocks, designed to coordinate with the header color swatches in the theme. </p>
|
||||
|
||||
<div class="swatch-preview">
|
||||
<div class="ui-body ui-body-a">Block A</div>
|
||||
<div class="ui-body ui-body-b">Block B</div>
|
||||
<div class="ui-body ui-body-c">Block C</div>
|
||||
<div class="ui-body ui-body-d">Block D</div>
|
||||
<div class="ui-body ui-body-e">Block E</div>
|
||||
<div class="ui-body ui-body-a">Block A - <a href="#">Link</a></div>
|
||||
<div class="ui-body ui-body-b">Block B - <a href="#">Link</a></div>
|
||||
<div class="ui-body ui-body-c">Block C - <a href="#">Link</a></div>
|
||||
<div class="ui-body ui-body-d">Block D - <a href="#">Link</a></div>
|
||||
<div class="ui-body ui-body-e">Block E - <a href="#">Link</a></div>
|
||||
</div><!-- end swatch-bars -->
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -54,16 +54,16 @@
|
|||
<button>Button element</button>
|
||||
|
||||
<p><strong>Input type="button"</strong> based button:</p>
|
||||
<input type="button" value="Input type=button" />
|
||||
<input type="button" value="buttonBtn" />
|
||||
|
||||
<p><strong>Input type="submit"</strong> based button:</p>
|
||||
<input type="submit" value="Input type=submit" />
|
||||
<input type="submit" value="submitBtn" />
|
||||
|
||||
<p><strong>Input type="reset"</strong> based button:</p>
|
||||
<input type="reset" value="Input type=reset" />
|
||||
<input type="reset" value="resetBtn" />
|
||||
|
||||
<p><strong>Input type="image"</strong> based button:</p>
|
||||
<input type="image" value="Input type=image" />
|
||||
<input type="image" value="imageBtn" />
|
||||
|
||||
</div><!--/content-primary -->
|
||||
|
||||
|
|
|
|||
40
docs/config/dialogTransition.html
Normal file
40
docs/config/dialogTransition.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Configuration</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../js/jquery.js"></script>
|
||||
<script>
|
||||
$(document).bind("mobileinit", function(){
|
||||
$.mobile.defaultDialogTransition = 'flip';
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../_assets/js/jqm-docs.js"></script>
|
||||
<script src="../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-index">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Config applied</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>defaultDialogTransition is now "flip"</h2>
|
||||
<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
|
||||
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
|
||||
<a href="../pages/dialog.html" data-role="button" data-rel="dialog">Or open a basic dialog</a>
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
84
docs/config/index.html
Normal file
84
docs/config/index.html
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Configuration</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../js/jquery.js"></script>
|
||||
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../_assets/js/jqm-docs.js"></script>
|
||||
<script src="../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-index">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Pages</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<h2>Global config tests</h2>
|
||||
<p>The following links will cause a full page refresh so that the global options configuration can take effect. Each link below will tweak a different option for quick testing.</p>
|
||||
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li>
|
||||
<a href="pushState.html" data-ajax="false">
|
||||
<h3>pushStateEnabled - False</h3>
|
||||
<p>Enhancement to use history.replaceState in supported browsers, to convert the hash-based Ajax URL into the full document path. </p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="touchOverflow.html" data-ajax="false">
|
||||
<h3>touchOverflowEnabled - True</h3>
|
||||
<p>Enable smoother page transitions and true fixed toolbars in devices that support both the overflow: and overflow-scrolling: touch; CSS properties.</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="pageTransition.html" data-ajax="false">
|
||||
<h3>defaultPageTransition - Fade</h3>
|
||||
<p>Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="dialogTransition.html" data-ajax="false">
|
||||
<h3>defaultDialogTransition - Flip</h3>
|
||||
<p>Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions by default.</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="minScrollBack.html" data-ajax="false">
|
||||
<h3>minScrollBack - 999</h3>
|
||||
<p>Minimum scroll distance that will be remembered when returning to a page.</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="loadingMessage.html" data-ajax="false">
|
||||
<h3>loadingMessage - false</h3>
|
||||
<p>Set the text that appears when a page is loading. If set to false, the message will not appear at all.</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="pageLoadErrorMessage.html" data-ajax="false">
|
||||
<h3>pageLoadErrorMessage - "Yikes, we broke the internet!"</h3>
|
||||
<p>Set the text that appears when a page fails to load through Ajax.</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="jq17b1.html" data-ajax="false">
|
||||
<h3>jQuery core version 1.7 Beta 1</h3>
|
||||
<p>Test the docs with the latest jQuery core version</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
34
docs/config/jq17b1.html
Normal file
34
docs/config/jq17b1.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Configuration</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script src="http://code.jquery.com/jquery-1.7b1.js"></script>
|
||||
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../_assets/js/jqm-docs.js"></script>
|
||||
<script src="../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-index">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>jQuery version</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>jQuery core version 1.7 Beta 1</h2>
|
||||
<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
|
||||
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
|
||||
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
40
docs/config/loadingMessage.html
Normal file
40
docs/config/loadingMessage.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Configuration</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../js/jquery.js"></script>
|
||||
<script>
|
||||
$(document).bind("mobileinit", function(){
|
||||
$.mobile.loadingMessage = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../_assets/js/jqm-docs.js"></script>
|
||||
<script src="../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-index">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Config applied</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>loadingMessage is now disabled</h2>
|
||||
<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
|
||||
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
|
||||
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
40
docs/config/minScrollBack.html
Normal file
40
docs/config/minScrollBack.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Configuration</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../js/jquery.js"></script>
|
||||
<script>
|
||||
$(document).bind("mobileinit", function(){
|
||||
$.mobile.minScrollBack = 999;
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../_assets/js/jqm-docs.js"></script>
|
||||
<script src="../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-index">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Config applied</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>minScrollBack is now set to 999 (disabled)</h2>
|
||||
<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
|
||||
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
|
||||
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
41
docs/config/pageLoadErrorMessage.html
Normal file
41
docs/config/pageLoadErrorMessage.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Configuration</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../js/jquery.js"></script>
|
||||
<script>
|
||||
$(document).bind("mobileinit", function(){
|
||||
$.mobile.pageLoadErrorMessage = 'Yikes, we broke the internet!';
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../_assets/js/jqm-docs.js"></script>
|
||||
<script src="../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-index">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Config applied</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>pageLoadErrorMessage is now "Yikes, we broke the internet!"</h2>
|
||||
<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
|
||||
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
|
||||
<a href="broken.html" data-role="button" data-rel="dialog">Or try this broken link</a>
|
||||
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
40
docs/config/pageTransition.html
Normal file
40
docs/config/pageTransition.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Configuration</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../js/jquery.js"></script>
|
||||
<script src="../_assets/js/jqm-docs.js"></script><!-- Moving the docs JS up here because it was overriding with my override -->
|
||||
|
||||
<script>
|
||||
$(document).bind("mobileinit", function(){
|
||||
$.mobile.defaultPageTransition = 'fade';
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-index">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Config applied</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>defaultPageTransition is now "fade"</h2>
|
||||
<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
|
||||
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
40
docs/config/pushState.html
Normal file
40
docs/config/pushState.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Configuration</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../js/jquery.js"></script>
|
||||
<script>
|
||||
$(document).bind("mobileinit", function(){
|
||||
$.mobile.pushStateEnabled = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../_assets/js/jqm-docs.js"></script>
|
||||
<script src="../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-index">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Config applied</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>pushStateEnabled is now disabled</h2>
|
||||
<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
|
||||
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
|
||||
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
40
docs/config/touchOverflow.html
Normal file
40
docs/config/touchOverflow.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Configuration</title>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script src="../../js/jquery.js"></script>
|
||||
<script>
|
||||
$(document).bind("mobileinit", function(){
|
||||
$.mobile.touchOverflowEnabled = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
||||
<script src="../_assets/js/jqm-docs.js"></script>
|
||||
<script src="../../js/"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" class="type-index">
|
||||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Config applied</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>touchOverflowEnabled is now active</h2>
|
||||
<p>To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.</p>
|
||||
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
|
||||
|
||||
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
<p>Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>
|
||||
|
||||
<code>
|
||||
<fieldset data-role="controlgroup" <strong>data-type="horizontal"</strong> data-role="fieldcontain">
|
||||
<fieldset data-role="controlgroup" <strong>data-type="horizontal"</strong>>
|
||||
</code>
|
||||
|
||||
<p>The framework will float the labels so they sit side-by-side on a line, hide the checkbox icons and only round the left and right edges of the group.</p>
|
||||
|
|
|
|||
|
|
@ -30,13 +30,13 @@
|
|||
<li>pagebeforechange
|
||||
<ul>
|
||||
<li>Fired off before any page loading or transition.</li>
|
||||
<li>NOTE: This event was formally known as "beforechangepage".</li>
|
||||
<li>NOTE: This event was formerly known as "beforechangepage".</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>pagechange
|
||||
<ul>
|
||||
<li>Fired off after all page loading and transitions.</li>
|
||||
<li>NOTE: this event was formally known as "changepage".</li>
|
||||
<li>NOTE: this event was formerly known as "changepage".</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>pagechangefailed
|
||||
|
|
|
|||
|
|
@ -39,7 +39,9 @@
|
|||
|
||||
<h2>Linking without Ajax</h2>
|
||||
|
||||
<p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-ajax="false"</code> or <code>target</code> attributes will not be loaded with Ajax. Instead, these links and will cause a full page refresh with no animated transition. Both attributes have the same effect, but different semanic meaning. <code>rel="external"</code> should be used when linking to another site or domain, while <code>data-ajax="false"</code> is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.</p>
|
||||
<p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-ajax="false"</code> or <code>target</code> attributes will not be loaded with Ajax. Instead, these links and will cause a full page refresh with no animated transition. Both attributes have the same effect, but different semantic meaning: <code>rel="external"</code> should be used when linking to another site or domain, while <code>data-ajax="false"</code> is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.</p>
|
||||
|
||||
<p>Note: When building a jQuery Mobile application where the Ajax navigation system is disabled globally or frequently disabled on individual links, we recommend disabling the <code>$.mobile.pushStateEnabled</code> global <a href="../api/globalconfig.html">configuration option</a> to avoid inconsistent navigation behavior in some browsers.</p>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -43,11 +43,16 @@
|
|||
|
||||
<p>Once the referenced page is present in the DOM, the <code>$.mobile.changePage()</code> function applies a transition between the current active page and the new page. Page transitions happen through adding and removing classes that apply CSS animations. For example, in a slide-left transition, the exiting page is given the classes "slideleft" and "out", and the entering page is given the classes <code>"slideleft"</code> and <code>"in"</code>, as well as a class of <code>"ui-page-active"</code> to mark it as the new "active" page being viewed. When the animation is complete, the <code>"in"</code> and <code>"out"</code> classes are removed, and the exited page loses its <code>"ui-page-active"</code> class.</p>
|
||||
|
||||
<h2>replaceState plugin</h2>
|
||||
<h2>pushState plugin</h2>
|
||||
|
||||
<p>For those browsers that support <code>history.pushState</code> and <code>history.replaceState</code> an additional optional plugin is provided that will convert the hash change urls mentioned in the previous section into the hashless equivelant. It's important to note that it does indeed convert the hash urls by using <code>history.replaceState</code> as the <code>history.pushState</code> does not produce the desired result in some mobile browsers.</p>
|
||||
<p>There is an optional feature is converts the longer, hash-based URLs mentioned in the previous section into the full document path which is cleaner and makes the Ajax tracking transparent in the URL structure. This is built as an enhancement on top of the hash-based URL system for Ajax links. Note that despite the name, this feature technically converts hash-based urls by using <code>history.replaceState</code> (not <code>history.pushState</code>) in the current release because this works more reliably across our target platforms. For browsers that do not support <code>history.replaceState</code>, or if this feature is disabled, hash-based URLs will be used instead. </p>
|
||||
|
||||
<p>Since the plugin initializes when the DOM is fully loaded you can enable and disable it manually by setting <code>$.mobile.pushStateEnabled</code> anytime before.</p>
|
||||
<p>Since the plugin initializes when the DOM is fully loaded you can enable and disable it manually by setting <code>$.mobile.pushStateEnabled</code> global <a href="../api/globalconfig.html">configuration option</a> to <code>false</code> anytime before document ready.</p>
|
||||
|
||||
<div class="ui-body ui-body-e">
|
||||
<h4 style="margin:.5em 0">Important: rel="external" and $.mobile.ajaxEnabled=false</h4>
|
||||
<p>Slightly different implementations of the replaceState API in various browsers can cause odd behavior in specific scenarios. For example, some browser implementations (including desktop browsers) implement the <code>popstate</code> event differently when linking externally and moving back to a page onto which state has already been pushed/replaced. When building a jQuery Mobile application where the ajax navigation is being explicitly disabled, either though the frequent use of <code>rel="external"</code> on links or by disabling Ajax navigation completely via the <code>$.mobile.ajaxEnabled=false</code>, we recommend disabling the pushState feature to fall back to the hash based navigation for more consistent behavior.</p>
|
||||
</div>
|
||||
|
||||
<h2>changePage</h2>
|
||||
|
||||
|
|
@ -57,7 +62,7 @@
|
|||
|
||||
<h2>Base element</h2>
|
||||
|
||||
<p>Another key ingredient to jQuery Mobile's page navigation model is the <code>base</code> element, which is injected into the <code>head</code> and modified on every page change to ensure that any assets (css,images,js,etc) referenced on that page will be requested from a proper path. In browsers that don't support dynamic updates to the <code>base</code> element (such as Firefox 3.6), jQuery Mobile loops through all of the referenced assets on the page and prefixes their href and src attributes with the base path.</p>
|
||||
<p>Another key ingredient to jQuery Mobile's page navigation model is the <code>base</code> element, which is injected into the <code>head</code> and modified on every page change to ensure that any assets (images, CSS, JS, etc.) referenced on that page will be requested from a proper path. In browsers that don't support dynamic updates to the <code>base</code> element (such as Firefox 3.6), jQuery Mobile loops through all of the referenced assets on the page and prefixes their href and src attributes with the base path.</p>
|
||||
|
||||
|
||||
<h2>Developer explanation of base url management:</h2>
|
||||
|
|
@ -67,11 +72,11 @@
|
|||
<p><strong>TODO: update description of internal base and urlHistory objects</strong></p>
|
||||
|
||||
<h2>Data-url storage</h2>
|
||||
|
||||
<p>The nav model maintains a data-url attribute on all data-role=”page” elements. This data-url attribute is used to track the origin of the page element. Pages embedded within the main application document all have their data-url parameter set to the ID of the @data-role="page" element. The only exception to this is the first-page in the document. The first-page is special because it can be addressed by its @id if it has one, or by the document or base URL (with no hash fragment).</p>
|
||||
|
||||
<p>The nav model maintains a data-url attribute on all data-role="page" elements. This data-url attribute is used to track the origin of the page element. Pages embedded within the main application document all have their data-url parameter set to the ID of the @data-role="page" element. The only exception to this is the first-page in the document. The first-page is special because it can be addressed by its @id if it has one, or by the document or base URL (with no hash fragment).</p>
|
||||
|
||||
<p>Pages that are external to the application document get pulled in dynamically via ajax, their data-url is set to the site relative path to the external page. If you are running in an environment where loading an external page from a different domain is allowed, then the data-url is set to the absolute URL.</p>
|
||||
|
||||
|
||||
<h2>Auto-generated pages and sub-hash urls</h2>
|
||||
|
||||
<p>Some plugins may choose to dynamically break a page's content into separate navigable pages, which can then be reached via deep links. One example of this would be the Listview plugin, which will break a nested UL (or OL) into separate pages, which are each given a data-url attribute so they can be linked to like any normal "page" in jQuery Mobile. However, in order to link to these pages, the page that generates them must first be requested from the server. To make this work, pages that are auto-generated by plugins use the following special data-url structure:
|
||||
|
|
@ -106,6 +111,7 @@
|
|||
<li><p>Any unique assets referenced by pages in a jQuery Mobile-driven site should be placed inside the "page" element (the element with a data-role attribute of "page"). For example, links to styles and scripts that are specific to a particular page can be referenced inside that div. However, a better approach is to use jQuery Mobile's page events to trigger specific scripting when certain pages load. <strong>Note: </strong> you can return a page from the server with a data-url already specified in the markup, and jQuery Mobile will use that for the hash update. This allows you to ensure directory paths resolve with a trailing slash and will therefore be used in the base url path for future requests.</p></li>
|
||||
<li><p>Conversely, any non-unique assets (those used site-wide) should be referenced in the <code><head></code> section of an HTML document, or at the very least, outside of the "page" element, to prevent running scripts more than once.</p></li>
|
||||
<li><p>The "ui-page" key name used in sub-hash url references can be set to any value you'd like, so as to blend into your URL structure. This value is stored in <code>jQuery.mobile.subPageUrlKey</code>.</p></li>
|
||||
<li><p>When traveling back to a previously loaded jQuery Mobile document from an external <b>or</b> internal document with the push state plugin enabled, some browsers load and trigger the popstate event on the wrong document or for the wrong reasons (two edge cases recorded so far). If you are regularly linking to external documents and find the application behaving eratically try disabling pushstate support.</p></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -22,27 +22,39 @@
|
|||
|
||||
<div data-role="content">
|
||||
<div class="content-primary">
|
||||
<p>Since jQuery Mobile uses an Ajax-powered navigation system, there are a few helpful things to know when writing scripts that interact with the page and navigation model. You can explore the mobile API in more detail by reading up on <a href="../api/globalConfig.html">global configuration options</a>, <a href="../api/events.html">events</a>, and <a href="../api/methods.html">methods</a> or dig into the technical details of the <a href="page-navmodel.html">Ajax navigation model</a>.</p>
|
||||
<p>Since jQuery Mobile uses an Ajax-powered navigation system, there are a few helpful things to know when writing scripts that manipulate your content. You can explore the mobile API in more detail by reading up on <a href="../api/globalConfig.html">global configuration options</a>, <a href="../api/events.html">events</a>, and <a href="../api/methods.html">methods</a> or dig into the technical details of the <a href="page-navmodel.html">Ajax navigation model</a>.</p>
|
||||
|
||||
<h2>Scripts & styles in the head</h2>
|
||||
<h2>Scripts & styles in the head</h2>
|
||||
|
||||
<p>When you click a link in jQuery Mobile, the Ajax navigation system uses the link's href to formulate an Ajax request. Although the full page is loaded with Ajax, the framework only pulls in the <em>contents of the page</em>, and ignores anything in the <code>head</code> except for title tag contents.</p>
|
||||
<p> This means that any scripts or styles in the <code>head</code> of the page won't have any effect <em>when the page is loaded via Ajax</em>. The same page will work as expected if you were to load a page directly but both scenarios need to be considered. The reason that the <code>head</code> is ignored for Ajax page content: it's just too complex. The framework would need to compare and reconcile the contents of multiple page <code>head</code> elements as they are loaded into the DOM so we leave this task to the developer.</p>
|
||||
<p>When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the <em>contents of the response's <code>body</code> element (or more specifically the <code>data-role="page"</code> element, if it's provided)</em>, meaning nothing in the <code>head</code> of the page will be used (with the exception of the page title, which is fetched specifically).</p>
|
||||
|
||||
<p>The simplest approach is to add the same set of stylesheets and scripts into all your pages. If you need to load in specific scripts or styles for a particular page, bind to the <code>pagecreate</code> event (details below) to run the necessary code when a specific page ID is created. Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.</p>
|
||||
<p> This means that any scripts and styles referenced the <code>head</code> of a page won't have any effect <em>when a page is loaded via Ajax</em>, but they <strong>will execute if the page is requested normally via HTTP</strong>. When scripting jQuery Mobile sites, both scenarios need to be considered. The reason that the <code>head</code> of a page is ignored when requested via Ajax is that the potential of re-executing the same JavaScript is very high (it's common to reference the same scripts in every page of a site). Due to the complexity of attempting to work around that issue, we leave the task of executing page-specific scripts to the developer, and assume <code>head</code> scripts are only expected to execute once per browsing session.</p>
|
||||
|
||||
<p>The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the <code>pagecreate</code> event (details below) to run necessary code when a specific page is created (which can be determined by its <code>id</code> attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.</p>
|
||||
|
||||
<p>Another approach for page-specific scripting would be to include scripts at the end of the <code>body</code> element. If you include your custom scripting this way, be aware that these scripts will execute when that page is loaded via Ajax or regular HTTP, so if these scripts are the same on every page, you'll likely run into problems. If you're including scripts this way, we'd recommend enclosing your page content in a <code>data-role="page"</code> element, and placing scripts that are referenced on every page outside of that element. Scripts that are unique to that page can be placed in that element, to ensure that they execute when the page is fetched via Ajax.</p>
|
||||
|
||||
<h2>pagecreate = DOM ready</h2>
|
||||
|
||||
<p>The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created by the Ajax navigation system, you must bind to the <a href="../api/events.html"><code>pagecreate</code></a> event. </p>
|
||||
<p>The <code>pagecreate</code> event is triggered on the page being initialized, right after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.</p>
|
||||
<p>One of the first things people learn in jQuery is to use the $(document).ready() function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the <code>onload</code> event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the <a href="../api/events.html"><code>pagecreate</code></a> event. </p>
|
||||
|
||||
<p>The <code>pagecreate</code> event is triggered on a page when it is initialized, right after initialization occurs. Most of jQuery Mobile's official widgets auto-initialize themselves based on this event, and you can set up your code to do the same.</p>
|
||||
<pre><code>
|
||||
$('#aboutPage').live('pagecreate',function(event){
|
||||
alert('This page was just enhanced by jQuery Mobile!');
|
||||
$( document ).delegate( "pagecreate", "#aboutPage", function() {
|
||||
alert('A page with an ID of "aboutPage" was just created by jQuery Mobile!');
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
<p>If you'd like to manipulate a page's contents <em>before</em> the pagecreate event fires and widgets are auto-initialized, you can instead bind to the <code>pagebeforecreate</code> event:</p>
|
||||
|
||||
<pre><code>
|
||||
$( document ).delegate( "pagebeforecreate", "#aboutPage", function() {
|
||||
alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
<h2>Changing pages</h2>
|
||||
<p>If you need to change the current page with JavaScript, use the <a href="../api/methods.html"><code>changePage</code></a> method. There are a lot of methods and properties that you can set when changing pages, but here are two simple examples:</p>
|
||||
<p>If you want to change the current active page with JavaScript, you can use the <a href="../api/methods.html"><code>changePage</code></a> method. There are a lot of methods and properties that you can set when changing pages, but here are two simple examples:</p>
|
||||
<pre><code>
|
||||
<strong>//transition to the "about us" page with a slideup transition</strong>
|
||||
$.mobile.changePage( "about/us.html", { transition: "slideup"} );
|
||||
|
|
|
|||
|
|
@ -24,35 +24,32 @@
|
|||
<div class="content-primary">
|
||||
<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. </p>
|
||||
|
||||
<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 nav bar</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 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-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="a.html" class="ui-btn-active">One</a></li>
|
||||
<li><a href="b.html">Two</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
<strong><div data-role="navbar"></strong>
|
||||
<ul>
|
||||
<li><a href="a.html" class="ui-btn-active">One</a></li>
|
||||
<li><a href="b.html">Two</a></li>
|
||||
</ul>
|
||||
<strong></div><!-- /navbar --></strong>
|
||||
</code></pre>
|
||||
|
||||
<p>The navbar items are set to divide the space evenly so in this case, each button is 1/2 the width of the browser window:</p>
|
||||
|
||||
<div data-role="footer">
|
||||
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="#" class="ui-btn-active">One</a></li>
|
||||
<li><a href="#">Two</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
|
||||
<p>Adding a third item will automatically make each button 1/3 the width of the browser window:</p>
|
||||
|
||||
<div data-role="footer">
|
||||
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="#" class="ui-btn-active">One</a></li>
|
||||
|
|
@ -60,11 +57,11 @@
|
|||
<li><a href="#">Three</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
|
||||
<p>Adding a fourth more item will automatically make each button 1/4 the width of the browser window:</p>
|
||||
|
||||
<div data-role="footer">
|
||||
|
||||
<div data-role="navbar" data-grid="c">
|
||||
<ul>
|
||||
<li><a href="#" class="ui-btn-active">One</a></li>
|
||||
|
|
@ -73,11 +70,11 @@
|
|||
<li><a href="#">Four</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
|
||||
<p>The navbar maxes out with 5 items, each 1/5 the width of the browser window:</p>
|
||||
|
||||
<div data-role="footer">
|
||||
|
||||
<div data-role="navbar" data-grid="d">
|
||||
<ul>
|
||||
<li><a href="#" class="ui-btn-active">One</a></li>
|
||||
|
|
@ -87,11 +84,10 @@
|
|||
<li><a href="#">Five</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
|
||||
<p>If more than 5 items are added, the navbar will simply wrap to multiple lines:</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="#" class="ui-btn-active">One</a></li>
|
||||
|
|
@ -106,17 +102,14 @@
|
|||
<li><a href="#">Ten</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
<p>As a fallback, navbars with 1 item will simply render as 100%.</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="#" class="ui-btn-active">One</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
<h2>Navbars in headers</h2>
|
||||
|
||||
|
|
@ -135,9 +128,33 @@
|
|||
</div><!-- /navbar -->
|
||||
</div><!-- /header -->
|
||||
|
||||
<h2>Navbars in footers</h2>
|
||||
|
||||
<p>If you want to add a navbar to the bottom of the page so it acts more like a tab bar, simply wrap the navbar in a container with a <code>data-role="footer"</code></p>
|
||||
<pre><code>
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="#">One</a></li>
|
||||
<li><a href="#">Two</a></li>
|
||||
<li><a href="#">Three</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
</code></pre>
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="#">One</a></li>
|
||||
<li><a href="#">Two</a></li>
|
||||
<li><a href="#">Three</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
<h2>Icons in navbars</h2>
|
||||
|
||||
<p>Icons can be added to navbar items by adding the <code> data-icon</code> attribute specifying a <a href="../buttons/buttons-icons.html">standard mobile icon</a> to each anchor.</p>
|
||||
<p>Icons can be added to navbar items by adding the <code> data-icon</code> attribute specifying a <a href="../buttons/buttons-icons.html">standard mobile icon</a> to each anchor. By default icons are added above the text (<code>data-iconpos="top"</code>). The following examples add icons to a navbar in a footer.</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
|
|
@ -149,14 +166,41 @@
|
|||
</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>The icon position is set <em>on the navbar container</em> instead of for individual links within for visual consistency. For example, to place the icons below the labels, add the <code> data-iconpos="bottom"</code> attribute to navbar container.</p>
|
||||
<pre><code>
|
||||
<div data-role="navbar" <strong>data-iconpos="bottom"</strong>>
|
||||
</code></pre>
|
||||
<p>This will result in a bottom icon alignment:</p>
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar" data-iconpos="bottom">
|
||||
<ul>
|
||||
<li><a href="#" data-icon="grid">Summary</a></li>
|
||||
<li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
|
||||
<li><a href="#" data-icon="gear">Setup</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
<p>The icon position can be set to <code>data-iconpos="left"</code>:</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<div data-role="navbar" data-iconpos="left">
|
||||
<ul>
|
||||
<li><a href="#" data-icon="grid" data-iconpos="top">Summary</a></li>
|
||||
<li><a href="#" data-icon="star" class="ui-btn-active" data-iconpos="top">Favs</a></li>
|
||||
<li><a href="#" data-icon="gear" data-iconpos="top">Setup</a></li>
|
||||
<li><a href="#" data-icon="grid">Summary</a></li>
|
||||
<li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
|
||||
<li><a href="#" data-icon="gear">Setup</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
||||
<p>Or the icon position can be set to <code>data-iconpos="right"</code>:</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar" data-iconpos="right">
|
||||
<ul>
|
||||
<li><a href="#" data-icon="grid">Summary</a></li>
|
||||
<li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
|
||||
<li><a href="#" data-icon="gear">Setup</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
|
@ -168,7 +212,7 @@
|
|||
|
||||
<style>
|
||||
.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
|
||||
.nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
|
||||
.nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
|
||||
#chat .ui-icon { background: url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
|
||||
#email .ui-icon { background: url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px; }
|
||||
#login .ui-icon { background: url(glyphish-icons/30-key.png) 50% 50% no-repeat; background-size: 12px 26px; }
|
||||
|
|
@ -194,14 +238,44 @@
|
|||
|
||||
<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 inherit the theme swatch from their parent container, just like buttons. If a navbar is placed in header or footer toolbar, it will inherit the default toolbar swatch (A) for bars unless you set this in the markup. </p>
|
||||
<p>Here are a few examples of navbars in various container swatches automatically inheriting their parent's swatch letter. Note that in these examples, instead of using a <code>data-theme</code> attribute, we're manually adding the swatch classes to apply the body swatch (<code>ui-body-a</code>) and the class to add the standard body padding (ui-body), but the inheritance works the same way:</p>
|
||||
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar" data-theme="e" >
|
||||
<div class="ui-body-a ui-body">
|
||||
<h3>Swatch A</h3>
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="#" data-icon="grid" data-iconpos="top" data-theme="b">Summary</a></li>
|
||||
<li><a href="#" data-icon="star" class="ui-btn-active" data-iconpos="top" data-theme="b">Favs</a></li>
|
||||
<li><a href="#" data-icon="gear" data-iconpos="top" data-theme="b">Setup</a></li>
|
||||
<li><a href="#" data-icon="grid">A</a></li>
|
||||
<li><a href="#" data-icon="star">B</a></li>
|
||||
<li><a href="#" data-icon="gear">C</a></li>
|
||||
<li><a href="#" data-icon="arrow-l">D</a></li>
|
||||
<li><a href="#" data-icon="arrow-r">E</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /container -->
|
||||
|
||||
<div class="ui-body-d ui-body">
|
||||
<h3>Swatch B</h3>
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="#" data-icon="grid">A</a></li>
|
||||
<li><a href="#" data-icon="star">B</a></li>
|
||||
<li><a href="#" data-icon="gear">C</a></li>
|
||||
<li><a href="#" data-icon="arrow-l">D</a></li>
|
||||
<li><a href="#" data-icon="arrow-r">E</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /container -->
|
||||
|
||||
<p>To set to the theme color for a navbar item, add the <code>data-theme</code> attribute to the individual links and specify a theme swatch. Note that applying a theme swatch at the navbar container is <em>not</em> supported.</p>
|
||||
<div data-role="footer">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="#" data-icon="grid"data-theme="a">A</a></li>
|
||||
<li><a href="#" data-icon="star" data-theme="b">B</a></li>
|
||||
<li><a href="#" data-icon="gear" data-theme="c">C</a></li>
|
||||
<li><a href="#" data-icon="arrow-l" data-theme="d">D</a></li>
|
||||
<li><a href="#" data-icon="arrow-r" data-theme="e">E</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@charset "utf-8";
|
||||
|
||||
.ui-scrollview-clip {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui-scrollview-view {
|
||||
|
|
|
|||
53
external/qunit.css
vendored
53
external/qunit.css
vendored
|
|
@ -1,7 +1,17 @@
|
|||
/**
|
||||
* QUnit - A JavaScript Unit Testing Framework
|
||||
*
|
||||
* http://docs.jquery.com/QUnit
|
||||
*
|
||||
* Copyright (c) 2011 John Resig, Jörn Zaefferer
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* or GPL (GPL-LICENSE.txt) licenses.
|
||||
*/
|
||||
|
||||
/** Font Family and Sizes */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
|
||||
|
|
@ -11,10 +21,11 @@
|
|||
/** Resets */
|
||||
|
||||
#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
|
||||
margin: 0 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Header */
|
||||
|
||||
#qunit-header {
|
||||
|
|
@ -31,8 +42,6 @@
|
|||
-moz-border-radius: 15px 15px 0 0;
|
||||
-webkit-border-top-right-radius: 15px;
|
||||
-webkit-border-top-left-radius: 15px;
|
||||
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
#qunit-header a {
|
||||
|
|
@ -50,7 +59,9 @@
|
|||
}
|
||||
|
||||
#qunit-testrunner-toolbar {
|
||||
padding: 0em 0 0.5em 2em;
|
||||
padding: 0.5em 0 0.5em 2em;
|
||||
color: #5E740B;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#qunit-userAgent {
|
||||
|
|
@ -73,10 +84,24 @@
|
|||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests li strong {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#qunit-tests li a {
|
||||
padding: 0.5em;
|
||||
color: #c2ccd1;
|
||||
text-decoration: none;
|
||||
}
|
||||
#qunit-tests li a:hover,
|
||||
#qunit-tests li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#qunit-tests ol {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
|
@ -161,6 +186,14 @@
|
|||
color: #710909;
|
||||
background-color: #fff;
|
||||
border-left: 26px solid #EE5757;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#qunit-tests > li:last-child {
|
||||
border-radius: 0 0 15px 15px;
|
||||
-moz-border-radius: 0 0 15px 15px;
|
||||
-webkit-border-bottom-right-radius: 15px;
|
||||
-webkit-border-bottom-left-radius: 15px;
|
||||
}
|
||||
|
||||
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
|
||||
|
|
@ -170,11 +203,10 @@
|
|||
#qunit-tests .fail .test-actual { color: #EE5757; }
|
||||
#qunit-tests .fail .test-expected { color: green; }
|
||||
|
||||
#qunit-banner.qunit-fail,
|
||||
#qunit-testrunner-toolbar { background-color: #EE5757; }
|
||||
#qunit-banner.qunit-fail { background-color: #EE5757; }
|
||||
|
||||
|
||||
/** Footer */
|
||||
/** Result */
|
||||
|
||||
#qunit-testresult {
|
||||
padding: 0.5em 0.5em 0.5em 2.5em;
|
||||
|
|
@ -182,10 +214,7 @@
|
|||
color: #2b81af;
|
||||
background-color: #D2E0E6;
|
||||
|
||||
border-radius: 0 0 15px 15px;
|
||||
-moz-border-radius: 0 0 15px 15px;
|
||||
-webkit-border-bottom-right-radius: 15px;
|
||||
-webkit-border-bottom-left-radius: 15px;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
/** Fixture */
|
||||
|
|
|
|||
943
external/qunit.js
vendored
943
external/qunit.js
vendored
File diff suppressed because it is too large
Load diff
|
|
@ -15,14 +15,14 @@
|
|||
<body>
|
||||
<div data-role="page" class="type-home">
|
||||
<div data-role="content">
|
||||
|
||||
<p id="jqm-version">Beta Release</p>
|
||||
|
||||
|
||||
<div class="content-secondary">
|
||||
|
||||
<div id="jqm-homeheader">
|
||||
<h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" /></h1>
|
||||
<p>A Touch-Optimized Web Framework for Smartphones & Tablets</p>
|
||||
<p id="jqm-version">Beta Release</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ $.fn.buttonMarkup = function( options ) {
|
|||
buttonClass += " ui-btn-icon-" + o.iconpos;
|
||||
|
||||
if ( o.iconpos == "notext" && !el.attr( "title" ) ) {
|
||||
el.attr( "title", el.text() );
|
||||
el.attr( "title", el.getEncodedText() );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ $.fn.buttonMarkup = function( options ) {
|
|||
el.attr( "data-" + $.mobile.ns + "theme", o.theme )
|
||||
.addClass( buttonClass );
|
||||
|
||||
wrap = ( "<D class='" + innerClass + "'><D class='ui-btn-text'></D>" +
|
||||
wrap = ( "<D class='" + innerClass + "' aria-hidden='true'><D class='ui-btn-text'></D>" +
|
||||
( o.icon ? "<span class='" + iconClass + "'></span>" : "" ) +
|
||||
"</D>" ).replace( /D/g, o.wrapperEls );
|
||||
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
|
|||
collapsibleHeading
|
||||
.toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
|
||||
.find( ".ui-collapsible-heading-status" )
|
||||
.text( o.expandCueText )
|
||||
.text( isCollapse ? o.expandCueText : o.collapseCueText )
|
||||
.end()
|
||||
.find( ".ui-icon" )
|
||||
.toggleClass( "ui-icon-minus", !isCollapse )
|
||||
|
|
|
|||
|
|
@ -53,6 +53,9 @@
|
|||
|
||||
pushStateEnabled: true,
|
||||
|
||||
// turn of binding to the native orientationchange due to android orientation behavior
|
||||
orientationChangeEnabled: true,
|
||||
|
||||
// Support conditions that must be met in order to proceed
|
||||
// default enhanced qualifications are media query support OR IE 7+
|
||||
gradeA: function(){
|
||||
|
|
|
|||
|
|
@ -118,11 +118,11 @@ $.event.special.tap = {
|
|||
// also handles swipeleft, swiperight
|
||||
$.event.special.swipe = {
|
||||
scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling.
|
||||
|
||||
|
||||
durationThreshold: 1000, // More time than this, and it isn't a swipe.
|
||||
|
||||
|
||||
horizontalDistanceThreshold: 30, // Swipe horizontal displacement must be more than this.
|
||||
|
||||
|
||||
verticalDistanceThreshold: 75, // Swipe vertical displacement must be less than this.
|
||||
|
||||
setup: function() {
|
||||
|
|
@ -190,7 +190,7 @@ $.event.special.swipe = {
|
|||
setup: function() {
|
||||
// If the event is supported natively, return false so that jQuery
|
||||
// will bind to the event using DOM methods.
|
||||
if ( $.support.orientation ) {
|
||||
if ( $.support.orientation && $.mobile.orientationChangeEnabled ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -204,7 +204,7 @@ $.event.special.swipe = {
|
|||
teardown: function(){
|
||||
// If the event is not supported natively, return false so that
|
||||
// jQuery will unbind the event using DOM methods.
|
||||
if ( $.support.orientation ) {
|
||||
if ( $.support.orientation && $.mobile.orientationChangeEnabled ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -216,6 +216,7 @@ $.event.special.swipe = {
|
|||
// Save a reference to the bound event handler.
|
||||
var old_handler = handleObj.handler;
|
||||
|
||||
|
||||
handleObj.handler = function( event ) {
|
||||
// Modify event object, adding the .orientation property.
|
||||
event.orientation = get_orientation();
|
||||
|
|
@ -242,8 +243,22 @@ $.event.special.swipe = {
|
|||
// Get the current page orientation. This method is exposed publicly, should it
|
||||
// be needed, as jQuery.event.special.orientationchange.orientation()
|
||||
$.event.special.orientationchange.orientation = get_orientation = function() {
|
||||
var elem = document.documentElement;
|
||||
return elem && elem.clientWidth / elem.clientHeight < 1.1 ? "portrait" : "landscape";
|
||||
var isPortrait = true, elem = document.documentElement;
|
||||
|
||||
// prefer window orientation to the calculation based on screensize as
|
||||
// the actual screen resize takes place before or after the orientation change event
|
||||
// has been fired depending on implementation (eg android 2.3 is before, iphone after).
|
||||
// More testing is required to determine if a more reliable method of determining the new screensize
|
||||
// is possible when orientationchange is fired. (eg, use media queries + element + opacity)
|
||||
if ( $.support.orientation ) {
|
||||
// if the window orientation registers as 0 or 180 degrees report
|
||||
// portrait, otherwise landscape
|
||||
isPortrait = window.orientation % 180 == 0;
|
||||
} else {
|
||||
isPortrait = elem && elem.clientWidth / elem.clientHeight < 1.1;
|
||||
}
|
||||
|
||||
return isPortrait ? "portrait" : "landscape";
|
||||
};
|
||||
|
||||
})( jQuery, window );
|
||||
|
|
|
|||
|
|
@ -89,9 +89,7 @@ $.widget( "mobile.button", $.mobile.widget, {
|
|||
|
||||
//auto self-init widgets
|
||||
$( document ).bind( "pagecreate create", function( e ){
|
||||
$( $.mobile.button.prototype.options.initSelector, e.target )
|
||||
.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
|
||||
.button();
|
||||
$.mobile.button.prototype.enhanceWithin( e.target );
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
|
|
@ -186,9 +186,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
|
|||
|
||||
//auto self-init widgets
|
||||
$( document ).bind( "pagecreate create", function( e ){
|
||||
$( $.mobile.checkboxradio.prototype.options.initSelector, e.target )
|
||||
.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
|
||||
.checkboxradio();
|
||||
$.mobile.checkboxradio.prototype.enhanceWithin( e.target );
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
|
|
|
|||
|
|
@ -217,8 +217,6 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
|
|||
|
||||
//auto self-init widgets
|
||||
$( document ).bind( "pagecreate create", function( e ){
|
||||
$( $.mobile.selectmenu.prototype.options.initSelector, e.target )
|
||||
.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
|
||||
.selectmenu();
|
||||
$.mobile.selectmenu.prototype.enhanceWithin( e.target );
|
||||
});
|
||||
})( jQuery );
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ $.widget( "mobile.slider", $.mobile.widget, {
|
|||
$( "<div class='ui-slider-labelbg ui-slider-labelbg-" + side + theme + " ui-btn-corner-" + corners + "'></div>" )
|
||||
.prependTo( slider );
|
||||
|
||||
$( "<span class='ui-slider-label ui-slider-label-" + side + theme + " ui-btn-corner-" + corners + "' role='img'>" + $( this ).text() + "</span>" )
|
||||
$( "<span class='ui-slider-label ui-slider-label-" + side + theme + " ui-btn-corner-" + corners + "' role='img'>" + $( this ).getEncodedText() + "</span>" )
|
||||
.prependTo( handle );
|
||||
});
|
||||
|
||||
|
|
@ -268,7 +268,7 @@ $.widget( "mobile.slider", $.mobile.widget, {
|
|||
this.handle.css( "left", percent + "%" );
|
||||
this.handle.attr( {
|
||||
"aria-valuenow": cType === "input" ? newval : control.find( "option" ).eq( newval ).attr( "value" ),
|
||||
"aria-valuetext": cType === "input" ? newval : control.find( "option" ).eq( newval ).text(),
|
||||
"aria-valuetext": cType === "input" ? newval : control.find( "option" ).eq( newval ).getEncodedText(),
|
||||
title: newval
|
||||
});
|
||||
|
||||
|
|
@ -316,11 +316,7 @@ $.widget( "mobile.slider", $.mobile.widget, {
|
|||
|
||||
//auto self-init widgets
|
||||
$( document ).bind( "pagecreate create", function( e ){
|
||||
|
||||
$( $.mobile.slider.prototype.options.initSelector, e.target )
|
||||
.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
|
||||
.slider();
|
||||
|
||||
$.mobile.slider.prototype.enhanceWithin( e.target );
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
|
|
|
|||
|
|
@ -112,6 +112,12 @@ $.widget( "mobile.textinput", $.mobile.widget, {
|
|||
clearTimeout( keyupTimeout );
|
||||
keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
|
||||
});
|
||||
|
||||
// Issue 509: the browser is not giving scrollHeight properly until after the document
|
||||
// is ready.
|
||||
if ($.trim(input.text())) {
|
||||
$(keyup);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -128,11 +134,7 @@ $.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();
|
||||
|
||||
$.mobile.textinput.prototype.enhanceWithin( e.target );
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
|
|||
.addClass( "ui-corner-tr" )
|
||||
.end()
|
||||
.find( ".ui-li-thumb" )
|
||||
.not(".ui-li-icon")
|
||||
.addClass( "ui-corner-tl" );
|
||||
|
||||
// Select the last visible li element
|
||||
|
|
@ -102,6 +103,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
|
|||
.addClass( "ui-corner-br" )
|
||||
.end()
|
||||
.find( ".ui-li-thumb" )
|
||||
.not(".ui-li-icon")
|
||||
.addClass( "ui-corner-bl" );
|
||||
}
|
||||
},
|
||||
|
|
@ -159,7 +161,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
|
|||
splittheme = listsplittheme || last.jqmData( "theme" ) || o.splitTheme;
|
||||
|
||||
last.appendTo(item)
|
||||
.attr( "title", last.text() )
|
||||
.attr( "title", last.getEncodedText() )
|
||||
.addClass( "ui-li-link-alt" )
|
||||
.empty()
|
||||
.buttonMarkup({
|
||||
|
|
@ -240,7 +242,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
|
|||
parent = list.parent(),
|
||||
nodeEls = $( list.prevAll().toArray().reverse() ),
|
||||
nodeEls = nodeEls.length ? nodeEls : $( "<span>" + $.trim(parent.contents()[ 0 ].nodeValue) + "</span>" ),
|
||||
title = nodeEls.first().text(),//url limits to first 30 chars of text
|
||||
title = nodeEls.first().getEncodedText(),//url limits to first 30 chars of text
|
||||
id = ( parentUrl || "" ) + "&" + $.mobile.subPageUrlKey + "=" + listId,
|
||||
theme = list.jqmData( "theme" ) || o.theme,
|
||||
countTheme = list.jqmData( "counttheme" ) || parentList.jqmData( "counttheme" ) || o.countTheme,
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@
|
|||
var relObj = path.parseUrl( relUrl ),
|
||||
absObj = path.parseUrl( absUrl ),
|
||||
protocol = relObj.protocol || absObj.protocol,
|
||||
doubleSlash = relObj.protocol ? relObj.doubleSlash : ( relObj.doubleSlash || absObj.doubleSlash );
|
||||
doubleSlash = relObj.protocol ? relObj.doubleSlash : ( relObj.doubleSlash || absObj.doubleSlash ),
|
||||
authority = relObj.authority || absObj.authority,
|
||||
hasPath = relObj.pathname !== "",
|
||||
pathname = path.makePathAbsolute( relObj.pathname || absObj.filename, absObj.pathname ),
|
||||
|
|
@ -737,14 +737,14 @@
|
|||
// reference to an embedded page. If so, it may have been dynamically
|
||||
// injected by a developer, in which case it would be lacking a data-url
|
||||
// attribute and in need of enhancement.
|
||||
if ( page.length === 0 && !path.isPath( dataUrl ) ) {
|
||||
if ( page.length === 0 && dataUrl && !path.isPath( dataUrl ) ) {
|
||||
page = settings.pageContainer.children( "#" + dataUrl )
|
||||
.attr( "data-" + $.mobile.ns + "url", dataUrl )
|
||||
}
|
||||
|
||||
// If we failed to find a page in the DOM, check the URL to see if it
|
||||
// refers to the first page in the application.
|
||||
if ( page.length === 0 && $.mobile.firstPage && path.isFirstPageUrl( absUrl ) ) {
|
||||
if ( page.length === 0 && $.mobile.firstPage && path.isFirstPageUrl( fileUrl ) ) {
|
||||
page = $( $.mobile.firstPage );
|
||||
}
|
||||
|
||||
|
|
@ -1017,6 +1017,14 @@
|
|||
return;
|
||||
}
|
||||
|
||||
// If we are going to the first-page of the application, we need to make
|
||||
// sure settings.dataUrl is set to the application document url. This allows
|
||||
// us to avoid generating a document url with an id hash in the case where the
|
||||
// first-page of the document has an id attribute specified.
|
||||
if ( toPage[ 0 ] === $.mobile.firstPage[ 0 ] && !settings.dataUrl ) {
|
||||
settings.dataUrl = documentUrl.hrefNoHash;
|
||||
}
|
||||
|
||||
// The caller passed us a real page DOM element. Update our
|
||||
// internal state and then trigger a transition to the page.
|
||||
var fromPage = settings.fromPage,
|
||||
|
|
@ -1090,7 +1098,7 @@
|
|||
}
|
||||
|
||||
//if title element wasn't found, try the page div data attr too
|
||||
var newPageTitle = toPage.jqmData( "title" ) || toPage.children(":jqmData(role='header')").find(".ui-title" ).text();
|
||||
var newPageTitle = toPage.jqmData( "title" ) || toPage.children(":jqmData(role='header')").find(".ui-title" ).getEncodedText();
|
||||
if( !!newPageTitle && pageTitle == document.title ) {
|
||||
pageTitle = newPageTitle;
|
||||
}
|
||||
|
|
@ -1342,16 +1350,19 @@
|
|||
});
|
||||
|
||||
//prefetch pages when anchors with data-prefetch are encountered
|
||||
$( ".ui-page" ).live( "pageshow.prefetch", function(){
|
||||
$( ".ui-page" ).live( "pageshow.prefetch", function() {
|
||||
var urls = [];
|
||||
$( this ).find( "a:jqmData(prefetch)" ).each(function(){
|
||||
var url = $( this ).attr( "href" );
|
||||
var $link = $(this),
|
||||
url = $link.attr( "href" );
|
||||
|
||||
if ( url && $.inArray( url, urls ) === -1 ) {
|
||||
urls.push( url );
|
||||
$.mobile.loadPage( url );
|
||||
|
||||
$.mobile.loadPage( url, {role: $link.attr("data-" + $.mobile.ns + "rel")} );
|
||||
}
|
||||
});
|
||||
} );
|
||||
});
|
||||
|
||||
$.mobile._handleHashChange = function( hash ) {
|
||||
//find first page via hash
|
||||
|
|
|
|||
|
|
@ -65,14 +65,15 @@
|
|||
|
||||
var href, state,
|
||||
hash = location.hash,
|
||||
isPath = $.mobile.path.isPath( hash );
|
||||
isPath = $.mobile.path.isPath( hash ),
|
||||
resolutionUrl = isPath ? location.href : $.mobile.getDocumentUrl();
|
||||
hash = isPath ? hash.replace( "#", "" ) : hash;
|
||||
|
||||
// propulate the hash when its not available
|
||||
state = self.state();
|
||||
|
||||
// make the hash abolute with the current href
|
||||
href = $.mobile.path.makeUrlAbsolute( hash, location.href );
|
||||
href = $.mobile.path.makeUrlAbsolute( hash, resolutionUrl );
|
||||
|
||||
if ( isPath ) {
|
||||
href = self.resetUIKeys( href );
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
$.widget( "mobile.page", $.mobile.widget, {
|
||||
options: {
|
||||
theme: "c",
|
||||
domCache: false
|
||||
domCache: false,
|
||||
keepNativeDefault: ":jqmData(role='none'), :jqmData(role='nojs')"
|
||||
},
|
||||
|
||||
_create: function() {
|
||||
|
|
@ -20,7 +21,17 @@ $.widget( "mobile.page", $.mobile.widget, {
|
|||
this.element
|
||||
.attr( "tabindex", "0" )
|
||||
.addClass( "ui-page ui-body-" + this.options.theme );
|
||||
},
|
||||
|
||||
keepNativeSelector: function() {
|
||||
var options = this.options,
|
||||
keepNativeDefined = options.keepNative && $.trim(options.keepNative);
|
||||
|
||||
if( keepNativeDefined && options.keepNative !== options.keepNativeDefault ){
|
||||
return [options.keepNative, options.keepNativeDefault].join(", ");
|
||||
}
|
||||
|
||||
return options.keepNativeDefault;
|
||||
}
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
|
|
|
|||
|
|
@ -7,23 +7,23 @@
|
|||
|
||||
(function( $, undefined ) {
|
||||
|
||||
$.mobile.page.prototype.options.backBtnText = "Back";
|
||||
$.mobile.page.prototype.options.addBackBtn = false;
|
||||
$.mobile.page.prototype.options.backBtnTheme = null;
|
||||
$.mobile.page.prototype.options.headerTheme = "a";
|
||||
$.mobile.page.prototype.options.footerTheme = "a";
|
||||
$.mobile.page.prototype.options.contentTheme = null;
|
||||
$.mobile.page.prototype.options.backBtnText = "Back";
|
||||
$.mobile.page.prototype.options.addBackBtn = false;
|
||||
$.mobile.page.prototype.options.backBtnTheme = null;
|
||||
$.mobile.page.prototype.options.headerTheme = "a";
|
||||
$.mobile.page.prototype.options.footerTheme = "a";
|
||||
$.mobile.page.prototype.options.contentTheme = null;
|
||||
|
||||
$( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", function( e ) {
|
||||
|
||||
var $page = $( this ),
|
||||
o = $page.data( "page" ).options,
|
||||
pageTheme = o.theme;
|
||||
var $page = $( this ),
|
||||
o = $page.data( "page" ).options,
|
||||
pageTheme = o.theme;
|
||||
|
||||
$( ":jqmData(role='header'), :jqmData(role='footer'), :jqmData(role='content')", this ).each(function() {
|
||||
var $this = $( this ),
|
||||
role = $this.jqmData( "role" ),
|
||||
theme = $this.jqmData( "theme" ),
|
||||
var $this = $( this ),
|
||||
role = $this.jqmData( "role" ),
|
||||
theme = $this.jqmData( "theme" ),
|
||||
$headeranchors,
|
||||
leftbtn,
|
||||
rightbtn,
|
||||
|
|
@ -36,35 +36,32 @@ $( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", functi
|
|||
|
||||
var thisTheme = theme || ( role === "header" ? o.headerTheme : o.footerTheme ) || pageTheme;
|
||||
|
||||
//add theme class
|
||||
$this.addClass( "ui-bar-" + thisTheme );
|
||||
|
||||
// Add ARIA role
|
||||
$this.attr( "role", role === "header" ? "banner" : "contentinfo" );
|
||||
$this
|
||||
//add theme class
|
||||
.addClass( "ui-bar-" + thisTheme )
|
||||
// Add ARIA role
|
||||
.attr( "role", role === "header" ? "banner" : "contentinfo" );
|
||||
|
||||
// Right,left buttons
|
||||
$headeranchors = $this.children( "a" );
|
||||
leftbtn = $headeranchors.hasClass( "ui-btn-left" );
|
||||
rightbtn = $headeranchors.hasClass( "ui-btn-right" );
|
||||
|
||||
if ( !leftbtn ) {
|
||||
leftbtn = $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
|
||||
}
|
||||
|
||||
if ( !rightbtn ) {
|
||||
rightbtn = $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
|
||||
}
|
||||
leftbtn = $headeranchors.hasClass( "ui-btn-left" );
|
||||
rightbtn = $headeranchors.hasClass( "ui-btn-right" );
|
||||
|
||||
leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
|
||||
|
||||
rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
|
||||
|
||||
// Auto-add back btn on pages beyond first view
|
||||
if ( o.addBackBtn && role === "header" &&
|
||||
$( ".ui-page" ).length > 1 &&
|
||||
$this.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
|
||||
!leftbtn ) {
|
||||
if ( o.addBackBtn &&
|
||||
role === "header" &&
|
||||
$( ".ui-page" ).length > 1 &&
|
||||
$this.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
|
||||
!leftbtn ) {
|
||||
|
||||
backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" ).prependTo( $this );
|
||||
|
||||
// If theme is provided, override default inheritance
|
||||
backBtn.attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme );
|
||||
backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" )
|
||||
// If theme is provided, override default inheritance
|
||||
.attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme )
|
||||
.prependTo( $this );
|
||||
}
|
||||
|
||||
// Page title
|
||||
|
|
@ -78,14 +75,12 @@ $( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", functi
|
|||
});
|
||||
|
||||
} else if ( role === "content" ) {
|
||||
|
||||
if (theme || o.contentTheme) {
|
||||
$this.addClass( "ui-body-" + ( theme || o.contentTheme ) );
|
||||
}
|
||||
|
||||
// Add ARIA role
|
||||
$this.attr( "role", "main" );
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ $.mobile.browser.ie = (function() {
|
|||
|
||||
|
||||
$.extend( $.support, {
|
||||
orientation: "orientation" in window,
|
||||
orientation: "orientation" in window && "onorientationchange" in window,
|
||||
touch: "ontouchend" in document,
|
||||
cssTransitions: "WebKitTransitionEvent" in window,
|
||||
pushState: "pushState" in history && "replaceState" in history,
|
||||
|
|
|
|||
|
|
@ -36,6 +36,16 @@ $.widget( "mobile.widget", {
|
|||
});
|
||||
|
||||
return options;
|
||||
},
|
||||
|
||||
enhanceWithin: function( target ) {
|
||||
// TODO remove dependency on the page widget for the keepNative.
|
||||
// Currently the keepNative value is defined on the page prototype so
|
||||
// the method is as well
|
||||
var page = $(target).data( "page" ),
|
||||
keepNative = page && page.keepNativeSelector();
|
||||
|
||||
$( this.options.initSelector, target ).not( keepNative || "" )[ this.widgetName ]();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
14
tests/unit/button/button_core.js
Normal file
14
tests/unit/button/button_core.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/*
|
||||
* mobile button unit tests
|
||||
*/
|
||||
(function($){
|
||||
$.mobile.page.prototype.options.keepNative = "button.should-be-native";
|
||||
|
||||
test( "button elements in the keepNative set shouldn't be enhanced", function() {
|
||||
same( $("button.should-be-native").siblings("div.ui-slider").length, 0 );
|
||||
});
|
||||
|
||||
test( "button elements should be enhanced", function() {
|
||||
ok( $("#enhanced").hasClass( "ui-btn-hidden" ) );
|
||||
});
|
||||
})( jQuery );
|
||||
36
tests/unit/button/index.html
Normal file
36
tests/unit/button/index.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Button Test Suite</title>
|
||||
|
||||
<script src="../../../js/jquery.js"></script>
|
||||
<script src="../jquery.setNameSpace.js"></script>
|
||||
<script src="../../../js/"></script>
|
||||
<script src="../../../tests/jquery.testHelper.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../../themes/default/"/>
|
||||
<link rel="stylesheet" href="../../../external/qunit.css"/>
|
||||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="button_core.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="qunit-header">jQuery Mobile Button Test Suite</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests">
|
||||
</ol>
|
||||
|
||||
<div data-nstest-role="page" data-nstest-theme="a">
|
||||
<div data-nstest-role="content" data-nstest-theme="p">
|
||||
<button class="should-be-native">foo</button>
|
||||
<button id="enhanced">bar</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -12,6 +12,8 @@
|
|||
|
||||
<link rel="stylesheet" href="../../../themes/default" />
|
||||
<link rel="stylesheet" href="../../../external/qunit.css"/>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -115,5 +115,11 @@
|
|||
ok( $("#enhancetest").trigger("create").find(".ui-checkbox").length, "enhancements applied" );
|
||||
});
|
||||
|
||||
$.mobile.page.prototype.options.keepNative = "input.should-be-native";
|
||||
|
||||
// not testing the positive case here since's it's obviously tested elsewhere
|
||||
test( "checkboxradio elements in the keepNative set shouldn't be enhanced", function() {
|
||||
console.log( );
|
||||
ok( !$("input.should-be-native").parent().is("div.ui-checkbox") );
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="checkboxradio_core.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -73,10 +75,13 @@
|
|||
</fieldset>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Agree to the terms:</legend>
|
||||
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="should-be-native" />
|
||||
<label for="checkbox-1">I agree</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="collapsible_core.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="controlgroup_core.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -71,7 +73,7 @@
|
|||
|
||||
<div data-nstest-role="fieldcontain" id="enhancetest">
|
||||
<fieldset data-nstest-role="controlgroup">
|
||||
|
||||
|
||||
|
||||
</fieldset>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
|
||||
<script src="core.js"></script>
|
||||
<script src="core_scroll.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="dialog_events.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@
|
|||
});
|
||||
|
||||
$('#qunit-fixture').trigger(events[0]);
|
||||
stop();
|
||||
});
|
||||
|
||||
asyncTest( "defined event functions trigger the event with no arguments", function(){
|
||||
|
|
@ -67,7 +66,6 @@
|
|||
});
|
||||
|
||||
$('#qunit-fixture').touchstart();
|
||||
stop();
|
||||
});
|
||||
|
||||
test( "defining event functions sets the attrFn to true", function(){
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="event_core.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<title>jQuery Mobile FieldContain Integration Test</title>
|
||||
|
||||
|
||||
|
||||
<script src="../../../js/jquery.js"></script>
|
||||
<script src="../jquery.setNameSpace.js"></script>
|
||||
<script src="../../../js/"></script>
|
||||
|
|
@ -16,9 +16,8 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="fieldContain_events.js"></script>
|
||||
|
||||
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -29,13 +28,13 @@
|
|||
</ol>
|
||||
|
||||
<div data-nstest-role="page">
|
||||
|
||||
|
||||
<!-- Basic fieldcontain test -->
|
||||
<div id="test-fieldcontain" data-nstest-role="fieldcontain">
|
||||
<label for="name">Text Input:</label>
|
||||
<input type="text" name="name" id="name" value="" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="enhancetest">
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@
|
|||
<script src="../../../js/jquery.mobile.init.js"></script>
|
||||
<link rel="stylesheet" href="../../../themes/default" />
|
||||
<link rel="stylesheet" href="../../../external/qunit.css"/>
|
||||
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
<script src="init_core_nopage.js"></script>
|
||||
<link rel="stylesheet" href="../../../themes/default" />
|
||||
<link rel="stylesheet" href="../../../external/qunit.css"/>
|
||||
<script src="../swarminject.js"></script>
|
||||
|
||||
<style>
|
||||
[data-nstest-role="page"], [data-nstest-role="dialog"] {
|
||||
position: static !important;
|
||||
|
|
@ -26,4 +28,4 @@
|
|||
</ol>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="listview_core.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="listview_pushstate.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="media_core.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,8 @@
|
|||
"../../navigation_base.js"
|
||||
]);
|
||||
</script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@
|
|||
"navigation_paths.js"
|
||||
]);
|
||||
</script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -32,7 +34,7 @@
|
|||
<ol id="qunit-tests">
|
||||
</ol>
|
||||
|
||||
<div id="harmless-default-page" data-nstest-role="page">
|
||||
<div id="harmless-default-page" data-nstest-role="page" class="first-page">
|
||||
</div>
|
||||
|
||||
<div id="foo" data-nstest-role="page" class="foo-class">
|
||||
|
|
@ -275,5 +277,14 @@
|
|||
<div id="inject-links-page" data-nstest-role="page">
|
||||
<a href="#injected-test-page" id="static-injected-test-page-link">static link</a>
|
||||
</div>
|
||||
|
||||
<div id="prefetched-dialog-page" data-nstest-role="page">
|
||||
<a href="prefetched-dialog.html"
|
||||
id="prefetched-dialog-link"
|
||||
data-nstest-role="prefetch"
|
||||
data-nstest-rel="dialog">
|
||||
static link
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -83,9 +83,10 @@
|
|||
|
||||
function(){
|
||||
// Verify that we are on the expected page.
|
||||
// the hash based nav result (hash:) is dictate by the fact that #internal-page-1
|
||||
// is the original root page element
|
||||
$.testHelper.assertUrlLocation({
|
||||
push: location.pathname + "#internal-page-1",
|
||||
hash: "internal-page-1",
|
||||
hashOrPush: location.pathname + location.search,
|
||||
report: "navigate from a page in a non-base directory to an internal page"
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
siteDirectory = location.pathname.replace( /[^/]+$/, "" ),
|
||||
home = $.mobile.path.parseUrl(location.pathname).directory,
|
||||
navigateTestRoot = function(){
|
||||
$.testHelper.openPage( "#" + location.pathname );
|
||||
$.testHelper.openPage( "#" + location.pathname + location.search );
|
||||
};
|
||||
|
||||
module('jquery.mobile.navigation.js', {
|
||||
|
|
@ -929,4 +929,51 @@
|
|||
}
|
||||
]);
|
||||
});
|
||||
|
||||
asyncTest( "application url with dialogHashKey loads application's first page", function(){
|
||||
$.testHelper.pageSequence([
|
||||
// open our test page
|
||||
function(){
|
||||
// Navigate to any page except the first page of the application.
|
||||
$.testHelper.openPage("#foo");
|
||||
},
|
||||
|
||||
function(){
|
||||
ok( $.mobile.activePage[ 0 ] === $( "#foo" )[ 0 ], "navigated successfully to #foo" );
|
||||
|
||||
// Now navigate to an hash that contains just a dialogHashKey.
|
||||
$.mobile.changePage("#" + $.mobile.dialogHashKey);
|
||||
},
|
||||
|
||||
function(){
|
||||
// Make sure we actually navigated to the first page.
|
||||
ok( $.mobile.activePage[ 0 ] === $.mobile.firstPage[ 0 ], "navigated successfully to first-page" );
|
||||
|
||||
// Now make sure opening the page didn't result in page duplication.
|
||||
ok( $.mobile.firstPage.hasClass( "first-page" ), "first page has expected class" );
|
||||
same( $( ".first-page" ).length, 1, "first page was not duplicated" );
|
||||
|
||||
start();
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
asyncTest( "prefetched links with data rel dialog result in a dialog", function() {
|
||||
$.testHelper.pageSequence([
|
||||
// open our test page
|
||||
function(){
|
||||
// Navigate to any page except the first page of the application.
|
||||
$.testHelper.openPage("#prefetched-dialog-page");
|
||||
},
|
||||
|
||||
function() {
|
||||
$("#prefetched-dialog-link").click();
|
||||
},
|
||||
|
||||
function() {
|
||||
ok( $.mobile.activePage.is(".ui-dialog"), "prefetched page is rendered as a dialog" );
|
||||
start();
|
||||
}
|
||||
]);
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
|
|||
10
tests/unit/navigation/prefetched-dialog.html
Normal file
10
tests/unit/navigation/prefetched-dialog.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Title Tag</title>
|
||||
</head>
|
||||
<body>
|
||||
<div data-nstest-role="page" id="prefetched-dialog"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -15,7 +15,9 @@
|
|||
<link rel="stylesheet" href="../../../external/qunit.css"/>
|
||||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script type="text/javascript" src="navigation_dialog_pushstate.js"></script>
|
||||
<script type="text/javascript" src="navigation_dialog_pushstate.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="page_core.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="page_core.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -26,11 +28,11 @@
|
|||
|
||||
<div id="qunit-fixture">
|
||||
<div id="a" data-nstest-role="page"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="b" data-nstest-role="page" data-nstest-theme="e"></div>
|
||||
|
||||
|
||||
<div id="c" data-nstest-role="page"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,76 +3,104 @@
|
|||
*/
|
||||
(function($){
|
||||
var libName = 'jquery.mobile.page.sections.js',
|
||||
themedefault = $.mobile.page.prototype.options.theme;
|
||||
themedefault = $.mobile.page.prototype.options.theme,
|
||||
keepNative = $.mobile.page.prototype.options.keepNative;
|
||||
|
||||
module(libName, {
|
||||
setup: function() {
|
||||
$.mobile.page.prototype.options.keepNative = keepNative;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
module(libName);
|
||||
|
||||
|
||||
var eventStack = [],
|
||||
etargets = [],
|
||||
cEvents=[],
|
||||
cTargets=[];
|
||||
|
||||
|
||||
|
||||
$( document ).bind( "pagebeforecreate pagecreate", function( e ){
|
||||
eventStack.push( e.type );
|
||||
etargets.push( e.target );
|
||||
});
|
||||
|
||||
|
||||
$("#c").live( "pagebeforecreate", function( e ){
|
||||
|
||||
|
||||
cEvents.push( e.type );
|
||||
cTargets.push( e.target );
|
||||
return false;
|
||||
});
|
||||
|
||||
test( "pagecreate event fires when page is created", function(){
|
||||
ok( eventStack[0] === "pagecreate" || eventStack[1] === "pagecreate" );
|
||||
ok( eventStack[0] === "pagecreate" || eventStack[1] === "pagecreate" );
|
||||
});
|
||||
|
||||
test( "pagebeforecreate event fires when page is created", function(){
|
||||
|
||||
test( "pagebeforecreate event fires when page is created", function(){
|
||||
ok( eventStack[0] === "pagebeforecreate" || eventStack[1] === "pagebeforecreate" );
|
||||
});
|
||||
|
||||
|
||||
test( "pagebeforecreate fires before pagecreate", function(){
|
||||
ok( eventStack[0] === "pagebeforecreate" );
|
||||
ok( eventStack[0] === "pagebeforecreate" );
|
||||
});
|
||||
|
||||
|
||||
test( "target of pagebeforecreate event was div #a", function(){
|
||||
ok( $( etargets[0] ).is("#a") );
|
||||
ok( $( etargets[0] ).is("#a") );
|
||||
});
|
||||
|
||||
|
||||
test( "target of pagecreate event was div #a" , function(){
|
||||
ok( $( etargets[0] ).is("#a") );
|
||||
ok( $( etargets[0] ).is("#a") );
|
||||
});
|
||||
|
||||
|
||||
test( "page element has ui-page class" , function(){
|
||||
ok( $( "#a" ).hasClass( "ui-page" ) );
|
||||
ok( $( "#a" ).hasClass( "ui-page" ) );
|
||||
});
|
||||
|
||||
|
||||
test( "page element has default body theme when not overidden" , function(){
|
||||
ok( $( "#a" ).hasClass( "ui-body-" + themedefault ) );
|
||||
ok( $( "#a" ).hasClass( "ui-body-" + themedefault ) );
|
||||
});
|
||||
|
||||
|
||||
test( "B page has non-default theme matching its data-theme attr" , function(){
|
||||
$( "#b" ).page();
|
||||
var btheme = $( "#b" ).jqmData( "theme" );
|
||||
ok( $( "#b" ).hasClass( "ui-body-" + btheme ) );
|
||||
ok( $( "#b" ).hasClass( "ui-body-" + btheme ) );
|
||||
});
|
||||
|
||||
|
||||
test( "Binding to pagebeforecreate and returning false prevents pagecreate event from firing" , function(){
|
||||
$("#c").page();
|
||||
|
||||
ok( cEvents[0] === "pagebeforecreate" );
|
||||
ok( !cTargets[1] );
|
||||
ok( cEvents[0] === "pagebeforecreate" );
|
||||
ok( !cTargets[1] );
|
||||
});
|
||||
|
||||
test( "Binding to pagebeforecreate and returning false prevents classes from being applied to page" , function(){
|
||||
ok( !$( "#b" ).hasClass( "ui-body-" + themedefault ) );
|
||||
ok( !$( "#b" ).hasClass( "ui-page" ) );
|
||||
});
|
||||
|
||||
|
||||
|
||||
test( "Binding to pagebeforecreate and returning false prevents classes from being applied to page" , function(){
|
||||
ok( !$( "#b" ).hasClass( "ui-body-" + themedefault ) );
|
||||
ok( !$( "#b" ).hasClass( "ui-page" ) );
|
||||
});
|
||||
|
||||
test( "keepNativeSelector returns the default where keepNative is not different", function() {
|
||||
var pageProto = $.mobile.page.prototype;
|
||||
pageProto.options.keepNative = pageProto.options.keepNativeDefault;
|
||||
|
||||
same(pageProto.keepNativeSelector(), pageProto.options.keepNativeDefault);
|
||||
});
|
||||
|
||||
test( "keepNativeSelector returns the default where keepNative is empty, undefined, whitespace", function() {
|
||||
var pageProto = $.mobile.page.prototype;
|
||||
|
||||
pageProto.options.keepNative = "";
|
||||
same(pageProto.keepNativeSelector(), pageProto.options.keepNativeDefault);
|
||||
|
||||
pageProto.options.keepNative = undefined;
|
||||
same(pageProto.keepNativeSelector(), pageProto.options.keepNativeDefault);
|
||||
|
||||
pageProto.options.keepNative = " ";
|
||||
same(pageProto.keepNativeSelector(), pageProto.options.keepNativeDefault);
|
||||
});
|
||||
|
||||
test( "keepNativeSelector returns a selector joined with the default", function() {
|
||||
var pageProto = $.mobile.page.prototype;
|
||||
|
||||
pageProto.options.keepNative = "foo, bar";
|
||||
same(pageProto.keepNativeSelector(), "foo, bar, " + pageProto.options.keepNativeDefault);
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
|
|||
|
|
@ -30,9 +30,9 @@ $(function() {
|
|||
self.frame.QUnit.testDone = self.onTestDone;
|
||||
},
|
||||
|
||||
onTestDone: function( name, bad, assertCount ) {
|
||||
QUnit.ok( !(bad > 0), name );
|
||||
self.recordAssertions( assertCount - bad, name );
|
||||
onTestDone: function( result ) {
|
||||
QUnit.ok( !(result.failed > 0), result.name );
|
||||
self.recordAssertions( result.total - result.failed, result.name );
|
||||
},
|
||||
|
||||
onFrameDone: function( failed, passed, total, runtime ){
|
||||
|
|
|
|||
|
|
@ -10,10 +10,12 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
<script src="../../../tests/jquery.testHelper.js"></script>
|
||||
<script src="../../../js"></script>
|
||||
<script src="select_cached.js"></script>
|
||||
<script src="select_cached.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="../../../themes/default/"/>
|
||||
<link rel="stylesheet" href="../../../external/qunit.css"/>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@
|
|||
|
||||
<link rel="stylesheet" href="../../../themes/default/"/>
|
||||
<link rel="stylesheet" href="../../../external/qunit.css"/>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -347,6 +349,10 @@
|
|||
<select name="encoded-option" id="encoded-option" data-nstest-native-menu="false">
|
||||
<option><script>window.encodedValueIsDefined = true;</script></option>
|
||||
</select>
|
||||
|
||||
<select name="keep-native" id="keep-native" class="should-be-native">
|
||||
<option></option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -334,4 +334,10 @@
|
|||
same(window.encodedValueIsDefined, true);
|
||||
});
|
||||
|
||||
$.mobile.page.prototype.options.keepNative = "select.should-be-native";
|
||||
|
||||
// not testing the positive case here since's it's obviously tested elsewhere
|
||||
test( "select elements in the keepNative set shouldn't be enhanced", function() {
|
||||
ok( !$("#keep-native").parent().is("div.ui-btn") );
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Slider Events Test Suite</title>
|
||||
<title>jQuery Mobile Slider Test Suite</title>
|
||||
|
||||
<script src="../../../js/jquery.js"></script>
|
||||
<script src="../jquery.setNameSpace.js"></script>
|
||||
|
|
@ -16,10 +16,13 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="slider_events.js"></script>
|
||||
<script src="slider_core.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="qunit-header">jQuery Mobile Slider Event Test Suite</h1>
|
||||
<h1 id="qunit-header">jQuery Mobile Slider Test Suite</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests">
|
||||
|
|
@ -57,10 +60,11 @@
|
|||
<div data-nstest-role="fieldcontain">
|
||||
<input type="range" name="onchange" id="onchange" value="25" min="0" max="100" step="10" onchange="onChangeCounter()" data-nstest-theme="b" data-nstest-track-theme="a" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider">Input slider:</label>
|
||||
<input type="range" name="slider" id="slider" value="25" min="0" max="100" class="should-be-native"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="enhancetest">
|
||||
|
|
|
|||
11
tests/unit/slider/slider_core.js
Normal file
11
tests/unit/slider/slider_core.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/*
|
||||
* mobile slider unit tests
|
||||
*/
|
||||
(function($){
|
||||
$.mobile.page.prototype.options.keepNative = "input.should-be-native";
|
||||
|
||||
// not testing the positive case here since's it's obviously tested elsewhere
|
||||
test( "slider elements in the keepNative set shouldn't be enhanced", function() {
|
||||
same( $("input.should-be-native").siblings("div.ui-slider").length, 0 );
|
||||
});
|
||||
})( jQuery );
|
||||
|
|
@ -16,6 +16,8 @@
|
|||
<script src="../../../external/qunit.js"></script>
|
||||
|
||||
<script src="support_core.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,14 +19,15 @@ $.testHelper.excludeFileProtocol(function(){
|
|||
// TODO expose properties for less brittle tests
|
||||
$.extend(window, {
|
||||
WebKitTransitionEvent: true,
|
||||
orientation: true
|
||||
orientation: true,
|
||||
onorientationchange: true
|
||||
});
|
||||
|
||||
document.ontouchend = true;
|
||||
|
||||
window.history.pushState = function(){};
|
||||
window.history.replaceState = function(){};
|
||||
|
||||
|
||||
$.mobile.media = function(){ return true; };
|
||||
|
||||
$.testHelper.reloadLib(libName);
|
||||
|
|
|
|||
9
tests/unit/swarminject.js
Executable file
9
tests/unit/swarminject.js
Executable file
|
|
@ -0,0 +1,9 @@
|
|||
// load testswarm agent
|
||||
(function() {
|
||||
var url = window.location.search;
|
||||
url = decodeURIComponent( url.slice( url.indexOf("swarmURL=") + 9 ) );
|
||||
if ( !url || url.indexOf("http") !== 0 ) {
|
||||
return;
|
||||
}
|
||||
document.write("<scr" + "ipt src='http://swarm.jquery.org/js/inject.js?" + (new Date).getTime() + "'></scr" + "ipt>");
|
||||
})();
|
||||
|
|
@ -7,12 +7,15 @@
|
|||
|
||||
<script src="../../../js/jquery.js"></script>
|
||||
<script src="../jquery.setNameSpace.js"></script>
|
||||
<script src="../../jquery.testHelper.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>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -24,6 +27,25 @@
|
|||
|
||||
<div data-nstest-role="page">
|
||||
<input name="" id="typeless-input" />
|
||||
<textarea class="should-be-native"></textarea>
|
||||
|
||||
<textarea id="reference-autogrow">
|
||||
</textarea>
|
||||
|
||||
<textarea id="init-autogrow">
|
||||
Place holder text
|
||||
Place holder text
|
||||
Place holder text
|
||||
Place holder text
|
||||
Place holder text
|
||||
Place holder text
|
||||
Place holder text
|
||||
Place holder text
|
||||
Place holder text
|
||||
</textarea>
|
||||
|
||||
<textarea id="keyup-autogrow">
|
||||
</textarea>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -7,4 +7,36 @@
|
|||
test( "inputs without type specified are enhanced", function(){
|
||||
ok( $( "#typeless-input" ).hasClass( "ui-input-text" ) );
|
||||
});
|
||||
|
||||
$.mobile.page.prototype.options.keepNative = "textarea.should-be-native";
|
||||
|
||||
// not testing the positive case here since's it's obviously tested elsewhere
|
||||
test( "textarea in the keepNative set shouldn't be enhanced", function() {
|
||||
ok( !$("textarea.should-be-native").is("ui-input-text") );
|
||||
});
|
||||
|
||||
asyncTest( "textarea should autogrow on document ready", function() {
|
||||
var test = $( "#init-autogrow" );
|
||||
|
||||
setTimeout(function() {
|
||||
ok( $( "#reference-autogrow" )[0].clientHeight < test[0].clientHeight, "the height is greater than the reference text area with no content" );
|
||||
ok( test[0].clientHeight > 100, "autogrow text area's height is greater than any style padding");
|
||||
start();
|
||||
}, 400);
|
||||
});
|
||||
|
||||
asyncTest( "textarea should autogrow when text is added via the keyboard", function() {
|
||||
var test = $( "#keyup-autogrow" ),
|
||||
originalHeight = test[0].clientHeight;
|
||||
|
||||
test.keyup(function() {
|
||||
setTimeout(function() {
|
||||
ok( test[0].clientHeight > originalHeight, "the height is greater than original with no content" );
|
||||
ok( test[0].clientHeight > 100, "autogrow text area's height is greater any style/padding");
|
||||
start();
|
||||
}, 400);
|
||||
});
|
||||
|
||||
test.val("foo\n\n\n\n\n\n\n\n\n\n\n\n\n\n").trigger("keyup");
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -13,6 +13,8 @@
|
|||
<link rel="stylesheet" href="../../../external/qunit.css"/>
|
||||
|
||||
<script src="widget_core.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,14 +4,15 @@
|
|||
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
|
||||
*/
|
||||
.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 5px; padding: 0; }
|
||||
.ui-btn:focus, .ui-btn:active { outline: none; }
|
||||
.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13px; margin: 0; }
|
||||
.ui-btn-inline { display: inline-block; }
|
||||
.ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
|
||||
.ui-btn input, .ui-btn button { z-index: 2; }
|
||||
.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: .4em 8px .5em; }
|
||||
.ui-btn-icon-notext { width: 24px; height: 24px; }
|
||||
.ui-btn-icon-notext .ui-btn-inner { padding: 2px 1px 2px 3px; }
|
||||
.ui-btn-icon-notext .ui-btn-text { position: absolute; left: -999px; }
|
||||
.ui-btn-text { position: relative; z-index: 1; }
|
||||
.ui-btn-icon-notext .ui-btn-text { position: absolute; left: -9999px; }
|
||||
.ui-btn-icon-left .ui-btn-inner { padding-left: 33px; }
|
||||
.ui-header .ui-btn-icon-left .ui-btn-inner,
|
||||
.ui-footer .ui-btn-icon-left .ui-btn-inner,
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
.ui-bar .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 27px; }
|
||||
|
||||
/*btn icon positioning*/
|
||||
.ui-btn-icon-notext .ui-icon { display: block; }
|
||||
.ui-btn-icon-notext .ui-icon { display: block; z-index: 0;}
|
||||
.ui-btn-icon-left .ui-icon, .ui-btn-icon-right .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
|
||||
.ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon { position: absolute; left: 50%; margin-left: -9px; }
|
||||
.ui-btn-icon-left .ui-icon { left: 10px; }
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
.ui-collapsible-heading a span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0px 1px 2px; text-indent: -9999px; }
|
||||
.ui-collapsible-heading a span.ui-btn .ui-btn-inner { padding: 10px 0; }
|
||||
.ui-collapsible-heading a span.ui-btn .ui-icon { left: 0; margin-top: -10px; }
|
||||
.ui-collapsible-heading-status { position:absolute; left:-9999px; }
|
||||
.ui-collapsible-heading-status { position:fixed; left:-9999px; }
|
||||
.ui-collapsible-content {
|
||||
display: block;
|
||||
margin: 0 -8px;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,14 @@
|
|||
/* on ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */
|
||||
.ui-page { outline: none; }
|
||||
|
||||
/*orientations from js are available */
|
||||
@media screen and (orientation: portrait){
|
||||
.ui-mobile, .ui-mobile .ui-page { min-height: 420px; }
|
||||
}
|
||||
@media screen and (orientation: landscape){
|
||||
.ui-mobile, .ui-mobile .ui-page { min-height: 300px; }
|
||||
}
|
||||
|
||||
/* native overflow scrolling */
|
||||
.ui-page.ui-mobile-touch-overflow,
|
||||
.ui-mobile-touch-overflow.ui-native-fixed .ui-content {
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
|
||||
|
||||
/*listbox*/
|
||||
.ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text { display: block; min-height: 1em; }
|
||||
.ui-select .ui-btn-text { text-overflow: ellipsis; overflow: hidden;}
|
||||
.ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text { display: block; min-height: 1em; overflow: hidden; }
|
||||
.ui-select .ui-btn-text { text-overflow: ellipsis; }
|
||||
|
||||
.ui-selectmenu { position: absolute; padding: 0; z-index: 100 !important; width: 80%; max-width: 350px; padding: 6px; }
|
||||
.ui-selectmenu .ui-listview { margin: 0; }
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear;
|
|||
.ui-input-search { padding: 0 30px; width: 77%; background-image: none; position: relative; }
|
||||
.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
|
||||
.ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
|
||||
.ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -14px; }
|
||||
.ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
|
||||
.ui-input-search .ui-input-clear-hidden { display: none; }
|
||||
|
||||
/* orientation adjustments - incomplete!*/
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
.ui-content .ui-listview-inset { margin: 1em 0; }
|
||||
.ui-listview, .ui-li { list-style:none; padding:0; }
|
||||
.ui-li, .ui-li.ui-field-contain { display: block; margin:0; position: relative; overflow: visible; text-align: left; border-width: 0; border-top-width: 1px; }
|
||||
.ui-li .ui-btn-text { position: relative; z-index: 1; }
|
||||
.ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
|
||||
.ui-li-divider, .ui-li-static { padding: .5em 15px; font-size: 14px; font-weight: bold; }
|
||||
.ui-li-divider { counter-reset: listnumbering; }
|
||||
|
|
@ -23,6 +22,7 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid
|
|||
.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count { padding-right: 45px; }
|
||||
.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow { padding-right: 30px; }
|
||||
.ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow.ui-li-has-count { padding-right: 75px; }
|
||||
.ui-li-has-count .ui-btn-text { padding-right: 15px; }
|
||||
.ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
|
||||
.ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
|
||||
.ui-li-thumb, .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; }
|
||||
|
|
|
|||
|
|
@ -30,12 +30,25 @@
|
|||
font-family: Helvetica, Arial, sans-serif /*{a-bar-font}*/;
|
||||
}
|
||||
.ui-bar-a .ui-link-inherit {
|
||||
color: #fff /*{a-bar-color}*/;
|
||||
color: #fff /*{a-bar-color}*/;
|
||||
}
|
||||
|
||||
.ui-bar-a .ui-link {
|
||||
color: #7cc4e7 /*{global-link-color}*/;
|
||||
color: #7cc4e7 /*{a-bar-link-color}*/;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-bar-a .ui-link:hover {
|
||||
color: #2489CE /*{a-bar-link-hover}*/;
|
||||
}
|
||||
|
||||
.ui-bar-a .ui-link:active {
|
||||
color: #2489CE /*{a-bar-link-active}*/;
|
||||
}
|
||||
|
||||
.ui-bar-a .ui-link:visited {
|
||||
color: #2489CE /*{a-bar-link-visited}*/;
|
||||
}
|
||||
.ui-body-a {
|
||||
border: 1px solid #2A2A2A /*{a-body-border}*/;
|
||||
background: #222222 /*{a-body-background-color}*/;
|
||||
|
|
@ -57,12 +70,26 @@
|
|||
font-family: Helvetica, Arial, sans-serif /*{a-body-font}*/;
|
||||
}
|
||||
.ui-body-a .ui-link-inherit {
|
||||
color: #fff /*{a-body-color}*/;
|
||||
color: #fff /*{a-body-color}*/;
|
||||
}
|
||||
|
||||
.ui-body-a .ui-link {
|
||||
color: #2489CE /*{global-link-color}*/;
|
||||
color: #2489CE /*{a-body-link-color}*/;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-body-a .ui-link:hover {
|
||||
color: #2489CE /*{a-body-link-hover}*/;
|
||||
}
|
||||
|
||||
.ui-body-a .ui-link:active {
|
||||
color: #2489CE /*{a-body-link-active}*/;
|
||||
}
|
||||
|
||||
.ui-body-a .ui-link:visited {
|
||||
color: #2489CE /*{a-body-link-visited}*/;
|
||||
}
|
||||
|
||||
.ui-br {
|
||||
border-bottom: rgb(130,130,130);
|
||||
border-bottom: rgba(130,130,130,.3);
|
||||
|
|
@ -149,13 +176,24 @@
|
|||
font-family: Helvetica, Arial, sans-serif /*{b-bar-font}*/;
|
||||
}
|
||||
.ui-bar-b .ui-link-inherit {
|
||||
color: #fff /*{b-bar-color}*/;
|
||||
color: #fff /*{b-bar-color}*/;
|
||||
}
|
||||
.ui-bar-b .ui-link {
|
||||
color: #7cc4e7 /*{global-link-color}*/;
|
||||
color: #ddf0f8 /*{b-bar-link-color}*/;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-bar-b .ui-link:hover {
|
||||
color: #ddf0f8 /*{b-bar-link-hover}*/;
|
||||
}
|
||||
|
||||
.ui-bar-b .ui-link:active {
|
||||
color: #ddf0f8 /*{b-bar-link-active}*/;
|
||||
}
|
||||
|
||||
.ui-bar-b .ui-link:visited {
|
||||
color: #ddf0f8 /*{b-bar-link-visited}*/;
|
||||
}
|
||||
.ui-body-b {
|
||||
border: 1px solid #C6C6C6 /*{b-body-border}*/;
|
||||
background: #cccccc /*{b-body-background-color}*/;
|
||||
|
|
@ -177,12 +215,26 @@
|
|||
font-family: Helvetica, Arial, sans-serif /*{b-body-font}*/;
|
||||
}
|
||||
.ui-body-b .ui-link-inherit {
|
||||
color: #333333 /*{b-body-color}*/;
|
||||
color: #333333 /*{b-body-color}*/;
|
||||
}
|
||||
|
||||
.ui-body-b .ui-link {
|
||||
color: #2489CE /*{global-link-color}*/;
|
||||
color: #2489CE /*{b-body-link-color}*/;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-body-b .ui-link:hover {
|
||||
color: #2489CE /*{b-body-link-hover}*/;
|
||||
}
|
||||
|
||||
.ui-body-b .ui-link:active {
|
||||
color: #2489CE /*{b-body-link-active}*/;
|
||||
}
|
||||
|
||||
.ui-body-b .ui-link:visited {
|
||||
color: #2489CE /*{b-body-link-visited}*/;
|
||||
}
|
||||
|
||||
.ui-btn-up-b {
|
||||
border: 1px solid #145072 /*{b-bup-border}*/;
|
||||
background: #2567ab /*{b-bup-background-color}*/;
|
||||
|
|
@ -256,11 +308,26 @@
|
|||
background-image: linear-gradient(top, #f0f0f0 /*{c-bar-background-start}*/, #e9eaeb /*{c-bar-background-end}*/);
|
||||
}
|
||||
|
||||
.ui-bar-c .ui-link-inherit {
|
||||
color: #3E3E3E /*{c-bar-color}*/;
|
||||
}
|
||||
.ui-bar-c .ui-link {
|
||||
color: #2489CE /*{global-link-color}*/;
|
||||
color: #7cc4e7 /*{c-bar-link-color}*/;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-bar-c .ui-link:hover {
|
||||
color: #2489CE /*{c-bar-link-hover}*/;
|
||||
}
|
||||
|
||||
.ui-bar-c .ui-link:active {
|
||||
color: #2489CE /*{c-bar-link-active}*/;
|
||||
}
|
||||
|
||||
.ui-bar-c .ui-link:visited {
|
||||
color: #2489CE /*{c-bar-link-visited}*/;
|
||||
}
|
||||
|
||||
.ui-bar-c,
|
||||
.ui-bar-c input,
|
||||
.ui-bar-c select,
|
||||
|
|
@ -287,14 +354,28 @@
|
|||
.ui-body-c button {
|
||||
font-family: Helvetica, Arial, sans-serif /*{c-body-font}*/;
|
||||
}
|
||||
|
||||
.ui-body-c .ui-link-inherit {
|
||||
color: #333333 /*{c-body-color}*/;
|
||||
color: #333333 /*{c-body-color}*/;
|
||||
}
|
||||
|
||||
.ui-body-c .ui-link {
|
||||
color: #2489CE /*{global-link-color}*/;
|
||||
color: #2489CE /*{c-body-link-color}*/;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-body-c .ui-link:hover {
|
||||
color: #2489CE /*{c-body-link-hover}*/;
|
||||
}
|
||||
|
||||
.ui-body-c .ui-link:active {
|
||||
color: #2489CE /*{c-body-link-active}*/;
|
||||
}
|
||||
|
||||
.ui-body-c .ui-link:visited {
|
||||
color: #2489CE /*{c-body-link-visited}*/;
|
||||
}
|
||||
|
||||
.ui-btn-up-c {
|
||||
border: 1px solid #ccc /*{c-bup-border}*/;
|
||||
background: #eee /*{c-bup-background-color}*/;
|
||||
|
|
@ -313,7 +394,7 @@
|
|||
}
|
||||
|
||||
.ui-btn-hover-c {
|
||||
border: 1px solid #bbb /*{c-bhover-border}*/;
|
||||
border: 1px solid #bbbbbb /*{c-bhover-border}*/;
|
||||
background: #dadada /*{c-bhover-background-color}*/;
|
||||
font-weight: bold;
|
||||
color: #101010 /*{c-bhover-color}*/;
|
||||
|
|
@ -374,13 +455,27 @@
|
|||
.ui-bar-d button {
|
||||
font-family: Helvetica, Arial, sans-serif /*{d-bar-font}*/;
|
||||
}
|
||||
|
||||
.ui-bar-d .ui-link-inherit {
|
||||
color: #333 /*{d-bar-color}*/;
|
||||
color: #333333 /*{d-bar-color}*/;
|
||||
}
|
||||
.ui-bar-d .ui-link {
|
||||
color: #2489CE /*{global-link-color}*/;
|
||||
color: #2489CE /*{d-bar-link-color}*/;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-bar-d .ui-link:hover {
|
||||
color: #2489CE /*{d-bar-link-hover}*/;
|
||||
}
|
||||
|
||||
.ui-bar-d .ui-link:active {
|
||||
color: #2489CE /*{d-bar-link-active}*/;
|
||||
}
|
||||
|
||||
.ui-bar-d .ui-link:visited {
|
||||
color: #2489CE /*{d-bar-link-visited}*/;
|
||||
}
|
||||
|
||||
.ui-body-d {
|
||||
border: 1px solid #ccc /*{d-body-border}*/;
|
||||
color: #333333 /*{d-body-color}*/;
|
||||
|
|
@ -400,13 +495,28 @@
|
|||
.ui-body-d button {
|
||||
font-family: Helvetica, Arial, sans-serif /*{d-body-font}*/;
|
||||
}
|
||||
|
||||
.ui-body-d .ui-link-inherit {
|
||||
color: #333333 /*{d-body-color}*/;
|
||||
color: #333333 /*{d-body-color}*/;
|
||||
}
|
||||
|
||||
.ui-body-d .ui-link {
|
||||
color: #2489CE /*{global-link-color}*/;
|
||||
color: #2489CE /*{d-body-link-color}*/;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-body-d .ui-link:hover {
|
||||
color: #2489CE /*{d-body-link-hover}*/;
|
||||
}
|
||||
|
||||
.ui-body-d .ui-link:active {
|
||||
color: #2489CE /*{d-body-link-active}*/;
|
||||
}
|
||||
|
||||
.ui-body-d .ui-link:visited {
|
||||
color: #2489CE /*{d-body-link-visited}*/;
|
||||
}
|
||||
|
||||
.ui-btn-up-d {
|
||||
border: 1px solid #ccc /*{d-bup-border}*/;
|
||||
background: #fff /*{d-bup-background-color}*/;
|
||||
|
|
@ -487,12 +597,25 @@
|
|||
font-family: Helvetica, Arial, sans-serif /*{e-bar-font}*/;
|
||||
}
|
||||
.ui-bar-e .ui-link-inherit {
|
||||
color: #333 /*{e-bar-color}*/;
|
||||
color: #333333 /*{e-bar-color}*/;
|
||||
}
|
||||
.ui-bar-e .ui-link {
|
||||
color: #2489CE /*{global-link-color}*/;
|
||||
color: #2489CE /*{e-bar-link-color}*/;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-bar-e .ui-link:hover {
|
||||
color: #2489CE /*{e-bar-link-hover}*/;
|
||||
}
|
||||
|
||||
.ui-bar-e .ui-link:active {
|
||||
color: #2489CE /*{e-bar-link-active}*/;
|
||||
}
|
||||
|
||||
.ui-bar-e .ui-link:visited {
|
||||
color: #2489CE /*{e-bar-link-visited}*/;
|
||||
}
|
||||
|
||||
.ui-body-e {
|
||||
border: 1px solid #F7C942 /*{e-body-border}*/;
|
||||
color: #333333 /*{e-body-color}*/;
|
||||
|
|
@ -513,12 +636,26 @@
|
|||
font-family: Helvetica, Arial, sans-serif /*{e-body-font}*/;
|
||||
}
|
||||
.ui-body-e .ui-link-inherit {
|
||||
color: #333333 /*{e-body-color}*/;
|
||||
color: #333333 /*{e-body-color}*/;
|
||||
}
|
||||
|
||||
.ui-body-e .ui-link {
|
||||
color: #2489CE /*{global-link-color}*/;
|
||||
color: #2489CE /*{e-body-link-color}*/;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-body-e .ui-link:hover {
|
||||
color: #2489CE /*{e-body-link-hover}*/;
|
||||
}
|
||||
|
||||
.ui-body-e .ui-link:active {
|
||||
color: #2489CE /*{e-body-link-active}*/;
|
||||
}
|
||||
|
||||
.ui-body-e .ui-link:visited {
|
||||
color: #2489CE /*{e-body-link-visited}*/;
|
||||
}
|
||||
|
||||
.ui-btn-up-e {
|
||||
border: 1px solid #F7C942 /*{e-bup-border}*/;
|
||||
background: #fadb4e /*{e-bup-background-color}*/;
|
||||
|
|
@ -584,24 +721,6 @@ a.ui-link-inherit {
|
|||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* links and their different states
|
||||
-----------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
.ui-link{
|
||||
color: #2489CE /*{global-link-color}*/
|
||||
}
|
||||
|
||||
.ui-link:hover{
|
||||
color: #2489CE /*{global-link-hover}*/
|
||||
}
|
||||
|
||||
.ui-link:active{
|
||||
color: #2489CE /*{global-link-active}*/
|
||||
}
|
||||
|
||||
.ui-link:visited{
|
||||
color: #2489CE /*{global-link-visited}*/
|
||||
}
|
||||
|
||||
/* Active class used as the "on" state across all themes
|
||||
-----------------------------------------------------------------------------------------------------------*/
|
||||
|
|
@ -620,7 +739,6 @@ a.ui-link-inherit {
|
|||
background-image: -ms-linear-gradient(top, #85bae4 /*{global-active-background-start}*/, #5393c5 /*{global-active-background-end}*/); /* IE10 */
|
||||
background-image: -o-linear-gradient(top, #85bae4 /*{global-active-background-start}*/, #5393c5 /*{global-active-background-end}*/); /* Opera 11.10+ */
|
||||
background-image: linear-gradient(top, #85bae4 /*{global-active-background-start}*/, #5393c5 /*{global-active-background-end}*/);
|
||||
outline: none;
|
||||
font-family: Helvetica, Arial, sans-serif /*{global-active-font}*/;
|
||||
}
|
||||
.ui-btn-active a.ui-link-inherit {
|
||||
|
|
|
|||
|
|
@ -874,7 +874,7 @@ a.ui-link-inherit {
|
|||
.ui-btn-corner-br, .ui-btn-corner-top, .ui-btn-corner-bottom,
|
||||
.ui-btn-corner-right, .ui-btn-corner-left, .ui-btn-corner-all {
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
|
@ -917,7 +917,6 @@ a.ui-link-inherit {
|
|||
|
||||
/* set focus state last */
|
||||
.ui-focus {
|
||||
outline: none;
|
||||
-moz-box-shadow: 0px 0px 12px #FFBC19;
|
||||
-webkit-box-shadow: 0px 0px 12px #FFBC19;
|
||||
box-shadow: 0px 0px 12px #FFBC19;
|
||||
|
|
@ -966,4 +965,4 @@ a.ui-btn.ui-btn-inline.ui-btn-corner-all .ui-btn-inner{
|
|||
/* inner highlight is janky! */
|
||||
.ui-dialog a.ui-btn-icon-notext.ui-btn-corner-all .ui-btn-inner.ui-btn-corner-all{
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
24
tools/log-page-events.html
Normal file
24
tools/log-page-events.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Page Event Logger Bookmarklet</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Page Event Logger Bookmarklet</h1>
|
||||
<p>A simple bookmarklet for logging jQuery Mobile page events. To use, bookmark the following link:</p>
|
||||
<script>
|
||||
document.write('<p><a id="bookmarklet-link" href="javascript:function loadScript(u){var s=document.createElement(\'script\');s.setAttribute(\'language\',\'javascript\');s.setAttribute(\'src\',u);document.body.appendChild(s);} loadScript(\'' + ( location.href.replace( /\.html/, ".js" ) ) + '\');">Page EventLogger Bookmark</a></p>');
|
||||
</script>
|
||||
<p>For platforms that don't allow bookmarking of <code>javascript:</code> urls, you can copy/paste the following source for the bookmarklet directly into the browser's location bar then hit enter or hit the "go" button on your keypad:</p>
|
||||
<p>
|
||||
<textarea id="ta" rows="10" cols="50"></textarea>
|
||||
</p>
|
||||
<p>NOTE: Some browsers like Chrome will strip off the javascript: prefix from the string above when you paste it into the location bar. Make sure what you pasted is prefixed by javascript: before attempting to load the bookmarklet.</p>
|
||||
<script>
|
||||
document.getElementById("ta").value = document.getElementById("bookmarklet-link").href;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
108
tools/log-page-events.js
Normal file
108
tools/log-page-events.js
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
/*!
|
||||
* jQuery Mobile v@VERSION
|
||||
* http://jquerymobile.com/
|
||||
*
|
||||
* Copyright 2011, jQuery Project
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
|
||||
// This is code that can be used as a simple bookmarklet for debugging
|
||||
// page loading and navigation in pages that use the jQuery Mobile framework.
|
||||
// All messages are sent to the browser's console.log so to see the messages,
|
||||
// you need to make sure you enable the console/log in your browser.
|
||||
|
||||
(function($, window, document) {
|
||||
if ( typeof $ === "undefined" ) {
|
||||
alert( "log-page-events.js requires jQuery core!" );
|
||||
return;
|
||||
}
|
||||
|
||||
var pageEvents = "mobileinit pagebeforechange pagechange pagechangefailed pagebeforeload pageload pageloadfailed pagebeforecreate pagecreate pageinit pagebeforeshow pageshow pagebeforehide pagehide pageremove";
|
||||
|
||||
function getElementDesc( ele )
|
||||
{
|
||||
var result = [];
|
||||
if ( ele ) {
|
||||
result.push( ele.nodeName.toLowerCase() );
|
||||
var c = ele.className;
|
||||
if ( c ) {
|
||||
c = c.replace( /^\s+|\s+$/, "" ).replace( /\s+/, " " );
|
||||
if (c) {
|
||||
result.push( "." + c.split( " " ).join( "." ) );
|
||||
}
|
||||
}
|
||||
if ( ele.id ){
|
||||
result.push( "#" + ele.id )
|
||||
}
|
||||
}
|
||||
return result.join( "" );
|
||||
}
|
||||
|
||||
function debugLog( msg )
|
||||
{
|
||||
console.log( msg );
|
||||
}
|
||||
|
||||
function getNativeEvent( event ) {
|
||||
|
||||
while ( event && typeof event.originalEvent !== "undefined" ) {
|
||||
event = event.originalEvent;
|
||||
}
|
||||
return event;
|
||||
}
|
||||
|
||||
function logEvent( event, data )
|
||||
{
|
||||
var result = event.type + " (" + (new Date).getTime() + ")\n";
|
||||
|
||||
switch( event.type )
|
||||
{
|
||||
case "pagebeforechange":
|
||||
case "pagechange":
|
||||
case "pagechangefailed":
|
||||
result += "\tpage: ";
|
||||
if ( typeof data.toPage === "string" ) {
|
||||
result += data.toPage;
|
||||
} else {
|
||||
result += getElementDesc( data.toPage[ 0 ] ) + "\n\tdata-url: " + data.toPage.jqmData( "url" );
|
||||
}
|
||||
result += "\n\n"
|
||||
break;
|
||||
case "pagebeforeload":
|
||||
case "pageloadfailed":
|
||||
result += "\turl: " + data.url + "\n\tabsUrl: " + data.absUrl + "\n\n";
|
||||
break;
|
||||
case "pageload":
|
||||
result += "\turl: " + data.url + "\n\tabsUrl: " + data.absUrl + "\n\tpage: " + getElementDesc( data.page[ 0 ] ) + "\n\n";
|
||||
break;
|
||||
case "pagebeforeshow":
|
||||
case "pageshow":
|
||||
case "pagebeforehide":
|
||||
case "pagehide":
|
||||
result += "\tpage: " + getElementDesc( event.target ) + "\n";
|
||||
result += "\tdata-url: " + $( event.target ).jqmData( "url" ) + "\n\n";
|
||||
break;
|
||||
case "pagebeforecreate":
|
||||
case "pagecreate":
|
||||
case "pageinit":
|
||||
result += "\telement: " + getElementDesc( event.target ) + "\n\n";
|
||||
break;
|
||||
case "hashchange":
|
||||
result += "\tlocation: " + location.href + "\n\n";
|
||||
break;
|
||||
case "popstate":
|
||||
var e = getNativeEvent( event );
|
||||
result += "\tlocation: " + location.href + "\n";
|
||||
result += "\tstate.hash: " + ( e.state && e.state.hash ? e.state.hash + "\n\n" : "" );
|
||||
break;
|
||||
}
|
||||
|
||||
debugLog( result );
|
||||
}
|
||||
|
||||
// Now add our logger.
|
||||
$( document ).bind( pageEvents, logEvent );
|
||||
$( window ).bind( "hashchange popstate", logEvent );
|
||||
|
||||
})( jQuery, window, document );
|
||||
|
|
@ -1 +1 @@
|
|||
1.0rc1
|
||||
1.0rc2pre
|
||||
Loading…
Reference in a new issue