HTML: Jquery插件之jTemplates模板
http://jtemplates.tpython.com/ Jquery插件之HTML模板引擎
jTemplates模板代码
Code
1<%
@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyDemo.aspx.cs" Inherits="JsonDemo.MyDemo" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head runat="server">
6 <title>MyDemo</title>
7
8 <script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
9
10 <script src="JS/jTemplate.js" type="text/javascript"></script>
11<style>
12
ul{}{ clear:both; list-style:none;}
13 li{}{float:left;width:100px;}
14</style>
15</head>
16<body>
17 <form id="form1" runat="server">
18 <ul id="InfoBox1">
19 </ul>
20 <ul id="InfoBox2">
21 </ul>
22 <div id="result" >
23 </div>
24
25 <%-- foreach模板--%>
26 <textarea id="datatemplate" style="display: none;">
27 {#foreach $T as record begin=0 count=10 step=1}
28 <li>
29 {#if $T.record.Id == 1} true
30 {#else} false
31 {#/if}
32 </li>
33 {#/for}
34 </textarea>
35 <script type="text/javascript">
36
$("#InfoBox1").setTemplateElement("datatemplate");
37 $("#InfoBox1").processTemplate([{Id:"1",Name:"靓仔仔"},{Id:"2",Name:"靓仔仔too"},{Id:"2",Name:"靓仔仔3"}]);
38
</script>
39
40 <%-- for模板--%>
41 <textarea id="datatemplate2" style="display: none;">
42 {#for i = 1 to $T.last}
43 {$T.content}{$T.i}
44 {#/for}
45 </textarea>
46 <script type="text/javascript">
47 $("#InfoBox2").setTemplateElement("datatemplate2");
48 $("#InfoBox2").processTemplate({last:8,content:"Number：", table:[{Id:"1",Name:"靓仔仔"},{Id:"2",Name:"靓仔仔too"},{Id:"2",Name:"靓仔仔3"}]});
49 </script>
50
51 <script>
52 var data = {
53 name: 'User list',
54 list_id: 4,
55 table: [
56 {id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
57 {id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
58 {id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
59 {id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
60 {id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
61 ]
62
};
63 $("#result").setTemplateURL("example_multitemplate1.tpl");
64 $("#result").processTemplate(data);
65 </script>
66 </form>
67</body>
68</html>
example_multitemplate1.tpl
*** main template *** (all part outside templates are invisible}
{#template MAIN}
<div>
<div>{$T.name.bold()}</div>
{#include table root=$T.table}
</div>
{#/template MAIN}
-----------------------------------------
*** main table ***
{#template table}
{#foreach $T as r}
{#include row root=$T.r}
{#/for}
{#/template table}
-----------------------------------------
*** for each row ***
{#template row}
<ul bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
<li>{$T.name.bold()}</li>
<li>{$T.age}</li>
<li>{$T.mail.link('mailto:'+$T.mail)}</li>
</ul>
{#/template row}
jTemplates模板代码
Code1
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyDemo.aspx.cs" Inherits="JsonDemo.MyDemo" %>2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4
<html xmlns="http://www.w3.org/1999/xhtml">5
<head runat="server">6
<title>MyDemo</title>7
8
<script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>9
10
<script src="JS/jTemplate.js" type="text/javascript"></script>11
<style>12
ul{}{ clear:both; list-style:none;}13
li{}{float:left;width:100px;}14
</style>15
</head>16
<body>17
<form id="form1" runat="server">18
<ul id="InfoBox1">19
</ul>20
<ul id="InfoBox2">21
</ul>22
<div id="result" >23
</div>24
25
<%-- foreach模板--%>26
<textarea id="datatemplate" style="display: none;">27
{#foreach $T as record begin=0 count=10 step=1} 28
<li>29
{#if $T.record.Id == 1} true30
{#else} false31
{#/if}32
</li>33
{#/for}34
</textarea>35
<script type="text/javascript">36
$("#InfoBox1").setTemplateElement("datatemplate");37
$("#InfoBox1").processTemplate([{Id:"1",Name:"靓仔仔"},{Id:"2",Name:"靓仔仔too"},{Id:"2",Name:"靓仔仔3"}]);38
</script>39
40
<%-- for模板--%>41
<textarea id="datatemplate2" style="display: none;">42
{#for i = 1 to $T.last} 43
{$T.content}{$T.i}44
{#/for}45
</textarea>46
<script type="text/javascript">47
$("#InfoBox2").setTemplateElement("datatemplate2");48
$("#InfoBox2").processTemplate({last:8,content:"Number：", table:[{Id:"1",Name:"靓仔仔"},{Id:"2",Name:"靓仔仔too"},{Id:"2",Name:"靓仔仔3"}]});49
</script>50
51
<script>52
var data = {53
name: 'User list',54
list_id: 4,55
table: [56
{id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},57
{id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},58
{id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},59
{id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},60
{id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}61
]62
};63
$("#result").setTemplateURL("example_multitemplate1.tpl");64
$("#result").processTemplate(data);65
</script>66
</form>67
</body>68
</html>example_multitemplate1.tpl*** main template *** (all part outside templates are invisible}
{#template MAIN}
<div>
<div>{$T.name.bold()}</div>
{#include table root=$T.table}
</div>
{#/template MAIN}
-----------------------------------------
*** main table ***
{#template table}
{#foreach $T as r}
{#include row root=$T.r}
{#/for}
{#/template table}
-----------------------------------------
*** for each row ***
{#template row}
<ul bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
<li>{$T.name.bold()}</li>
<li>{$T.age}</li>
<li>{$T.mail.link('mailto:'+$T.mail)}</li>
</ul>
{#/template row}