jquery tmpl

简介: 使用方法:   //模板有{{if}}{{/if}}、{{each}}{{/each}}等关键字使用变量:${变量名称} DOCTYPE html> jquery tmpl ...
使用方法:
<script id="testTemplate" type="text/x-jquery-tmpl">
  //模板
</script>

有{{if}}{{/if}}、{{each}}{{/each}}等关键字
使用变量:${变量名称}



<!DOCTYPE html>
<html>
    <head>
        <title>jquery tmpl</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="js/jquery-1.8.1.min.js"></script>
        <script src="js/jquery.tmpl.min.js"></script>
        <script src="js/jquery.tmplPlus.min.js"></script>
    </head>
    <body>
        <div id="test"></div>
        <script id="testTemplate" type="text/x-jquery-tmpl">
            <h3>测试</h3>
            <ul>
                {{each arr}}
                <li><a href="${src}">${txt}</a></li>
                {{/each}}
            </ul>
        </script>
        <script>
            var data = [{"src":"http://www.cnblogs.com/kuikui","txt":"博客-测试一"},{"src":"http://www.cnblogs.com/kuikui","txt":"博客-测试二"},{"src":"http://www.cnblogs.com/kuikui","txt":"博客-测试三"}];
            var obj = {"title":"标题","arr":data};
            $("#testTemplate").tmpl(obj).appendTo("#test");
        </script>
    </body>
</html>

 

目录
相关文章
|
JavaScript 数据格式 JSON
jQuery tmpl用法总结
原文:jQuery tmpl用法总结 之前很是头疼循环数据的渲染,搞一大堆的命名,一点点的赋值,很是麻烦,今天学习了一下jQuery插件tmpl,下面抛出一些使用方法,供以后参考: 官方网址:http://web.
1373 0
|
JavaScript 前端开发 数据格式
jquery tmpl 详解
原文:jquery tmpl 详解 动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。   这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。
1289 0
|
JavaScript
jquery tmpl续
输出html标签内容格式:{{html 名字}}DEMO: DOCTYPE html> jquery tmpl ...
875 0
|
14天前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
33 14
|
1月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
64 21
|
1月前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
54 16
|
1月前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
46 9
|
1月前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
1月前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
1月前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。