HTML: Jquery插件之jTemplates模板

http://jtemplates.tpython.com/    Jquery插件之HTML模板引擎
jTemplates模板代码
ContractedBlock.gif ExpandedBlockStart.gif Code
 1ExpandedBlockStart.gifContractedBlock.gif<%@ 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>
11ExpandedBlockStart.gifContractedBlock.gif<style>
12ExpandedSubBlockStart.gifContractedSubBlock.gif    ul{}{ clear:both; list-style:none;}
13ExpandedSubBlockStart.gifContractedSubBlock.gif    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    
25ExpandedBlockStart.gifContractedBlock.gif    <%-- 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>
35ExpandedBlockStart.gifContractedBlock.gif    <script type="text/javascript">
36        $("#InfoBox1").setTemplateElement("datatemplate");
37ExpandedSubBlockStart.gifContractedSubBlock.gif        $("#InfoBox1").processTemplate([{Id:"1",Name:"靓仔仔"},{Id:"2",Name:"靓仔仔too"},{Id:"2",Name:"靓仔仔3"}]);
38    
</script>
39
40ExpandedBlockStart.gifContractedBlock.gif    <%-- for模板--%>
41    <textarea id="datatemplate2" style="display: none;">
42        {#for i = 1 to $T.last} 
43            {$T.content}{$T.i}
44        {#/for}
45    </textarea>
46ExpandedBlockStart.gifContractedBlock.gif    <script type="text/javascript">
47        $("#InfoBox2").setTemplateElement("datatemplate2");
48ExpandedSubBlockStart.gifContractedSubBlock.gif        $("#InfoBox2").processTemplate({last:8,content:"Number:", table:[{Id:"1",Name:"靓仔仔"},{Id:"2",Name:"靓仔仔too"},{Id:"2",Name:"靓仔仔3"}]});
49    
</script>
50    
51ExpandedBlockStart.gifContractedBlock.gif    <script>
52ExpandedSubBlockStart.gifContractedSubBlock.gif        var data = {
53         name: 'User list',
54         list_id: 4,
55         table: [
56ExpandedSubBlockStart.gifContractedSubBlock.gif          {id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
57ExpandedSubBlockStart.gifContractedSubBlock.gif          {id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
58ExpandedSubBlockStart.gifContractedSubBlock.gif          {id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
59ExpandedSubBlockStart.gifContractedSubBlock.gif          {id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
60ExpandedSubBlockStart.gifContractedSubBlock.gif          {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>

ContractedBlock.gif ExpandedBlockStart.gif 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}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值