jquery 模板的应用示例

代码如下:

<body>

<h1>天地盟主 QQ：467713292</h1>

<!-- 将模版放置的位置标签 -->
<div id="contactContainer"></div>

<!-- 定义模板的内容布局 和定义显示的字段 -->
<script id="contactTemplate" type="text/html">
<div>
姓名: {{= name }} <br />
手机号: {{= phone }}
</div>
</script>
//引用两个js

代码如下:

<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">

var contacts = [
{name:"天地盟主", phone:"467713292"},
{name:"与狼共舞", phone: "206-555-7878" },
{name:"程序员中的菜鸟", phone: "415-555-8888" }
];

//只需要这样一句话就可以将上面定义好的json数据填充到模板里 呈现出来

代码如下:

$("#contactTemplate").render(contacts).appendTo("#contactContainer");
</script>
</body>

赞 (0)

相关推荐

  • jquery 模板的应用示例

    复制代码 代码如下: <body> <h1>天地盟主 QQ:467713292</h1> <!-- 将模版放置的位置标签 --> <div id="contactContainer"></div> <!-- 定义模板的内容布局 和定义显示的字段 --> <script id="contactTemplate" type="text/html"> <

  • 常用的jquery模板插件——jQuery Boilerplate介绍

    在初次进行jquery插件开发时,我们往往无从下手,当然我们可以按照jquery官方提供的格式进行简单的插件开发,但是很多时候往往不尽完美,一不小心,就造出一个很"烂"的插件:难以维护.难以扩展.使用繁琐.性能不佳...当我们在不断的实践中,慢慢积累下来时,有些问题得到了有效的避免,但也带来了新的问题:在众多纷杂的jquery插件开发模式中,究竟哪一种模式才是最好的呢? 如果能提供一个模板,通过一定的约束和规范为开发者解决在jquery插件开发中的"迷惘"那该多好!

  • 浅谈原生JS实现jQuery的animate()动画示例

    本文介绍了浅谈原生JS实现jQuery的animate()动画示例,希望此文章对各位有所帮助. 参数介绍: obj 执行动画的元素 css JSON数值对,形式为"{属性名: 属性值}",指要执行动画的书序及其对应值 interval 属性每执行一次改变的时间间隔 speedFactor 速度因子,使动画具有缓冲效果,而不是匀速不变(speedFactor为1) func 执行完动画后的回调函数 注意: 必须为每一个元素分别添加一个定时器,否则会互相影响. cur != css[arr

  • jQuery模板技术和数据绑定实现代码

    jQuery模板技术和数据绑定实现代码

    好消息来了,微软开发出了这样的框架,这是对jQuery的一个扩展,从此以后要在浏览器上动态显示服务器端Web Service返回的数据将变得如同用服务器端控件显示数据一样容易. 这个技术就叫jQuery templates and data linking ,这是微软对jQuery做的一个扩展.这种扩展需要jQuery官方的审核,然后才能被包含在jQuery中.据ScottGu的博客上说,此扩展正在等待审核阶段.但是这些功能却是非常强大而且实用,我就先把它转过来了,先睹为快. 在编写AJAX应用

  • JQuery模板插件 jquery.tmpl 动态ajax扩展

    JQuery模板插件 jquery.tmpl 动态ajax扩展

    在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以特地写成jquery工具函数,加入了本地数据和ajax数据加载模板,数据的方式. 参数说明: Tmpl: function(template, data, fun) 1:template: 1): url: 为ajax的加载url,ajax当且仅当remote= true时候加载. 2):data:

  • jQuery 动态粒子效果示例代码

    1.js部分 var RENDERER = { PARTICLE_COUNT : 1000, PARTICLE_RADIUS : 1, MAX_ROTATION_ANGLE : Math.PI / 60, TRANSLATION_COUNT : 500, init : function(strategy){ this.setParameters(strategy); this.createParticles(); this.setupFigure(); this.reconstructMetho

  • python 爬取免费简历模板网站的示例

    代码 # 免费的简历模板进行爬取本地保存 # http://sc.chinaz.com/jianli/free.html # http://sc.chinaz.com/jianli/free_2.html import requests from lxml import etree import os dirName = './resumeLibs' if not os.path.exists(dirName): os.mkdir(dirName) headers = { 'User-Agent

  • element-ui封装一个Table模板组件的示例

    element-ui封装一个Table模板组件的示例

    大家在做后台管理系统的时候,写的最多的可能就是表格页面了,一般分三部分:搜索功能区.表格内容区和分页器区.一般这些功能都是使用第三方组件库实现,比如说element-ui,或者vuetify.这两个组件库都各有各的优点,但就table组件来说,我还是比较喜欢vuetify的实现,不用手写一个个column,只要传入headers的配置数组就行,甚至分页器都内置在了table组件里,用起来十分方便.有兴趣可以看看:vuetify data table. 上面是一个经典的用element-ui开发的

  • python jinja2模板的使用示例

    模板的用处 jinja2 可以用来修改配置文件,把配置文件的关键地方可以用变量来进行替换 模板语法 模板语法和django的模板语法差不多 在jinja2中,存在三种语法: 控制结构{% %} 变量取值{{ }} 注释{# #} for 循环 {% for user in users %} {{user.username}} {% endfor %} 迭代字典 {% for key,value in my_dict.iteritems() %} {{ key }} {{ value }} {%

  • GoJs 图片绘图模板Picture使用示例详解

    目录 前言 go.Picture的使用 go.Picture的属性 width.height.desiredSize属性 source属性 flip属性 imageStretch.imageAlignment属性 拓展 结语 前言 前面已经说过了通过go.TextBlock(文本)和go.Shape(集合图形)来丰富节点内部的显示内容.而有些时候需要在节点内部上传一些说明材料,恰好这些材料又是图片材料.如果拿图片和节点信息对照观看的话,一一对照会特别麻烦.如果能够在节点内部显示缩略图的话.在信息

随机推荐