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模板代码


1



2

3

4

5

6

7

8

9

10

11



12



13



14

15

16

17

18

19

20

21

22

23

24

25



26

27

28

29

30

31

32

33

34

35



36

37





38

39

40



41

42

43

44

45

46



47

48






49

50

51



52



53

54

55

56



57



58



59



60



61

62

63

64

65

66

67

68



*** 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}
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 字符编码:从基础到乱码解决