Cleaned up several samples, and clarified descriptive comments.

Anewczs · Mar 22, 2011 · 2d3df5a · 2d3df5a
1 parent bbace58
commit 2d3df5a
Show file tree

Hide file tree

Showing 17 changed files with 117 additions and 129 deletions.
diff --git a/demos/movies/PagesCore/movies.html b/demos/movies/PagesCore/movies.html
@@ -7,7 +7,7 @@
 
 This version of the movies sample demo uses the
 	$( templateSelector ).tmpl( data ).appendTo( targetSelector )
-pattern, and does not use the tmplCmd plugin or the rendered event.
+pattern, and does not use the tmplPlus features (.tmplCmd, or the rendered event).
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
@@ -38,7 +38,7 @@ <h1>Netflix: Book a Movie...</h1>
 	</table>
 	<br/>
 </div>
-<script src="http://code.jquery.com/jquery.js"></script>
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
 <script src="../../../jquery.tmpl.js" type="text/javascript"></script>
 <script src="../components/jquery.pager.js" type="text/javascript"></script>
 <script src="../components/jquery-ui-1.8.1.custom.js" type="text/javascript"></script>

diff --git a/demos/movies/PagesCore/moviesNoGlobals.html b/demos/movies/PagesCore/moviesNoGlobals.html
@@ -7,7 +7,7 @@
 
 This version of the movies sample demo uses the
 	$( templateSelector ).tmpl( data ).appendTo( targetSelector )
-pattern, and does not use the tmplCmd plugin or the rendered event.
+pattern, and does not use the tmplPlus features (.tmplCmd, or the rendered event).
 
 Notice that in the example there are no global variables:
 	Code is wrapped in  a function closure: (function($) {...})(jQuery);
@@ -46,7 +46,7 @@ <h1>Netflix: Book a Movie...</h1>
 	</table>
 	<br/>
 </div>
-<script src="http://code.jquery.com/jquery.js"></script>
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
 <script src="../../../jquery.tmpl.js" type="text/javascript"></script>
 <script src="../components/jquery.pager.js" type="text/javascript"></script>
 <script src="../components/jquery-ui-1.8.1.custom.js" type="text/javascript"></script>

diff --git a/demos/movies/PagesTmplPlus/movies1.html b/demos/movies/PagesTmplPlus/movies1.html
@@ -3,12 +3,9 @@
 This sample illustrates using templates for a more complete and
 realistic scenario.
 
-It uses the NetFlix OData JSONP services as a source of data.
-
-This version of the movies sample demo uses the
-	$( templateSelector ).tmpl( data ).appendTo( targetSelector )
-pattern, and also uses the tmplCmd plugin.
-It does not use the rendered event.
+It is similar to the movies/PagesCore/movies.html sample,
+except that it uses jquery.tmplPlus.js in order to take advantage
+of the .tmplCmd() features. It does not use the rendered event.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
@@ -39,7 +36,7 @@ <h1>Netflix: Book a Movie...</h1>
 	</table>
 	<br/>
 </div>
-<script src="http://code.jquery.com/jquery.js"></script>
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
 <script src="../../../jquery.tmpl.js" type="text/javascript"></script>
 <script src="../../../jquery.tmplPlus.js" type="text/javascript"></script>
 <script src="../components/jquery.pager.js" type="text/javascript"></script>

diff --git a/demos/movies/PagesTmplPlus/movies2.html b/demos/movies/PagesTmplPlus/movies2.html
@@ -3,11 +3,9 @@
 This sample illustrates using templates for a more complete and
 realistic scenario.
 
-It uses the NetFlix OData JSONP services as a source of data.
-
-This version of the movies sample demo uses the
-	$( templateSelector ).tmpl( data ).appendTo( targetSelector )
-pattern, and also uses the tmplCmd plugin and the rendered event.
+It is similar to the movies/PagesCore/movies.html sample,
+except that it uses jquery.tmplPlus.js in order to take advantage
+of the .tmplCmd() features and the rendered event.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
@@ -38,7 +36,7 @@ <h1>Netflix: Book a Movie...</h1>
 	</table>
 	<br/>
 </div>
-<script src="http://code.jquery.com/jquery.js"></script>
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
 <script src="../../../jquery.tmpl.js" type="text/javascript"></script>
 <script src="../../../jquery.tmplPlus.js" type="text/javascript"></script>
 <script src="../components/jquery.pager.js" type="text/javascript"></script>

