在下面介绍一款jQuery的模板插件 tmpl，是由微软想jQuery官方贡献的模板插件，网址：http://api.jquery.com/jquery.tmpl/。
Tmpl提供了几种tag：
${}：等同于{{=}}，是输出变量，通过了html编码的。
`html`:输出变量html,但是没有html编码，适合输出html代码。
`if ` `else`:提供了分支逻辑。
`each`:提供循环逻辑，$value访问迭代变量。
下面一个简单的模板tmpl实例：（代码最能说明一切）
代码：
View Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tmpl.aspx.cs" Inherits="Tmpl" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Script/jquery-1.6.4.js" type="text/javascript"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Script/jquery-jquery-tmpl-07d08cb/jquery.tmpl.js" type="text/javascript"></script> <script id="studentsTemplate" type="text/x-jquery-tmpl"> <tr> <td style="width:20px;" > {{if Class&&Class.length>0}} <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Image/folder_o.png" class="detailsImg" /> {{/if}} </td> <td> ${Name} </td> <td> ${Sex} </td> <td style="text-align:center;"><a href="javascript:AjaxDeleteInvoke(${ID})">删除</td> </tr> {{if Class&&Class.length>0}} <tr><td colspan="4"> <table style=" margin:0px; " cellpadding="0" cellspacing="0" width="100%"> <thead> <tr style="text-align:center; font-size:large; font-weight:bolder;"> <td> 班级名 </td> <td> 人数 </td> </tr> </thead> <tbody> {{each Class}} <tr {{if $value.Count>16}} style="background:red;" {{else $value.Count>12}}style="background:yellow;" {{/if}}><td> ${$value.ClassName} </td><td> ${$value.Count} </td></tr> {{/each}} </tbody></table> </td> </tr> {{/if}} </script> <script type="text/javascript"> ; String.format = function() { var s = arguments[0]; for (var i = 0; i < arguments.length - 1; i++) { var reg = new RegExp("\\{" + i + "\\}", "gm"); s = s.replace(reg, arguments[i + 1]); } return s; }; function AjaxDeleteInvoke(id) { alert(String.format("AjaxDeleteInvoke:id={0}", id)); } $(function() { var data = new Array(); for (var i = 0; i < 19; i++) { data.push( { Name: String.format("学生{0}", i), Sex: i % 2 == 0 ? "男" : "女", ID: i, Class: [ { ClassName: String.format("Class{0}", i), Count: (i + 10) / 2 }, { ClassName: String.format("Class2{0}", i), Count: (i + 20) / 2 } ] }); } // alert($("#studentsTemplate").tmpl(data).htm()); $("#studentsTemplate").tmpl(data).appendTo("#test>tbody"); $("#test>tbody table").hide(); $(".detailsImg").live("click", function() { var state = $(this).data("state"); var $tr = $(this).parent().parent(); if (state == "o") { $("table", $tr.next()).hide(); $(this).data("state", "c"); $(this).attr("src", "Image/folder_o.png"); } else { $("table", $tr.next()).show(); $(this).data("state", "o"); $(this).attr("src", "Image/folder_c.png"); } }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="div1"> <table style="margin-top: 10; margin-left: 300px;" border="1" cellpadding="0" cellspacing="0" id="test" width="500"> <thead> <tr style="text-align: center; font-size: larger; font-weight: bolder;"> <td> ID </td> <td> 姓名 </td> <td> 性别 </td> <td> 操作 </td> </tr> </thead> <tbody> </tbody> </table> </div> </form> </body> </html> 复制代码demo下载：
其他资料jQuery目录： 我jQuery系列之目录汇总
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