代码改变世界

JQuery模板插件-jquery.tmpl

2011-10-09 20:48  破狼  阅读(39561)  评论(11)  编辑  收藏  举报

  在下面介绍一款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实例：（代码最能说明一切）

效果：

image

代码：

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 src="Script/jquery-1.6.4.js" type="text/javascript"></script>

    <script src="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 src="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系列之目录汇总