码迷,mamicode.com
首页 > Web开发 > 详细

Jquery Template

时间:2017-05-19 19:32:36      阅读:425      评论:0      收藏:0      [点我收藏+]

标签:func   end   rip   库文件   text   type   tle   style   log   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery Template</title>
        <!-- 第一步:引入引擎文件  两个: JQUERY库文件,JQUERY TEMPLATE模板引擎-->
        <script src="/js/jquery.js"></script>
        <script src="/js/jquery.tmpl.min.js"></script>
    </head>
    <body>
        <div id="box1"></div>
        
        <!--
            第二步:编写模板
                使用 script标签来编写模板, 必须有两个必须 id 和 type
                type属性可以是 text/x-jquery-tmpl 和 text/html
        -->
        <script id="mytmpl" type="text/x-jquery-tmpl">
            <h1>{{= title}}</h1>
            <ul>
                {{each(i,value) lists}}
                <li>{{= i}}的值是:{{= value}}</li>
                {{/each}}
            </ul>
        </script>
        
        <!-- 第三步: 渲染模板 -->
        <script>
            $(function(){
                var data={title:‘我又500万啦‘,lists: [‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘]};不要遍历了
                //渲染模板的语法: $(‘模板ID‘).tmpl(JSON数据).appendTo(‘HTML元素ID‘);
                $(‘#mytmpl‘).tmpl(data).appendTo(‘#box1‘);
            });
        </script>
    </body>
</html>

 

Jquery Template

标签:func   end   rip   库文件   text   type   tle   style   log   

原文地址:http://www.cnblogs.com/lylooooo/p/6879924.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!