<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script type="text/javascript" src="scripts/jquery.js"></script>

<script type="text/javascript" src="scripts/jquery-ui.js"></script>

<script type="text/javascript" src="scripts/jsrender.js"></script>

<link href="scripts/demos.css" rel="stylesheet" />

</head>

<body>

<button id="switchBtn">展示详细内容</button><br />

<table>

<tbody id="movieList"></tbody>

</table>

<script type="text/javascript">

//数据来源

var movies = [

{ name: "Cupid", Birthday: "1998-12-12", nation: "中国" },

{ name: "陌上花开", Birthday: "1999-23-234", nation: "美国" },

{ name: "Tina", Birthday: "1976-34-13", nation: "法国" }

];

//两个模板

$.templates({

titleTemplate: "<tr><td colspan=3>{{>name}}</td></tr>",

detailTemplates: "<tr><td>姓名：{{>name}}</td><td>出生日期：{{>Birthday}}</td><td>国籍：{{>nation}}</td></tr>"

});

var details = true;

//多模板

function switchTemplates() {

var html, button = $("#switchBtn");

details = !details;

if (details) {

//第一个木板

button.text("展示姓名");

html = $.render.detailTemplates(movies);

} else {

//第二个某班

button.text("展示详细信息");

html=$.render.titleTemplate(movies);

}

$("#movieList").html(html);

}

$("#switchBtn").click(switchTemplates);

switchTemplates();

</script>

　　

</body>

</html>

　　

JsRender系列demo(2)多模板-template的更多相关文章

  1. JsRender系列demo(6)-无名

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

  2. JsRender系列demo(5) for else

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. JsRender系列demo(3)-自定义容器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. JsRender系列demo(1)-insert-data

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. JsRender系列demo(9)自定义函数

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. JsRender系列demo(7)compline

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

  7. JsRender系列demo(4)-if else

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. Freemarker-2.3.22 Demo - No01_获取模板并直接输出

    package No01_获取模板并直接输出; import java.io.File; import java.io.FileOutputStream; import java.io.OutputS ...

  9. ECMall2.x模板制作入门系列之2（模板标签/语法）

    ECMall2.x模板制作入门系列之2(模板标签/语法) 今天给大家带来一个模板语法的教程.希望能为ECMall模板制作者提供一份参考资料.如有问题.建议和意见,欢迎提出. 在ECMall模板中,用& ...

随机推荐

  1. MTD技术介绍

    MTD(Memory Technology device)是用于访问memory设备(ROM.Flash)的Linux子系统,在Linux中引入这一层的主要目的是为了更加简单的添加新的Memory存储 ...

  2. Qt获得网页源码

    1.工程中添加网络模块 打开你的.pro文件插入以下代码 QT += network 2.添加代码 CodeQString NetWork::getWebSource(QUrl url) { QNet ...

  3. FPGA/CPLD设计思想与技巧

    本文讨论的四种常用FPGA/CPLD设计思想与技巧:乒乓操作.串并转换.流水线操作.数据接口同步化,都是FPGA/CPLD逻辑设计的内在规律的体现,合理地采用这些设计思想能在FPGA/CPLD设计工作 ...

  4. 【Qt】Qt之自定义界面（实现无边框、可移动）【转】

    简述 UI设计是指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得有个性.有品位,还要让软件的操作变得舒适简单.自由,充分体现软件的定位和特点. 爱美之心人皆有之.其实软件 ...

  5. 安装gitolite，并ssh公钥无密码登录

    安装gitolite,并ssh公钥无密码登录 gitolite是管理git版本库的一种方案,它将git版本库的管理信息放在了一个特殊git版本库里.gitolite与linux操作系统集成了,需要使用 ...

  6. iOS 点击return或者点击屏幕键盘消失

    //定义两个文本框 UITextField *textName; UITextField *textSummary; //点击return 按钮 去掉 -(BOOL)textFieldShouldRe ...

  7. delphi图形图像开发相关

    ①delphi的图形处理(doc) http://wenku.baidu.com/view/519df09951e79b89680226ee.html ②delphi的图形图像处理(ppt) http ...

  8. Oracle表空间、段、区和块

    数据块(Block) 数据块Block是Oracle存储数据信息的最小单位.注意,这里说的是Oracle环境下的最小单位.Oracle也就是通过数据块来屏蔽不同操作系统存储结构的差异.无论是Windo ...

  9. Json(2)-DataContractJsonSerializer

    public static void DataContractSerializeDemo()        {            User user = new User { UserID = 1 ...

  10. Ztack学习笔记(2)-系统初始化分析

    main函数先执行初始化工作,包括硬件.网络层.任务等的初始化. 一 系统初始化 系统初始化函数主要完成内存分配.消息队列头.定时器.电源管理.任务系统及内存栈等的初始化,具体如下代码所示: //os ...