jquery-archive · davepenfold · Oct 31, 2010 · Oct 22, 2010 · Oct 22, 2010 · Oct 22, 2010
diff --git a/Makefile b/Makefile
@@ -66,7 +66,7 @@ mobile:
 
 min: mobile
 	@@head -8 js/jquery.mobile.js > ${MIN}
-	@@java -jar ../jquery/build/google-compiler-20100917.jar --js ${MAX} --warning_level QUIET --js_output_file ${MIN}.tmp
+	@@java -jar build/google-compiler-20100917.jar --js ${MAX} --warning_level QUIET --js_output_file ${MIN}.tmp
 	@@cat ${MIN}.tmp >> ${MIN}
 	@@rm -f ${MIN}.tmp
 

diff --git a/docs/content/api-content.html b/docs/content/api-content.html
@@ -2,7 +2,7 @@
 <html> 
 	<head> 
 	<title>jQuery Mobile Docs - Content formatting</title> 
-	<link rel="stylesheet"  href="../../css/all" /> 
+	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
 </head> 
 <body> 

diff --git a/docs/content/content-collapsible.html b/docs/content/content-collapsible.html
@@ -2,9 +2,8 @@
 <html> 
 	<head> 
 	<title>jQuery Mobile Docs - Content formatting</title> 
-	<link rel="stylesheet"  href="../../css/all" /> 
+	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
 
 
 </head> 
@@ -102,8 +101,33 @@ <h3>Section 4: Collapsed list</h3>
 			</ul>
 		</div><!-- /section 4 -->
 
+		<h2>Nested Collapsibles</h2>
+		<div data-role="collapsible">
+			<h3>I'm a header</h3>
+			<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
+			<div data-role="collapsible">
+				<h3>I'm a nested collapsible header</h3>
+				<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
+			</div>
+		</div>
 
+		<h2>Collapsible sets</h2>
+		<p>By giving a parent element a data-role of collapsible-set, you can cause other collapsibles within that parent to close whenever a new one is opened, acting like an accordion widget:</p>
 
+		<div data-role="collapsible-set">
+			<div data-role="collapsible">
+				<h3>I'm a header in a set of collapsibles</h3>
+				<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+			</div>
+			<div data-role="collapsible" data-state="collapsed">
+				<h3>I'm a header in a set of collapsibles</h3>
+				<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+			</div>
+			<div data-role="collapsible" data-state="collapsed">
+				<h3>I'm a header in a set of collapsibles</h3>
+				<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+			</div>
+		</div>
 
 
 	</div><!-- /content -->

diff --git a/docs/content/content-grids.html b/docs/content/content-grids.html
@@ -2,7 +2,7 @@
 <html> 
 	<head> 
 	<title>jQuery Mobile Docs - Content formatting</title> 
-	<link rel="stylesheet"  href="../../css/all" /> 
+	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
 	<script type="text/javascript" src="../docs/docs.js"></script>
 

diff --git a/docs/content/content-html.html b/docs/content/content-html.html
@@ -2,7 +2,7 @@
 <html> 
 	<head> 
 	<title>jQuery Mobile Docs - Content formatting</title> 
-	<link rel="stylesheet"  href="../../css/all" /> 
+	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
 	<script type="text/javascript" src="../docs/docs.js"></script>
 

diff --git a/docs/content/content-themes.html b/docs/content/content-themes.html
@@ -2,7 +2,7 @@
 <html> 
 	<head> 
 	<title>jQuery Mobile Docs - Content formatting</title> 
-	<link rel="stylesheet"  href="../../css/all" /> 
+	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
 	<script type="text/javascript" src="../docs/docs.js"></script>
 </head> 

diff --git a/docs/content/index.html b/docs/content/index.html
@@ -2,7 +2,7 @@
 <html> 
 	<head> 
 	<title>jQuery Mobile Docs - Content formatting</title> 
-	<link rel="stylesheet"  href="../../css/all" /> 
+	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
 	<script type="text/javascript" src="../docs/docs.js"></script>
 </head> 

diff --git a/docs/forms/forms-all.html b/docs/forms/forms-all.html
@@ -4,7 +4,6 @@
 	<title>jQuery Mobile Docs - Forms</title> 
 	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
-	<script type="text/javascript" src="../docs/docs.js"></script>
 </head> 
 <body> 
 
@@ -30,8 +29,8 @@ <h2>Form elements</h2>
 			</div>
 
 			<div data-role="fieldcontain">
-	         <label for="name">Password:</label>
-	         <input type="password" name="name" id="name" value=""  />
+	         <label for="password">Password:</label>
+	         <input type="password" name="password" id="password" value=""  />
 			</div>
 
 			<div data-role="fieldcontain">

diff --git a/docs/pages/dialog-alt.html b/docs/pages/dialog-alt.html
@@ -2,7 +2,7 @@
 <html> 
 	<head> 
 	<title>jQuery Mobile Framework - Dialog Example</title> 
-	<link rel="stylesheet"  href="../../css/all" /> 
+	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
 </head> 
 <body> 

