zoukankan      html  css  js  c++  java
  • jquery 中的tmpl类似于asp.net中的datalist控件。

    <script id="guestNav" type="text/x-jquery-tmpl">
    <div id="guestTopNavWrap">
    <table id="topNav" cellpadding="0" cellspacing="0">
        
    <tr>
            
    <td id="topSiteName"><a href="/">${siteName}</a></td>
            
    <td id="topNavMenu">
            
    </td>
            <td style="padding-right:5px; text-align:right;">        
            
    <form action="${LoginAction}" method="post" id="loginForm" style="float:right; border:0px #aaa solid;">
            用户名 
    <input class="txtUid" name="txtUid" type="text" style="80px; border:1px #ccc inset;" />
            密码 <input name="txtPwd" type="password"  style="60px;  border:1px #ccc inset;" />
            
                
    <label><input name="RememberMe" type="checkbox" id="chkRemember" checked="checked" />记住我</label>
                
    <input id="Submit1" type="submit" value="登录" class="btn btns" /><span class="loadingInfo"></span>
                
    <a href="${RegLink}" class="left5 right5 strong">注册</a>
                <a href="${resetPwdLink}">忘记密码?</a>
                <input name="returnUrl" type="hidden" value="${returnUrl}" />
                <input name="ValidationText" id="loginValidationText" type="hidden" />
                </form>
            </td>
        </tr>
    </table>
    </div>
    </script>

       第一次看到这个代码,懵了,搜索下才知道:

    jquery 中的tmpl类似于asp.net中的datalist控件。
     
    首选,在页面代码中加入两行,jquery的js文件引用
     
    <script src="http://code.jquery.com/jquery-latest.min.js%22%3E%3C/script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js%22%3E%3C/script>
     


    然后再建一个html模版
     
    <script id="moiveTemplate" type="text/x-jquery-templ">
     
    <li><b>${Name}</b>(${ReleaseYear})</li>
     
    </script>
     


    <ul id="moiveList">
     
    </ul>
     

    <script >
     
    var moives=[{Name:"The Red Violin",ReleaseYear:"1998"},{Name:"Eyes Wide Shut",ReleaseYear:"1999"},{Name:"The Inheritance",ReleaseYear:"1976"}];
     


    $("#moiveTemplate").templ(moives).appendTo("#moiveList");
     
    </script>
     


    效果显示为:
     

    •The Red Violin (1998)
     •Eyes Wide Shut (1999)
     •The Inheritance (1976)


     

  • 相关阅读:
    bat脚本%cd%和%~dp0的区别
    java测试程序运行时间
    != 的注意事项
    [转载] iptables 防火墙设置
    .NET 创建 WebService
    [转载] 学会使用Web Service上(服务器端访问)~~~
    cygwin 安装 apt-cyg
    在Element节点上进行Xpath
    Element节点输出到System.out
    [转载] 使用StAX解析xml
  • 原文地址:https://www.cnblogs.com/hoge/p/2095212.html
Copyright © 2011-2022 走看看