diff --git a/demos/movies/PagesTmplPlus/movies3.html b/demos/movies/PagesTmplPlus/movies3.html
@@ -3,11 +3,11 @@
 This sample illustrates using templates for a more complete and
 realistic scenario.
 
-It uses the NetFlix OData JSONP services as a source of data.
-
-This version of the movies sample demo uses the
-	$( targetSelector ).append( templateSelector, data )
-pattern, and also uses the tmplCmd plugin and the rendered event.
+It is similar to the movies/PagesCore/movies.html sample,
+except that it uses jquery.tmplPlus.js in order to take advantage
+of the
+$( targetSelector ).append( templateSelector, data )
+pattern, as well as the .tmplCmd() features and the rendered event.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
@@ -38,7 +38,7 @@ <h1>Netflix: Book a Movie...</h1>
 	</table>
 	<br/>
 </div>
-<script src="http://code.jquery.com/jquery.js"></script>
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
 <script src="../../../jquery.tmpl.js" type="text/javascript"></script>
 <script src="../../../jquery.tmplPlus.js" type="text/javascript"></script>
 <script src="../components/jquery.pager.js" type="text/javascript"></script>

diff --git a/demos/movies/css/movies.css b/demos/movies/css/movies.css
@@ -110,6 +110,7 @@
 	margin-bottom: 10px;
 	padding: 8px;
 	background-color: #fff;
+	height: 180px;
 }
 
 #movieList div div
@@ -118,6 +119,8 @@
 	float: left;
 	width: 120px;
 	height: 150px;
+	float: left;
+	clear: both;
 }
 
 #movieList div img
@@ -132,7 +135,10 @@
 
 .buyButton
 {
-	/* 	background: url(buyButton.png) no-repeat 0px -20px) */
+	float: left;
+	clear: both;
+	margin-left: 6px;
+	margin-top: 6px;
 }
 
 #bookingsList

diff --git a/demos/samplesCore/Interactive/tabsWrapNested.html b/demos/samplesCore/Interactive/tabsWrapNested.html
@@ -13,7 +13,7 @@ <h1>Tabs</h1>
 
 <div id="tabsView">..loading</div>
 
-<script src="http://code.jquery.com/jquery.js"></script>
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
 <script src="../../../jquery.tmpl.js" type="text/javascript"></script>
 
 <script id="tabsTmpl" type="text/x-jquery-tmpl">

diff --git a/demos/samplesCore/basic.html b/demos/samplesCore/basic.html
@@ -1,15 +1,20 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <!--
 This sample illustrates some basic templating features and scenarios.
 -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
 <style type="text/css">
 	.clickable 	{
 		cursor:pointer;
 		color: Blue;
 	}
 </style>
-<script src="http://code.jquery.com/jquery.js"></script>
+</head>
+<body>
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
 <script src="../../jquery.tmpl.js" type="text/javascript"></script>
