atitit.jquery tmpl模板总结 .doc

atitit.jquery tmpl模板总结 .doc

 

1. atitit.动态模版解析 1

1.1. Jquery.tmpl.js 1

1.2. 比起anrular js方便啊。 1

2. 动态模板引擎解析原理 1

3. Table方式 1

4. Ul li方式 2

5. 参考 3

 

 

1. atitit.动态模版解析

1.1. Jquery.tmpl.js

1.2. 比起anrular js方便啊。

2. 动态模板引擎解析原理

就是把<%%>标签外面的为字符串解析。里面的作为语句解析。。。雷施于jsp编译java的原理

 

作者:: 老哇的爪子 Attilax 艾龙，  EMAIL:1466519819@qq.com

转载请注明来源： http://blog.csdn.net/attilax

 

3. Table方式

localhost/lime/act/actlog_list.html?activityId=8

 

<table width="90%" border="1"  height="" align="center" cellpadding="1" cellspacing="3" id="table1" style=" margin-left:7px; margin-top:10px;"  class="table  table-striped">

 <thead>

      <tr class="success">

        <th valign="top"> </th>

  

    <th valign="top">openid</th>

    <th valign="top"> 活动金额</th>

    <th valign="top">  活动码</th>

    <th> 时间</th>

    <th> </th>

    </tr>

  </thead>

  <tbody id="table1_tmpl">

   <tr  >

     <td valign="top">${id}</td>

    <td valign="top">${openId}</td>

    <td valign="top"> ${bingo_money}</td>

    <td valign="top">  ${ bingo_code} </td>

    <td> ${awardTime}</td>

    <td><input name="button3" type="submit" class="btn btn-warning " id="button3" value="删除此记录" onclick="clickx(${id})"/></td>

   </tr>

 </tbody>

</table>

 

 

arr=  jo.rows;

   

$("#table1_tmpl tr").eq(0).nextAll().remove();

 

  　$("#table1_tmpl").tmpl(arr).appendTo('#table1');

 $("#table1 tr").eq(1).hide();

 

 

4. Ul li方式

<div id="table1_tmpl">

  <li class="text-left">

     <img src="img/temp/2352201.jpg">

     <div class="time"><u class="iconfont"></u>${ formatDate_4java(create_time) }</div>

      <h1><a href="detail.html?news_id=${news_id}">${news_title}</a></h1>

      <p class="desc">{{html news_content}}</p>

      <div class="more"><a href="detail.html?news_id=${news_id}" class="btn-red-border">查看更多</a></div>

     </li>

 </div>    

     

  <div class="right-content">

    <ul class="list" id="table1">

   

</ul>

 

 

5. 参考

 

 

(原理)最简单的JavaScript模板引擎 - Javascript教程_JS教程_技术文章 - 红黑联盟.htm

（简单） 基于HTML模板和JSON数据的JavaScript交互 « 张鑫旭-鑫空间-鑫生活.htm

 

 

Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html...

JS使用模板快速填充HTML控件数据 - Freshflower - ITeye技术网站.htm

 

 

http://api.jquery.com/jquery.tmpl/