Skip to content

Commit

Permalink
Added support for 'wrapped templates'.
Browse files Browse the repository at this point in the history
Additional samples illustrating wrapping feature provided, under
"demos/samplesCore/interactivity".
Fairly significant changes in tmpl.js to support this functionality...
  • Loading branch information
BorisMoore committed Aug 4, 2010
1 parent 443352d commit eca932f
Showing 7 changed files with 550 additions and 35 deletions.
4 changes: 1 addition & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
A jQuery templating plugin - created for demonstration purposes.
A jQuery templating plugin.
____________________________________________________________________

// Render one LI, filled with data, then append it into the UL
@@ -41,5 +41,3 @@ ____________________________________________________________________

____________________________________________________________________

A demo page using this plugin can be found here:
http://infinity88.com/jquery-tmpl/movies/movies.htm
74 changes: 74 additions & 0 deletions demos/samplesCore/Interactive/resources/tabs.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
body
{
font-family: Arial;
}

.special
{
color: Red;
font-family: Comic Sans MS;
font-size: 20px;
font-style: italic;
}

.tabsView .body
{
height: 200px;
}

.tabsView .body div
{
padding: 15px;
height: 60px;
vertical-align: middle;
text-align: center;
}

.tabsView .body h3
{
text-align:center;
}

.tabsView td
{
border: solid 1px #0000A6;
border-top: none;
border-right: solid 2px #1E1ED2;
}

.tabsView th
{
cursor: pointer;
padding: 2px;
font-weight: normal;
font-style: italic;
color: #888;
border: solid 1px #bbb;
border-right: none;
background-color: #f8f8f8;
border-bottom: solid 1px #1E1ED2;
}

.tabsView
{
width: 500px;
border-collapse: collapse;
border: none;
margin-top: 20px;
}

.tabsView tr
{
border-right: solid 1px #bbb;
}

.tabsView th.header_true
{
font-weight: bold;
border: solid 1px #0000A6;
border-right: solid 2px #1E1ED2;
border-bottom: solid 1px #eee;
color: #0000A6;
background-color: #fff;
}

87 changes: 87 additions & 0 deletions demos/samplesCore/Interactive/tabsTmpl.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
A tabs control against data, using {{tmpl}}
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A tabs control against data, using {{tmpl}}</title>
<link href="resources/tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h1>Tabs</h1>
<div id="tabsView">..loading</div>

<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/html">
<table class="tabsView"><tbody>
<tr>{{tmpl(items) "#headerItemTmpl"}}</tr>
<tr><td colspan="${items.length}">
<div class="body">{{tmpl(activeDataItem) "#contentTmpl"}}</div>
</td></tr>
</tbody></table>
</script>

<script id="headerItemTmpl" type="text/html">
<th class="header_${$data === activeDataItem}">${name}</th>
</script>

<script id="contentTmpl" type="text/html">
<h3>${title}</h3>
<div>{{html description}}</div>
</script>

<script type="text/javascript">

// ******************** Data for categories and samples ********************

var samples = {
title: "Templating samples",
items: [
{ name: "Inline", title: "Template inline in a script block",
description:"Rendering a <span class='special'>template</span> declared in script block" },
{ name: "String", title: "Template as string",
description:"Rendering a <span class='special'>template</span> passed as a string" },
{ name: "Remote", title: "Render remote data",
description:"Rendering remote data using <span class='special'>templates</span>" },
{ name: "TreeView", title: "Building a Tree View",
description:"A tree view using recursive nested <span class='special'>templates</span>" },
{ name: "Tabs", title: "A Tabs control",
description:"Create a tabs control using <span class='special'>templates</span>" }
]
},

activeDataItem = samples.items[0];

// ******************** Load UI ********************

$( "#tabsView" ).empty();
$( "#tabsTmpl" ).tmpl( samples ).appendTo( "#tabsView" );

// ******************** Events ********************

$( "#tabsView" )
.delegate( ".tabsView th", "click", function() {
// Get the 'template item' for this tab
var activeHeaderTmplItem = $.tmplItem( this );
activeDataItem = activeHeaderTmplItem.data;

// Update the template item for the whole tabs control
update( activeHeaderTmplItem.parent ); // Alternatively use $.tmplCmd( "update", fldrTmplItem ); from tmplPlus.js
})

