Skip to content

Commit 9fd7c16

Browse files
toddparkertoddparker
committed
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.
1 parent 4d35966 commit 9fd7c16

File tree

9 files changed

+360
-0
lines changed

9 files changed

+360
-0
lines changed

‎docs/api/globalconfig.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ <h3>The mobileinit event</h3>
6868
</code>
6969
</pre>
7070

71+
<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>
7172

7273
<h2>Configurable options</h2>
7374
<p>The following defaults are configurable via the <code>$.mobile</code> object:</p>

‎docs/config/dialogTransition.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Docs - Configuration</title>
7+
<link rel="stylesheet" href="../../themes/default/" />
8+
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
9+
<script src="../../js/jquery.js"></script>
10+
<script>
11+
$(document).bind("mobileinit", function(){
12+
$.mobile.defaultDialogTransition = 'flip';
13+
});
14+
</script>
15+
16+
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
17+
<script src="../_assets/js/jqm-docs.js"></script>
18+
<script src="../../js/"></script>
19+
</head>
20+
<body>
21+
22+
<div data-role="page" class="type-index">
23+
24+
<div data-role="header" data-theme="f">
25+
<h1>Config applied</h1>
26+
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
27+
</div><!-- /header -->
28+
29+
<div data-role="content">
30+
31+
<h2>defaultDialogTransition is now "flip"</h2>
32+
<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>
33+
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
34+
<a href="../pages/dialog.html" data-role="button" data-rel="dialog">Or open a basic dialog</a>
35+
36+
</div><!-- /ui-body wrapper -->
37+
</div><!-- /page -->
38+
39+
</body>
40+
</html>

‎docs/config/index.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Docs - Configuration</title>
7+
<link rel="stylesheet" href="../../themes/default/" />
8+
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
9+
<script src="../../js/jquery.js"></script>
10+
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
11+
<script src="../_assets/js/jqm-docs.js"></script>
12+
<script src="../../js/"></script>
13+
</head>
14+
<body>
15+
16+
<div data-role="page" class="type-index">
17+
18+
<div data-role="header" data-theme="f">
19+
<h1>Pages</h1>
20+
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
21+
</div><!-- /header -->
22+
23+
<div data-role="content">
24+
<h2>Global config tests</h2>
25+
<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>
26+
27+
28+
<ul data-role="listview" data-inset="true">
29+
<li>
30+
<a href="pushState.html" data-ajax="false">
31+
<h3>pushStateEnabled - False</h3>
32+
<p>Enhancement to use history.replaceState in supported browsers, to convert the hash-based Ajax URL into the full document path. </p>
33+
</a>
34+
</li>
35+
<li>
36+
<a href="touchOverflow.html" data-ajax="false">
37+
<h3>touchOverflowEnabled - True</h3>
38+
<p>Enable smoother page transitions and true fixed toolbars in devices that support both the overflow: and overflow-scrolling: touch; CSS properties.</p>
39+
</a>
40+
</li>
41+
<li>
42+
<a href="pageTransition.html" data-ajax="false">
43+
<h3>defaultPageTransition - Fade</h3>
44+
<p>Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.</p>
45+
</a>
46+
</li>
47+
<li>
48+
<a href="dialogTransition.html" data-ajax="false">
49+
<h3>defaultDialogTransition - Flip</h3>
50+
<p>Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions by default.</p>
51+
</a>
52+
</li>
53+
<li>
54+
<a href="minScrollBack.html" data-ajax="false">
55+
<h3>minScrollBack - 999</h3>
56+
<p>Minimum scroll distance that will be remembered when returning to a page.</p>
57+
</a>
58+
</li>
59+
<li>
60+
<a href="loadingMessage.html" data-ajax="false">
61+
<h3>loadingMessage - false</h3>
62+
<p>Set the text that appears when a page is loading. If set to false, the message will not appear at all.</p>
63+
</a>
64+
</li>
65+
<li>
66+
<a href="pageLoadErrorMessage.html" data-ajax="false">
67+
<h3>pageLoadErrorMessage - "Yikes, we broke the internet!"</h3>
68+
<p>Set the text that appears when a page fails to load through Ajax.</p>
69+
</a>
70+
</li>
71+
</ul>
72+
73+
74+
</div><!-- /ui-body wrapper -->
75+
</div><!-- /page -->
76+
77+
</body>
78+
</html>

‎docs/config/loadingMessage.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Docs - Configuration</title>
7+
<link rel="stylesheet" href="../../themes/default/" />
8+
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
9+
<script src="../../js/jquery.js"></script>
10+
<script>
11+
$(document).bind("mobileinit", function(){
12+
$.mobile.loadingMessage = false;
13+
});
14+
</script>
15+
16+
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
17+
<script src="../_assets/js/jqm-docs.js"></script>
18+
<script src="../../js/"></script>
19+
</head>
20+
<body>
21+
22+
<div data-role="page" class="type-index">
23+
24+
<div data-role="header" data-theme="f">
25+
<h1>Config applied</h1>
26+
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
27+
</div><!-- /header -->
28+
29+
<div data-role="content">
30+
31+
<h2>loadingMessage is now disabled</h2>
32+
<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>
33+
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
34+
35+
36+
</div><!-- /ui-body wrapper -->
37+
</div><!-- /page -->
38+
39+
</body>
40+
</html>

