Permalink
Browse files

Cleaned up several samples, and clarified descriptive comments.

  • Loading branch information...
1 parent bbace58 commit 2d3df5ab2e76204f05cfc124a9377f07c8423208 @BorisMoore committed Mar 22, 2011
@@ -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 @@
</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>
@@ -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 @@
</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>
@@ -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 @@
</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>
@@ -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 @@
</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>
@@ -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 @@
</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>
@@ -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
@@ -13,7 +13,7 @@
<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">
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
Oops, something went wrong.

0 comments on commit 2d3df5a

Please sign in to comment.