-<script>
+<script type="text/javascript">
 
 var dataObject = {
 	firstName: "John",
@@ -131,3 +136,6 @@
 <ul><li class="multiple">first</li><li class="multiple">last</li></ul>
 
 <div class="target"></div>
+
+</body>
+</html>
diff --git a/demos/samplesCore/composition.html b/demos/samplesCore/composition.html
@@ -1,6 +1,9 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <!--
 This sample illustrates template composition, including passing parameters to a {{tmpl}} tag.
 -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
 <style type="text/css">
 	.peopleTable td { border:2px solid #555; text-align:center; }
 	.person{ background-color:#AFA; }
@@ -9,10 +12,12 @@
 	.separator { background-color:#C77; height:6px;}
 	.peopleTable { border-collapse:collapse; border:2px solid #555; }
 </style>
+</head>
+<body>
 
-<script src="http://code.jquery.com/jquery.js"></script>
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
 <script src="../../jquery.tmpl.js" type="text/javascript"></script>
-<script>
+<script type="text/javascript">
 var people = [
 	{
 		firstName: "John",
@@ -89,3 +94,5 @@
 
 <table class="peopleTable"><tbody></tbody></table>
 
+</body>
+</html>
diff --git a/demos/samplesCore/conditional.html b/demos/samplesCore/conditional.html
@@ -1,11 +1,13 @@
-<!--
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
 This sample illustrates use of conditional template tags {{if}} and {{else}}.
 The comment tag {{! }} is also shown.
 -->
-
-<script src="http://code.jquery.com/jquery.js"></script>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<body>
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
 <script src="../../jquery.tmpl.js" type="text/javascript"></script>
-<script>
+<script type="text/javascript">
 $(function(){
 	$( "#movieTemplate" )
 	.tmpl( movies )
@@ -34,3 +36,6 @@
 </script>
 
 <ul id="movieList"></ul>
+
+</body>
+</html>
diff --git a/demos/samplesCore/each.html b/demos/samplesCore/each.html
@@ -1,7 +1,10 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <!--
 This sample illustrates using the {{each}} template tag, 
 for iterative rendering of nested markup within a template.
 -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
 <style type="text/css">
 	.peopleTable td { border:2px solid #555; text-align:center; }
 	.person{ background-color:#AFA; }
@@ -10,10 +13,11 @@
 	.cityseparator { background-color:#CCC; height:4px;}
 	.peopleTable { border-collapse:collapse; border:2px solid #555; }
 </style>
-
-<script src="http://code.jquery.com/jquery.js"></script>
+</head>
+<body>
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
 <script src="../../jquery.tmpl.js" type="text/javascript"></script>
-<script>
+<script type="text/javascript">
 $(function(){
 	$("#tmplPeople")
 		.tmpl( people )
@@ -77,3 +81,5 @@
 	<tr class="separator"><td colspan="2"></td></tr>
 </tbody></table>
 
+</body>
+</html>
diff --git a/demos/samplesCore/parameters.html b/demos/samplesCore/parameters.html
@@ -1,6 +1,9 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <!--
 This sample illustrates using the {{if}}, {{each}} and {{tmpl}} template tags, with parameters.
 -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
 <style type="text/css">
 	.peopleTable td { border:2px solid #555; text-align:center; }
 	.person{ background-color:#AFA; }
@@ -9,10 +12,11 @@
 	.cityseparator { background-color:#CCC; height:4px;}
 	.peopleTable { border-collapse:collapse; border:2px solid #555; }
 </style>
-
-<script src="http://code.jquery.com/jquery.js"></script>
+</head>
+<body>
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
 <script src="../../jquery.tmpl.js" type="text/javascript"></script>
-<script>
+<script type="text/javascript">
 $(function(){
 	$("#tmplPeople")
 		.tmpl( people )
@@ -96,3 +100,5 @@
 	<tr class="separator"><td colspan="3"></td></tr>
 </tbody></table>
 
+</body>
+</html>
diff --git a/demos/samplesTmplPlus/basic.html b/demos/samplesTmplPlus/basic.html
@@ -1,10 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <!--
-This sample illustrates some basic templating features and scenarios.
+This sample is equivalent to the samplesCore/basic.html sample, 
+except that it uses jquery.tmplPlus.js in order to take advantage 
+of the alternative API: 
+    $( targetContainer ).append( template, data, options );
+rather than 
+	$( template ).tmpl( data, options ).appendTo( targetContainer );
 -->
-<script src="http://code.jquery.com/jquery.js"></script>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<body>
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
 <script src="../../jquery.tmpl.js" type="text/javascript" ></script>
 <script src="../../jquery.tmplPlus.js" type="text/javascript"></script>
-<script>
+<script type="text/javascript">
 
 var dataObject = {
 	firstName: "John",
@@ -93,3 +101,5 @@
 
 <div id="target">Target</div>
 
+</body>
+</html>
diff --git a/demos/samplesTmplPlus/composition.html b/demos/samplesTmplPlus/composition.html
@@ -1,6 +1,14 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <!--
-This sample illustrates template composition, including passing parameters to a {{tmpl}} tag.
+This sample is equivalent to the samplesCore/composition.html sample, 
+except that it uses jquery.tmplPlus.js in order to take advantage 
+of the alternative API: 
+    $( targetContainer ).append( template, data, options );
+rather than 
+	$( template ).tmpl( data, options ).appendTo( targetContainer );
 -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
 <style type="text/css">
 	.peopleTable td { border:2px solid #555; text-align:center; }
 	.person{ background-color:#AFA; }
@@ -9,11 +17,13 @@
 	.separator { background-color:#C77; height:6px;}
 	.peopleTable { border-collapse:collapse; border:2px solid #555; }
 </style>
+</head>
+<body>
 
-<script src="http://code.jquery.com/jquery.js"></script>
+<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
 <script src="../../jquery.tmpl.js" type="text/javascript"></script>
 <script src="../../jquery.tmplPlus.js" type="text/javascript"></script>
-<script>
+<script type="text/javascript">
 var people = [
 	{
 		firstName: "John",
@@ -89,3 +99,5 @@
 
 <table class="peopleTable"><tbody></tbody></table>
 
+</body>
+</html>