mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-24 16:14:44 +00:00
Created a set of static global config test pages
This will make it easy to quickly test key settings by going to: jquerymobile.com/test/config This is a bit fragile because refreshing or hitting a link with rel=external or ajax=false will lose the setting.
This commit is contained in:
toddparker
parent
4d35966e69
commit
9fd7c160ef
9 changed files with 360 additions and 0 deletions
|
|
@ -68,6 +68,7 @@ $(document).bind("mobileinit", function(){
|
|||
</code>
|
||||
</pre>
|
||||
|
||||
<p>To quickly preview a few of these global configuration options in action, check out the <a href="../config/index.html">config demo pages</a>.</p>
|
||||
|
||||
<h2>Configurable options</h2>
|
||||
<p>The following defaults are configurable via the <code>$.mobile</code> object:</p>
|
||||
|
|
|
|||
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>
|
||||
78
docs/config/index.html
Normal file
78
docs/config/index.html
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<!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>
|
||||
</ul>
|
||||
|
||||
|
||||
</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>
|
||||
Loading…
Reference in a new issue