转载：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. HUD——1083 Courses

    HUD——1083   Courses Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...

  2. 一次mysql 优化 （Using temporary ; Using filesort）

    遇到一个SQL执行很慢 SQL 如下: SELECT ... FROM tableA WHERE time >= 1492044535 and time <= 1492046335 GRO ...

  3. mysql查看存储过程show procedure status;

    1.mysql查看存储过程(函数) 2.MySQL查看触发器 查看触发器 语法:SHOW TRIGGERS [FROM db_name] [LIKE expr] 实例:SHOW TRIGGERS\G ...

  4. 还原数据库出现“未获得排他訪问”解决方法（杀死数据库连接的存储过程sqlserver）

    在master数据库下创建存储步骤例如以下: createproc killspid (@dbnamevarchar(20)) as begin declare@sqlnvarchar(500) de ...

  5. (转)Delphi2009初体验 - 语言篇 - 智能指针(Smart Pointer)的实现

     转载:http://www.cnblogs.com/felixYeou/archive/2008/08/27/1277250.html 快速导航 一. 回顾历史二. 智能指针简介三. Delphi中 ...

  6. Ulua_toLua_基本案例（一）

    Ulua_toLua_基本案例 在Untiy中用Lua.必需要LuaInterface.LuaInterface的介绍请看:点击打开链接 能够先光写Lua,生成.lua的纯文件.再Unity中通过,l ...

  7. CV_HAAR_FEATURE_DESC_MAX和CV_HAAR_FEATURE_MAX

    #define CV_HAAR_FEATURE_MAX 3 //提前定义的一个宏,在程序中表示一个haar特征由至多三个矩形组成 #define CV_HAAR_FEATURE_DESC_MAX 20 ...

  8. coco2dx新建项目报错，ld: -pie can only be used when targeting iOS 4.2 or later clang: error: linker command

    在新建cocos2d-x以后,执行发现下面错误: ld: -pie can only be used when targeting iOS 4.2 or later clang: error: lin ...

  9. python实现接口自动化

    一.总述 Postman:功能强大,界面好看响应格式自主选择,缺点支持的协议单一且不能数据分离,比较麻烦的还有不是所有的公司都能上谷歌SoupUI:支持多协议(http\soup\rest等),能实现 ...

  10. 软件质量之道：PCLint之中的一个

    故天将降大任于斯人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,所以动心忍性,增益其所不能. 孟子 1引子 今天听老韩一席话,当真是感慨万千啊.心怀斗志昂扬.奋斗十年,到头来.却看到身 ...