首页 > 代码库 > Jquery Template

Jquery Template

2024-09-23 11:42:07   215人阅读

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery Template</title>
        <!-- 第一步：引入引擎文件  两个： JQUERY库文件，JQUERY TEMPLATE模板引擎-->
        <script src="http://www.mamicode.com/js/jquery.js"></script>
        <script src="http://www.mamicode.com/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=http://www.mamicode.com/{title:‘我又500万啦‘,lists: [‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘]};不要遍历了
                //渲染模板的语法： $(‘模板ID‘).tmpl(JSON数据).appendTo(‘HTML元素ID‘);
                $(‘#mytmpl‘).tmpl(data).appendTo(‘#box1‘);
            });
        </script>
    </body>
</html>

 

Jquery Template


联系
我们