‎docs/config/minScrollBack.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Docs - Configuration</title>
7+
<link rel="stylesheet" href="../../themes/default/" />
8+
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
9+
<script src="../../js/jquery.js"></script>
10+
<script>
11+
$(document).bind("mobileinit", function(){
12+
$.mobile.minScrollBack = 999;
13+
});
14+
</script>
15+
16+
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
17+
<script src="../_assets/js/jqm-docs.js"></script>
18+
<script src="../../js/"></script>
19+
</head>
20+
<body>
21+
22+
<div data-role="page" class="type-index">
23+
24+
<div data-role="header" data-theme="f">
25+
<h1>Config applied</h1>
26+
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
27+
</div><!-- /header -->
28+
29+
<div data-role="content">
30+
31+
<h2>minScrollBack is now set to 999 (disabled)</h2>
32+
<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>
33+
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
34+
35+
36+
</div><!-- /ui-body wrapper -->
37+
</div><!-- /page -->
38+
39+
</body>
40+
</html>

‎docs/config/pageLoadErrorMessage.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Docs - Configuration</title>
7+
<link rel="stylesheet" href="../../themes/default/" />
8+
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
9+
<script src="../../js/jquery.js"></script>
10+
<script>
11+
$(document).bind("mobileinit", function(){
12+
$.mobile.pageLoadErrorMessage = 'Yikes, we broke the internet!';
13+
});
14+
</script>
15+
16+
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
17+
<script src="../_assets/js/jqm-docs.js"></script>
18+
<script src="../../js/"></script>
19+
</head>
20+
<body>
21+
22+
<div data-role="page" class="type-index">
23+
24+
<div data-role="header" data-theme="f">
25+
<h1>Config applied</h1>
26+
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
27+
</div><!-- /header -->
28+
29+
<div data-role="content">
30+
31+
<h2>pageLoadErrorMessage is now "Yikes, we broke the internet!"</h2>
32+
<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>
33+
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
34+
<a href="broken.html" data-role="button" data-rel="dialog">Or try this broken link</a>
35+
36+
37+
</div><!-- /ui-body wrapper -->
38+
</div><!-- /page -->
39+
40+
</body>
41+
</html>

‎docs/config/pageTransition.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Docs - Configuration</title>
7+
<link rel="stylesheet" href="../../themes/default/" />
8+
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
9+
<script src="../../js/jquery.js"></script>
10+
<script src="../_assets/js/jqm-docs.js"></script><!-- Moving the docs JS up here because it was overriding with my override -->
11+
12+
<script>
13+
$(document).bind("mobileinit", function(){
14+
$.mobile.defaultPageTransition = 'fade';
15+
});
16+
</script>
17+
18+
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
19+
<script src="../../js/"></script>
20+
</head>
21+
<body>
22+
23+
<div data-role="page" class="type-index">
24+
25+
<div data-role="header" data-theme="f">
26+
<h1>Config applied</h1>
27+
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
28+
</div><!-- /header -->
29+
30+
<div data-role="content">
31+
32+
<h2>defaultPageTransition is now "fade"</h2>
33+
<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>
34+
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
35+
36+
</div><!-- /ui-body wrapper -->
37+
</div><!-- /page -->
38+
39+
</body>
40+
</html>

‎docs/config/pushState.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Docs - Configuration</title>
7+
<link rel="stylesheet" href="../../themes/default/" />
8+
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
9+
<script src="../../js/jquery.js"></script>
10+
<script>
11+
$(document).bind("mobileinit", function(){
12+
$.mobile.pushStateEnabled = false;
13+
});
14+
</script>
15+
16+
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
17+
<script src="../_assets/js/jqm-docs.js"></script>
18+
<script src="../../js/"></script>
19+
</head>
20+
<body>
21+
22+
<div data-role="page" class="type-index">
23+
24+
<div data-role="header" data-theme="f">
25+
<h1>Config applied</h1>
26+
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
27+
</div><!-- /header -->
28+
29+
<div data-role="content">
30+
31+
<h2>pushStateEnabled is now disabled</h2>
32+
<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>
33+
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
34+
35+
36+
</div><!-- /ui-body wrapper -->
37+
</div><!-- /page -->
38+
39+
</body>
40+
</html>

‎docs/config/touchOverflow.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Docs - Configuration</title>
7+
<link rel="stylesheet" href="../../themes/default/" />
8+
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
9+
<script src="../../js/jquery.js"></script>
10+
<script>
11+
$(document).bind("mobileinit", function(){
12+
$.mobile.touchOverflowEnabled = true;
13+
});
14+
</script>
15+
16+
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
17+
<script src="../_assets/js/jqm-docs.js"></script>
18+
<script src="../../js/"></script>
19+
</head>
20+
<body>
21+
22+
<div data-role="page" class="type-index">
23+
24+
<div data-role="header" data-theme="f">
25+
<h1>Config applied</h1>
26+
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
27+
</div><!-- /header -->
28+
29+
<div data-role="content">
30+
31+
<h2>touchOverflowEnabled is now active</h2>
32+
<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>
33+
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
34+
35+
36+
</div><!-- /ui-body wrapper -->
37+
</div><!-- /page -->
38+
39+
</body>
40+
</html>

0 commit comments

Comments
 (0)