HTML: Jquery插件之jTemplates模板

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/haoliansheng/archive/2009/09/25/1574144.html

文章标签：

#javascript #xhtml #c# #ViewUI

http://jtemplates.tpython.com/ Jquery插件之HTML模板引擎
jTemplates模板代码

Code
1

@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyDemo.aspx.cs" Inherits="JsonDemo.MyDemo" %>
2

<!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

<style>

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

-- 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

$("#InfoBox1").setTemplateElement("datatemplate");
37

$("#InfoBox1").processTemplate([

{Id:"1",Name:"靓仔仔"},

{Id:"2",Name:"靓仔仔too"},

{Id:"2",Name:"靓仔仔3"}]);
38

</script>
39

-- 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

$("#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

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}

转载于:https://www.cnblogs.com/haoliansheng/archive/2009/09/25/1574144.html