diff --git a/docs/pages/dialog-buttons.html b/docs/pages/dialog-buttons.html
@@ -2,7 +2,7 @@
 <html> 
 	<head> 
 	<title>jQuery Mobile Framework - Dialog Example</title> 
-	<link rel="stylesheet"  href="../../css/all" /> 
+	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
 </head> 
 <body> 

diff --git a/docs/pages/dialog-success.html b/docs/pages/dialog-success.html
@@ -2,7 +2,7 @@
 <html> 
 	<head> 
 	<title>jQuery Mobile Framework - Dialog Example</title> 
-	<link rel="stylesheet"  href="../../css/all" /> 
+	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
 </head> 
 <body> 

diff --git a/docs/pages/docs-link-scenarios.html b/docs/pages/docs-link-scenarios.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html> 
+<html> 
+	<head> 
+	<title>jQuery Mobile Docs - Pages</title> 
+	<link rel="stylesheet"  href="../../themes/default" /> 
+	<script type="text/javascript" src="../../js/all"></script>
+</head> 
+<body> 
+
+<div data-role="page">
+
+	<div data-role="header">
+		<h1>Linking pages</h1>
+	</div><!-- /header -->
+
+	<div data-role="content">
+
+			<p>jQuery Mobile is designed to work with simple page linking conventions. The following list demonstrates how different types of links will be handled, either remotely or through an Ajax Request.</p> 
+
+			<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
+				<li data-role="list-divider">Examples of links that work within a single-page (if the page exists)</li>
+				<li><a href="docs/pages/index.html">[href="docs/pages/index.html"]</a></li>
+				<li><a href="/docs/toolbars/index.html">[href="/docs/toolbars/index.html"]</a></li>
+				<li><a href="#somelocalID">[href="#somelocalID"]</a></li>
+				<li>Note: an full URL to the same-domain will also work</li>
+				<li data-role="list-divider">Examples of links that trigger a refresh</li>
+				<li><a href="docs/pages/index.html" rel="external">[rel="external"]</a></li>
+				<li><a href="docs/pages/index.html" target="_blank">[target="_blank"]</a></li>
+				<li><a href="mailto:john@doe.com">[href="mailto:john@doe.com"]</a></li>
+				<li><a href="tel:543-434-3454">[href="tel:543-434-3454"]</a></li>
+				<li><a href="http://google.com">[href="http://google.com"]</a></li>
+				<li data-role="list-divider">Links that return false</li>
+				<li><a href="#">[href="#"]</a></li>
+			</ul>
+
+	</div><!-- /content -->
+</div><!-- /page -->
+
+</body>
+</html>
diff --git a/docs/pages/transition-success.html b/docs/pages/transition-success.html
@@ -2,7 +2,7 @@
 <html> 
 	<head> 
 	<title>jQuery Mobile Framework - Dialog Example</title> 
-	<link rel="stylesheet"  href="../../css/all" /> 
+	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
 </head> 
 <body> 
@@ -14,7 +14,7 @@ <h1>Ta-da!</h1>
 	</div><!-- /header -->
 
 	<div data-role="content">
-		<p>That was an animated page transition effect that we added with a <class>code> data-transition</code> attribute on the link.</p>
+		<p>That was an animated page transition effect that we added with a <code>data-transition</code> attribute on the link.</p>
 		<p>Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.</p>
 		<p>What do you think?</p>
 		<a href="docs-transitions.html" data-role="button" data-theme="b">I like it</a>   
@@ -23,4 +23,4 @@ <h1>Ta-da!</h1>
 
 
 </body>
-</html>
+</html>
diff --git a/experiments/photos/_photo2.html b/experiments/photos/_photo2.html
@@ -4,29 +4,27 @@
 	<title>jQuery Mobile Framework - Photo 1</title> 
 	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
+		<link rel="stylesheet"  href="photos.css" />
+	<script type="text/javascript" src="photos.js"></script>
 </head> 
 <body> 
 
-<div data-role="page" data-fullscreen="true">
-	<link rel="stylesheet"  href="photos.css" />
-	<script type="text/javascript" src="photos.js"></script>
+<div data-role="page" data-fullscreen="true" class="photoview">
 
 	<div data-role="header" id="">
 		<h1>A canoe</h1>
 
 	</div>
 
-	<div data-role="content" class="photoview">
+	<div data-role="content" >
 
-		<a href="_photo3.html">
-			<img src="images/photo-canoe.jpeg" alt="photo-canoe" />
-		</a>
+		<img src="images/photo-canoe.jpeg" alt="photo-canoe" />
 
 	</div>
 
 	<div class="ui-footer ui-bar-a">
-		<a href="_photo1.html">Prev</a>
-		<a href="_photo3.html">Next</a>
+		<a href="index.html" class="prev">Prev</a>
+		<a href="_photo3.html" class="next">Next</a>
 	</div>
 
 

diff --git a/experiments/photos/_photo3.html b/experiments/photos/_photo3.html
@@ -4,29 +4,27 @@
 	<title>jQuery Mobile Framework - Photo 1</title> 
 	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
