Add a few more demo pages - development working page, and linked agai…

…nst jQM latest soures
eromba · Jun 11, 2011 · 137af80 · 137af80
1 parent 6be233b
commit 137af80
Show file tree

Hide file tree

Showing 3 changed files with 388 additions and 2 deletions.
diff --git a/index.php b/index.php
@@ -4,7 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 	<title>jQueryMobile - DateBox Demo</title>
 	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
-	<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.css" rel="stylesheet" /> 
+	<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" rel="stylesheet" /> 
 
 	<!-- NOTE: Script load order is significant! -->
 
@@ -16,7 +16,7 @@
 	</script>
 	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
 	<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
-	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.js"></script>
+	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
 
 </head>
 <body>
@@ -307,6 +307,12 @@ function updateEndDate() { // UPDATE END DATE FIELD
 			</div>
 
 		</div></div>
+		<div data-role="collapsible" data-collapsed="true">
+			<h3>Other Demos</h3>
+			<p>These other demos are my working pages - they break often.</p>
+			<p><a data-role="button" rel="external" href="/jQM-DateBox/tests/dev.php">Very simple devel overview.</a></p>
+			<p><a data-role="button" rel="external" href="/jQM-DateBox/tests/testing.php">This page, linked against jQM latest sources instead.</a></p>
+		</div>
 		<div data-role="collapsible">
 			<!-- NOTE: When running locally, just nuke this section, or go grab PHP Markdown -->
 			<h3>Readme File</h3>

diff --git a/tests/dev.php b/tests/dev.php
@@ -0,0 +1,55 @@
+<!DOCTYPE html> 
+<html lang="en"> 
+<head> 
+	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
+	<title>jQueryMobile - DateBox Demo</title>
+	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
+	<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.css" rel="stylesheet" /> 
+
+	<!-- NOTE: Script load order is significant! -->
+
+	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
+	<script type="text/javascript">
+		$( document ).bind( "mobileinit", function(){
+			$.mobile.page.prototype.options.degradeInputs.date = 'text';
+		});	
+	</script>
+	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
+	<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
+	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.js"></script>
+	
+</head>
+<body>
+<div data-role="page" data-theme="a" id="main"> 
+	<div data-role="header"> 
+		<h1>jQueryMobile - Dev Page</h1>
+	</div>
+	<div data-role="content" data-theme="c">
+		<div data-role="fieldcontain">
+			<label for="aa">Cal</label>
+			<input name="aa" type="date" data-role="datebox" data-options='{"mode": "calbox", "calWeekMode": "true", "pickPageHighButtonTheme": "a", "pickPageButtonTheme": "d", "afterToday":true}' id="aa" />
+		</div>
+		<div data-role="fieldcontain">
+			<label for="bb">Slide</label>
+			<input name="bb" type="date" data-role="datebox" data-options='{"mode": "slidebox"}' id="bb" />
+		</div>
+		<div data-role="fieldcontain">
+			<label for="cc">Droid</label>
+			<input name="cc" type="date" data-role="datebox" data-options='{"mode": "datebox"}' id="cc" />
+		</div>
+		<div data-role="fieldcontain">
+			<label for="dd">Time</label>
+			<input name="dd" type="text" data-role="datebox" data-options='{"mode": "timebox", "minuteStep": 15, "timeFormat":12}' id="dd" />
+		</div>
+		<div data-role="fieldcontain">
+			<label for="ee">Length</label>
+			<input name="ee" type="text" data-role="datebox" data-options='{"mode": "durationbox", "durationNoDays":true, "durationSteppers":{"d":1,"h":1,"i":15,"s":20}}' id="ee" />
+		</div>
+		
+		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+	</div>
+	<div data-role="footer">
+		<a href="https://github.com/jtsage/jquery-mobile-datebox">GitHub Source</a><a rel='external' href="http://dev.jtsage.com/blog/">Blog</a><a href="mailto:jtsage+datebox@gmail.com">Contact</a>
+	</div>
+</div>
+</html>