zoukankan      html  css  js  c++  java
  • JTemplate学习(二)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <!-- saved from url=(0043)http://jtemplates.tpython.com/example2.html -->
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="Scripts/jTemplates/example/jquery.js"></script>
        <script type="text/javascript" src="Scripts/jTemplates/jquery-jtemplates.js"></script>
        <title>jTemplates</title>
        <script type="text/javascript">
            // data for testing 模板数据
            $(document).ready(function () {
                var data = {
                    name: 'User list',
                    list_id: 4,
                    table: [
    					{ id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com' },
    					{ id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com' },
    					{ id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com' },
    					{ id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com' },
    					{ id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com' }
                    ]
                };
    
                // Localize data 模板参数
                var lang = {};
                lang['en'] = {
                    'id': 'ID',
                    'name': 'Name',
                    'mail': 'E-Mail',
                    'language': 'english'
                };
                lang['pl'] = {
                    'id': 'ID',
                    'name': 'Nazwisko',
                    'mail': 'Adres e-mail',
                    'language': 'polski'
                };
    
                // attach the template 加载模板
                $(".jTemplatesTest").setTemplateElement("template");
    
                // set parameter 'lang' 为模板指定参数,调用参数用 $P
                $("#result1").setParam('lang', lang['en']);
                $("#result2").setParam('lang', lang['pl']);
    
                // process the template 填充数据 调用数据用 $T
                $(".jTemplatesTest").processTemplate(data);
            });
        </script>
    
        <style type="text/css">
            .jTemplatesTest {
                background: #DDD;
                border: 1px solid #000;
                margin: 2em;
                 480px;
            }
    
                .jTemplatesTest * {
                    padding: 4px;
                    margin: 2px auto;
                }
    
                .jTemplatesTest td, tr {
                    background: #EEE;
                    border: 1px solid black;
                }
        </style>
    
    </head>
    
    <body style="zoom: 1;">
        <!-- Template content -->
        <textarea id="template" style="display: none">
            <div>{$T.name}: {$T.list_id} [{$P.lang.language}]</div>
    		<table>
    			<thead style="font-weight: bold">
    				<tr>
    					<td>{$P.lang['name']}</td>
    					<td>{$P.lang['mail']}</td>
    				</tr>
    			</thead>
    			<tbody>
    				{#foreach $T.table as record}
    				<tr>
    						<td>{$T.record.name}</td>
    						<td>{$T.record.mail}</td>
    				</tr>
    				{#/for}
    			</tbody>
    		</table>
    	</textarea>
        <!-- Output elements -->
        <div id="result1" class="jTemplatesTest">
        </div>
        <div id="result2" class="jTemplatesTest">
        </div>
    </body>
    </html>
    

    为模板指定参数

  • 相关阅读:
    作业29——制作首页的显示列表。
    作业28——发布功能完成。
    作业27——登录之后更新导航
    作业26——完成登录功能,用session记住用户名
    作业25——完成注册功能
    作业24——通过用户模型,对数据库进行增删改查操作。
    作业23——连接mysql数据库,创建用户模型
    作业22——管理信息系统的开发与管理
    作业——21加载静态文件,父模板的继承和扩展
    值类型与引用类型区别
  • 原文地址:https://www.cnblogs.com/xsj1989/p/5191877.html
Copyright © 2011-2022 走看看