转载：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. [Bzoj4566][Haoi2016]找相同字符（广义后缀自动机）

    4566: [Haoi2016]找相同字符 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 861  Solved: 495[Submit][Statu ...

  2. jq自定义裁剪，代码超级简单，易修改

    1.自定义宽高效果 1.html 代码  index.html <!DOCTYPE html> <html lang="en"> <head> ...

  3. nexus-3本地下载jar的settipng.xml配置

    打开maven安装目录下的setting.xml <servers> <server> <id>nexus</id> <username>a ...

  4. 初始VueJS视频

    本视频简单的介绍的使用. 初始VueJS视频

  5. [LeetCode][Java] Subsets

    题目: Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset ...

  6. APUE 线程 - 程序清单

    APUE 线程 - 程序清单 程序清单11-1 打印线程ID #include "util.h" #include<pthread.h> pthread_t ntid; ...

  7. Exception from container-launch: org.apache.hadoop.util.Shell$ExitCodeException

    使用MapReduce编写的中文分词程序出现了 Exception from container-launch: org.apache.hadoop.util.Shell$ExitCodeExcept ...

  8. 嵌入式开发之davinci--- 8127 中camer 和 capture link 的区别

    (1)camera link (2)capture link (3)两者区别 (1)camera link 走的是isp iss link采集的得到的数据,适用于ipnc 框架 (2)capture ...

  9. 【iOS系列】- UITableView的使用技巧

    [iOS系列]- UITableView的使用 UITableView的常用属性 indexpath.row:行 indexpath.section:组 separatorColor:分割线的颜色 s ...

  10. 【iOS-Tips】-小贴士

    [iOS-Tips]-小贴士 1:UIImage的2种加载方式: 方式一:有缓存(图片所占用的内存会一直停留在程序中) //name是图片的文件名 + (UIImage *)imageNamed:(N ...