forked from BorisMoore/jquery-tmpl
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added support for 'wrapped templates'.
Additional samples illustrating wrapping feature provided, under "demos/samplesCore/interactivity". Fairly significant changes in tmpl.js to support this functionality...
- Loading branch information
1 parent
443352d
commit eca932f
Showing
7 changed files
with
550 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
Oops, something went wrong.