JQuery模板插件-jquery.tmpl

在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQuery官方贡献的模板插件,网址:http://api.jquery.com/jquery.tmpl/。

    Tmpl提供了几种tag:

  1. ${}:等同于{{=}},是输出变量,通过了html编码的。
  2. {{html}}:输出变量html,但是没有html编码,适合输出html代码。
  3. {{if }} {{else}}:提供了分支逻辑。
  4. {{each}}:提供循环逻辑,$value访问迭代变量。

下面一个简单的模板tmpl实例:(代码最能说明一切)

效果:

代码:

  
  
  
  
  1. View Code   
  2.  
  3. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tmpl.aspx.cs" Inherits="Tmpl" %>  
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  6. <html xmlns="http://www.w3.org/1999/xhtml">  
  7. <head runat="server">  
  8.     <title></title>  
  9.  
  10.     <script src="Script/jquery-1.6.4.js" type="text/javascript"></script>  
  11.  
  12.     <script src="Script/jquery-jquery-tmpl-07d08cb/jquery.tmpl.js" type="text/javascript"></script>  
  13.  
  14.     <script id="studentsTemplate" type="text/x-jquery-tmpl">  
  15.      <tr>  
  16.                     <td style="width:20px;" >  
  17.                  {{if Class&&Class.length>0}}  <img src="Image/folder_o.png" class="detailsImg" />  {{/if}}  
  18.                     </td>  
  19.                     <td>  
  20.                      ${Name}  
  21.                     </td>  
  22.                     <td>  
  23.                         ${Sex}  
  24.                     </td>  
  25.                     <td style="text-align:center;"><a href="javascript:AjaxDeleteInvoke(${ID})">删除</td>  
  26.                 </tr>  
  27.                 {{if Class&&Class.length>0}}  
  28.                 <tr><td colspan="4">  
  29.                   
  30.                 <table style=" margin:0px; " cellpadding="0" cellspacing="0" width="100%">  
  31.             <thead>  
  32.                 <tr style="text-align:center; font-size:large; font-weight:bolder;">  
  33.                     <td>  
  34.                         班级名  
  35.                     </td>  
  36.                     <td>  
  37.                         人数  
  38.                     </td>                      
  39.                 </tr>  
  40.             </thead>  
  41.             <tbody>  
  42.             {{each Class}}             
  43.            <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>  
  44.             {{/each}}  
  45.             </tbody></table>             
  46.                 </td>    </tr>  
  47.                  {{/if}}  
  48.     </script>  
  49.  
  50.     <script type="text/javascript">  
  51.         ; String.format = function() {  
  52.             var s = arguments[0];  
  53.             for (var i = 0; i < arguments.length - 1; i++) {  
  54.                 var reg = new RegExp("\\{" + i + "\\}""gm");  
  55.                 s = s.replace(reg, arguments[i + 1]);  
  56.             }  
  57.  
  58.             return s;  
  59.         };  
  60.         function AjaxDeleteInvoke(id) {  
  61.             alert(String.format("AjaxDeleteInvoke:id={0}", id));  
  62.         }  
  63.         $(function() {  
  64.  
  65.             var data = new Array();  
  66.             for (var i = 0; i < 19; i++) {  
  67.                 data.push(  
  68.                 {  
  69.                     Name: String.format("学生{0}", i),  
  70.                     Sex: i % 2 == 0 ? "男" : "女",  
  71.                     ID: i,  
  72.                     Class:  
  73.                     [  
  74.                         {  
  75.                             ClassName: String.format("Class{0}", i),  
  76.                             Count: (i + 10) / 2  
  77.                         },  
  78.                          {  
  79.                              ClassName: String.format("Class2{0}", i),  
  80.                              Count: (i + 20) / 2  
  81.                          }  
  82.                    ]  
  83.                 });  
  84.             }  
  85.             // alert($("#studentsTemplate").tmpl(data).htm());  
  86.             $("#studentsTemplate").tmpl(data).appendTo("#test>tbody");  
  87.             $("#test>tbody table").hide();  
  88.             $(".detailsImg").live("click"function() {  
  89.                 var state = $(this).data("state");  
  90.                 var $tr = $(this).parent().parent();  
  91.                 if (state == "o") {  
  92.                     $("table", $tr.next()).hide();  
  93.                     $(this).data("state""c");  
  94.  
  95.                     $(this).attr("src""Image/folder_o.png");  
  96.                 } else {  
  97.                     $("table", $tr.next()).show();  
  98.                     $(this).data("state""o");  
  99.                     $(this).attr("src""Image/folder_c.png");  
  100.                 }  
  101.             });  
  102.         });    
  103.     </script>  
  104.  
  105. </head>  
  106. <body>  
  107.     <form id="form1" runat="server">  
  108.     <div id="div1">  
  109.         <table style="margin-top: 10; margin-left: 300px;" border="1" cellpadding="0" cellspacing="0" 
  110.             id="test" width="500">  
  111.             <thead>  
  112.                 <tr style="text-align: center; font-size: larger; font-weight: bolder;">  
  113.                     <td>  
  114.                         ID  
  115.                     </td>  
  116.                     <td>  
  117.                         姓名  
  118.                     </td>  
  119.                     <td>  
  120.                         性别  
  121.                     </td>  
  122.                     <td>  
  123.                         操作  
  124.                     </td>  
  125.                 </tr>  
  126.             </thead>  
  127.             <tbody>  
  128.             </tbody>  
  129.         </table>  
  130.     </div>  
  131.     </form>  
  132. </body>  
  133. </html>  
  134. 复制代码 

 demo下载:

其他资料jQuery目录:  我jQuery系列之目录汇总

你可能感兴趣的:(html,jquery,职场,微软,休闲)