转载：https://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html

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

效果：

代码：

<%@ Page Language=}}  <img src="Image/folder_o.png" class="detailsImg" />  {{/}}
                <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 {{}} style="background:red;" {{}}style="background:yellow;"  {{/if}}><td> ${$value.ClassName} </td><td>  ${$value.Count} </td></tr>
            {{/each}}
            </tbody></table>           
                </td>    </tr>
                 {{/if}}
    ];
            ; i < arguments.length - 1; i++) {
                ]);
            }

; 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系列之目录汇总

JQuery模板插件-jquery.tmpl的更多相关文章

  1. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  2. Jquery 模板插件 jquery.tmpl.js 的使用方法(2):嵌套each循环,temp调用(使用预编译的模板缓存)

    直接上代码吧 一:主窗口 /*#region SendChooseTargetTemplate 发送候选人主窗口模板*/ var SendChooseTargetTemplate = ''; Send ...

  3. jQuery滚动条插件 – jquery.slimscroll.js

    jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...

  4. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  5. jQuery分页插件(jquery.page.js)的使用

    效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒   1.前端   首先html的head中引入相关css与js <lin ...

  6. JQuery多媒体插件jQuery Media Plugin使用详解

    malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...

  7. jQuery遮罩插件 jquery.blockUI.js

    Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DO ...

  8. jQuery国际化插件 jQuery.i18n.properties 【轻量级】

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,“i”为单词的第 ...

  9. 使用jQuery的插件jquery.corner.js来实现圆角效果-详解

    jquery.corner.js可以实现各种块级元素的角效果,以下为演示,详见jquery_corner.html中的注释部分,并附百度盘下载 jquery_corner.html代码如下: < ...

随机推荐

  1. [Bzoj1022][SHOI2008]小约翰的游戏John（博弈论）

    1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2976  Solved: 1894[Submit] ...

  2. POJ 2502 【思维是朴素的最短路 卡输入和建图】

    题意: 给出两个坐标,分别是小明家和小明学校的坐标. 给出多条地铁线,给出每站的坐标,已知地铁是双向的,每条线以-1 -1结尾. 给出地铁速度,步行速度. 地铁线可看成是顺次连接的线段. 求小明从家到 ...

  3. Eclipse的Servers视图中无法添加Tomcat6/Tomcat7

    原文:http://blog.csdn.net/blueheart20/article/details/40043749 问题的提出: 无法从以下方式,添加Tomcat服务器.  其中ServerNa ...

  4. Phalcon 开发工具（Phalcon Developer Tools）

    Phalcon提供的这个开发工具主要是用来辅助开发,比方生成一些程序的基本框架.生成控制器模型等. 使用这个工具我们仅仅须要一个简单的命令就可以生成应用的基本框架. 很重要: 要使用这个工具我们必需要 ...

  5. Deepin-添加path

    以管理员权限添加path(Debian系列) sudo gedit /etc/profile 添加path路径格式是: export PATH=”$PATH:your path1:your path2 ...

  6. 2016/05/15 ThinkPHP3.2.2 表单自动验证实例 验证规则的数组 直接写在相应的控制器里

    使用TP 3.2框架 验证规则也可以写到模型里,但感觉有些麻烦, 一是有时候不同页面验证的方式会不一样, 二是看到这个   Add  事件里的代码,就清楚要接收什么数据,如何验证数据能够在第一眼有个大 ...

  7. HDU 5044 Tree 树链剖分+区间标记

    Tree Problem Description You are given a tree (an acyclic undirected connected graph) with N nodes. ...

  8. Rod Johnson

    Spring Framework创始人,著名作者. Rod在悉尼大学不仅获得了计算机学位,同时还获得了音乐学位.更令人吃惊的是在回到软件开发领域之前,他还获得了音乐学的博士学位. 有着相当丰富的C/C ...

  9. Count on an IEnumerable<dynamic>

    http://stackoverflow.com/questions/7733305/count-on-an-ienumerabledynamic int count = Enumerable.Cou ...

  10. 比特币交易（Transaction）的输入与输出

    比特币通过“挖矿”机制保证了不能任意造币.通过分布式网络和HashCash机制解决双重支付问题.事实上比特币系统中不存在独立的电子货币,而只存在交易单(账单),货币值是依附于交易单存在的,所以比特币中 ...