转载：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. Spoj 3267 DQUERY - D-query

    题目描述 English VietnameseGiven a sequence of n numbers a _{1}1​ , a _{2}2​ , ..., a _{n}n​ and a numbe ...

  2. vm 安装CentOS7

    1.首先需要到CentOS官网下载CentOS7的iso镜像文件,地址http://mirrors.cn99.com/centos/7/isos/x86_64/ 这里我选择的是迅雷种子文件 2.下载完 ...

  3. ORA-01034: ORACLE not available 出错

    调用db.rlogon("sm/sm")出现以下错误 ORA-01034: ORACLE not availableORA-27101: shared memory realm d ...

  4. paramiko连接sshd使用的hostkey

    1.sshd的hostkey设置: cat /etc/ssh/sshd_config 里面有rsa/dsa/ecdsa/ed25519 2.查看paramiko的keys选择顺序,如图所示 3.由以上 ...

  5. 【转载】《Unix网络编程》思维导图

    参考这篇文章,很不错: http://www.cnblogs.com/qiaoconglovelife/p/5734768.html

  6. Java 8 中的 java.util.Optional

    Java 8 中的 java.util.Optional 学习了:https://blog.csdn.net/sun_promise/article/details/51362838 package ...

  7. coco2d-js demo程序之滚动的小球

    近期有一个游戏叫围住神经猫,报道说是使用html5技术来做的. html5的跨平台的优良特性非常不错.对于人手不足,技术不足,选用html5技术实现跨平台的梦想真是不错. 近期在看coco2d-js这 ...

  8. Java设计模式-设计模式的六种原则

    所谓无招胜有招,练一门功夫分为内功和外功. 外功好比招式,就是所谓的23种设计模式.而内功呢,就是心法,那就是这6种法则.光会外功那是花拳绣腿,内功修为才是境地. 如此众多的设计模式,学完2遍.3遍可 ...

  9. Android中View窗口getWidth和getMeasuredWidth的差别

    今天在研究自己定义listview的下拉刷新的效果.想移植到项目需求中,再看自己定义源代码时发现了一个问题就是getWidth和getMeasuredWidth两个方法有什么差别,求教万能的百度,经调 ...

  10. 2 AngularJS 1 概念浓缩

    Angular Web APP 结构图: module   --> 模块     :相当于一个容器,Angular里的所有东西都得放在模块里,才能够被引用和加载. directive  --&g ...