// ******************** Helper functions ********************

function update( tmplItem ) {
// This function is equivalent to $.tmplCmd( "update", fldrTmplItem ) available in the from tmplPlus.js
var coll = tmplItem.nodes;
$.tmpl( null, null, null, tmplItem ).insertBefore( coll[0] );
$( coll ).remove();
}

</script>

</body>
</html>
96 changes: 96 additions & 0 deletions demos/samplesCore/Interactive/tabsWrap.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
A tabs control against HTML markup, using {{wrap}}
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A tabs control against HTML markup, using {{wrap}}</title>
<link href="resources/tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h1>Tabs</h1>

<div id="tabsView">..loading</div>

<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/html">
{{wrap(null, {state: state}) "#tabsWrap"}}

<h3>Inline</h3>
<div>
Rendering a <span class='special'>template</span> declared in script block
</div>

<h3>String</h3>
<div>
Rendering a <span class='special'>template</span> passed as a string
</div>

<h3>Remote</h3>
<div>
Rendering remote data using <span class='special'>templates</span>
</div>

{{/wrap}}
</script>

<script id="tabsWrap" type="text/html">
<table class="tabsView"><tbody>
<tr>
{{each tabs}}
<th class="${headerClass($index)}">
${$value}
</th>
{{/each}}
</tr>
<tr><td colspan="${tabCount}">
<div class="body">
{{html tabContent}}
</div>
</td></tr>
</tbody></table>
</script>

<script type="text/javascript">

var state = { activeIndex: 0 };

// ******************** Load UI ********************

function refresh() {
$( "#tabsView" ).empty();
$( "#tabsTmpl" ).tmpl().appendTo( "#tabsView" );
}
refresh();

// ******************** Events ********************

$( "#tabsView" )
.delegate( ".tabsView th", "click", function() {
$.tmplItem( this ).state.activeIndex = $(this).index();
refresh();
});

// ******************** Helper functions ********************

function tabs() {
return this.html("h3", true);
}
function tabCount() {
return this.html("h3").length;
}
function headerClass( index ) {
return index === this.state.activeIndex ? "header_true" : "header_false";
}

function tabContent() {
return this.html("div")[this.state.activeIndex];
}

</script>

</body>
</html>
76 changes: 76 additions & 0 deletions demos/samplesCore/Interactive/tabsWrapImperative.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
A tabs control against HTML markup, using imperative API to provide wrapped HTML content
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A tabs control against HTML markup, using imperative API to provide wrapped HTML content</title>
<link href="resources/tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h1>Tabs</h1>

<div id="tabsView">..loading</div>

<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../../jquery.tmpl.js" type="text/javascript"></script>

<div id="tabsContent" style="display:none">
<h3>Inline</h3>
<div>
Rendering a <span class='special'>template</span> declared in script block
</div>

<h3>String</h3>
<div>
Rendering a <span class='special'>template</span> passed as a string
</div>

<h3>Remote</h3>
<div>
Rendering remote data using <span class='special'>templates</span>
</div>
</div>

<script id="tabsWrap" type="text/html">
<table class="tabsView"><tbody>
<tr>
{{each $item.html("h3", true)}}
<th class="header_${$index === $item.state.activeIndex}">
${$value}
</th>
{{/each}}
</tr>
<tr><td colspan='${$item.html("h3").length}'>
<div class="body">
{{html $item.html("div")[$item.state.activeIndex]}}
</div>
</td></tr>
</tbody></table>
</script>

<script type="text/javascript">

var state = { activeIndex: 0 };

// ******************** Load UI ********************

function refresh() {
$( "#tabsView" ).empty();
$( "#tabsWrap" ).tmpl( null, {state: state, wrapped: "#tabsContent"} ).appendTo( "#tabsView" );
}
refresh();

// ******************** Events ********************

$( "#tabsView" )
.delegate( ".tabsView th", "click", function() {
$.tmplItem( this ).state.activeIndex = $(this).index();
refresh();
});

</script>

</body>
</html>
Loading

0 comments on commit eca932f

Please sign in to comment.