+		<link rel="stylesheet"  href="photos.css" />
+	<script type="text/javascript" src="photos.js"></script>
 </head> 
 <body> 
 
-<div data-role="page" data-fullscreen="true">
-	<link rel="stylesheet"  href="photos.css" />
-	<script type="text/javascript" src="photos.js"></script>
+<div data-role="page" data-fullscreen="true" class="photoview">
 
 	<div data-role="header" id="photoview">
 		<h1>A dock</h1>
 
 	</div>
 
-	<div data-role="content" class="photoview">
+	<div data-role="content" >
 
-		<a href="_photo4.html">
-			<img src="images/photo-dock.jpeg" alt="photo-dock" />
-		</a>
+		<img src="images/photo-dock.jpeg" alt="photo-dock" />
 
 	</div>
 
 	<div class="ui-footer ui-bar-a">
-		<a href="_photo2.html">Prev</a>
-		<a href="_photo4.html">Next</a>
+		<a href="_photo2.html" class="prev">Prev</a>
+		<a href="_photo4.html" class="next">Next</a>
 	</div>
 
 

diff --git a/experiments/photos/_photo4.html b/experiments/photos/_photo4.html
@@ -4,29 +4,27 @@
 	<title>jQuery Mobile Framework - Photo 1</title> 
 	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
+	<link rel="stylesheet"  href="photos.css" />
+	<script type="text/javascript" src="photos.js"></script>
 </head> 
 <body> 
 
-<div data-role="page" data-fullscreen="true">
-	<link rel="stylesheet"  href="photos.css" />
-	<script type="text/javascript" src="photos.js"></script>
+<div data-role="page" data-fullscreen="true" class="photoview">
 
 	<div data-role="header">
 		<h1>A kayak</h1>
 
 	</div>
 
-	<div data-role="content" class="photoview">
+	<div data-role="content" >
 
-		<a href="_photo5.html">
-			<img src="images/photo-kayak.jpeg" alt="photo-kayak" />
-		</a>
+		<img src="images/photo-kayak.jpeg" alt="photo-kayak" />
 
 	</div>
 
 	<div class="ui-footer ui-bar-a">
-		<a href="_photo3.html">Prev</a>
-		<a href="_photo5.html">Next</a>
+		<a href="_photo3.html" class="prev">Prev</a>
+		<a href="_photo5.html" class="next">Next</a>
 	</div>
 
 

diff --git a/experiments/photos/_photo5.html b/experiments/photos/_photo5.html
@@ -4,28 +4,26 @@
 	<title>jQuery Mobile Framework - Photo 1</title> 
 	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
+		<link rel="stylesheet"  href="photos.css" />
+	<script type="text/javascript" src="photos.js"></script>
 </head> 
 <body> 
 
-<div data-role="page" data-fullscreen="true">
-	<link rel="stylesheet"  href="photos.css" />
-	<script type="text/javascript" src="photos.js"></script>
+<div data-role="page" data-fullscreen="true" class="photoview">
 	<div data-role="header">
 		<h1>Nathan running</h1>
 
 	</div>
 
-	<div data-role="content" class="photoview">
+	<div data-role="content" >
 
-		<a href="_photo6.html">
-			<img src="images/photo-run.jpeg" alt="photo-run"  />
-		</a>
+		<img src="images/photo-run.jpeg" alt="photo-run"  />
 
 	</div>
 
 	<div class="ui-footer ui-bar-a">
-		<a href="_photo4.html">Prev</a>
-		<a href="_photo6.html">Next</a>
+		<a href="_photo4.html" class="prev">Prev</a>
+		<a href="_photo6.html" class="next">Next</a>
 	</div>
 
 

diff --git a/experiments/photos/_photo6.html b/experiments/photos/_photo6.html
@@ -4,27 +4,26 @@
 	<title>jQuery Mobile Framework - Photo 1</title> 
 	<link rel="stylesheet"  href="../../themes/default" /> 
 	<script type="text/javascript" src="../../js/all"></script>
+		<link rel="stylesheet"  href="photos.css" />
+	<script type="text/javascript" src="photos.js"></script>
 </head> 
 <body> 
 
-<div data-role="page" data-fullscreen="true">
-	<link rel="stylesheet"  href="photos.css" />
-	<script type="text/javascript" src="photos.js"></script>
+<div data-role="page" data-fullscreen="true" class="photoview">
 	<div data-role="header">
 		<h1>Sandy beach</h1>
 
 	</div>
 
-	<div data-role="content" class="photoview">
+	<div data-role="content" >
 
-		<a href="_photo7.html">
-			<img src="images/photo-sand.jpeg" alt="photo-sand"  />
-		</a>
+		<img src="images/photo-sand.jpeg" alt="photo-sand"  />
 
 	</div>
 
 	<div class="ui-footer ui-bar-a">
-		<a href="_photo5.html">Prev</a>
+		<a href="_photo5.html" class="prev">Prev</a>
+		<a href="index.html" class="next">First</a>
 	</div>