zoukankan      html  css  js  c++  java
  • atitit.jquery tmpl模板总结 .doc

    atitit.jquery tmpl模板总结 .doc

     

    1atitit.动态模版解析1

    1.1. Jquery.tmpl.js1

    1.2. 比起anrular js方便啊。1

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

    3Table方式1

    4Ul li方式2

    5参考3

     

     

    1. atitit.动态模版解析

    1.1. Jquery.tmpl.js

    1.2. 比起anrular js方便啊。

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

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

     

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

    转载请注明来源: http://www.cnblogs.com/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/

     

     

     

     

  • 相关阅读:
    ADO.NET Entity Framework之ObjectQuery
    高效byte[]和string互转的方法
    异步邮件发送
    ADO.NET Entity Framework之ObjectContext
    【转】Memcache and Mongodb
    一周工作总结一次SQL优化记录
    Ubuntu下有关Java和数据库的一些工作记录(一)
    自定义函数,替换字符串中指定位置的字符
    一次优化记录
    对比shrink和move
  • 原文地址:https://www.cnblogs.com/attilax/p/4758240.html
Copyright © 2011-2022 走看看