`
Luob.
  • 浏览: 1588904 次
  • 来自: 上海
社区版块
存档分类
最新评论

Jquery template 小demo

阅读更多
<!DOCTYPE html> 
<html> 
<head> 
  <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
</head> 
<body> 
   
<ul id="movieList"></ul> 
 
<script> 
  var movies = [ 
  { Name: "The Red Violin", ReleaseYear: "1998" }, 
  { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 
  { Name: "The Inheritance", ReleaseYear: "1976" } 
  ]; 
 
var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>"; 
 
/* Compile the markup as a named template */ 
$.template( "movieTemplate", markup ); 
 
/* Render the template with the movies data and insert 
   the rendered HTML under the "movieList" element */ 
$.tmpl( "movieTemplate", movies ) 
  .appendTo( "#movieList" ); 
</script> 
 
</body> 
</html>
分享到:
评论

相关推荐

    jquery前台模板demo(很实用的)

    "jQuery前台模板demo"就是这样一个实用的工具,它结合了jQuery的强大功能和易用性,为前端设计提供了一套便捷的解决方案。 **一、jQuery简介** jQuery是一款高效、简洁的JavaScript库,它简化了HTML文档遍历、事件...

    art-template Demo

    完整的一套关于art-template的Demo,采用前后台分离的方式,后台提供数据接口,前台渲染数据的方式,采用Ajax从后台获取数据进行渲染,前台使用jQuery+art-template,后台使用ASP.NET模拟后台数据接口,打开即可用

    jquery-confirm Demo|Karle

    该插件由Karle开发,其Demo可以在进行查看,体验各种功能和自定义选项。 **1. 安装与引入** 在项目中使用`jQuery-confirm`,首先需要确保已经引入了jQuery库,接着下载或通过CDN获取`jquery-confirm`的CSS和JS文件...

    基于jQuery开发的javascript模板引擎-jTemplates

    - **绑定数据和模板**:使用jQuery选择器找到模板元素,然后调用`.processTemplate()`方法,传入数据模型,将数据绑定到模板。 - **处理模板事件**:如果模板中包含交互元素,可以通过jQuery的事件处理函数进行响应...

    HTML前端wangEditor富文本编辑器demo(jQuery)

    &lt;title&gt;wangEditor jQuery Demo &lt;script src="jquery.min.js"&gt; &lt;script src="wangEditor.min.js"&gt;&lt;/script&gt; &lt;div id="editor"&gt;&lt;/div&gt; $(function () { var editor = new wangEditor('#editor'); editor...

    jquery select2

    为了解决这些问题,jQuery社区推出了一个强大的插件——jQuery Select2。Select2不仅提供了美观的界面,还增强了用户体验,特别是对于大型数据集的搜索功能,使得在下拉框中快速找到所需选项变得轻而易举。 一、...

    jquery UI组件集合

    7. 模板(Template):jQuery UI 的模板功能允许开发者创建和管理重复的数据结构,通过简单的标记语言来渲染动态数据。 8. 效果(Effects):jQuery UI 提供了一系列内置的动画效果,如淡入淡出、滑动、切换等,...

    jQuery File Upload

    •Demo page (and Demo implementation information). •How to Setup the plugin on your website. •How to use only the Basic plugin (minimal setup guide). •Security considerations. •The plugin API. •...

    requireJsDemo入门Demo

    7. **jQuery模板(jQuery Template)**:`jquery.tmpl.min.js`是jQuery的一个模板插件,它允许使用简单的模板语法将数据渲染到HTML中,方便数据驱动的前端开发。 8. **CSS加载(CSS Loader)**:在某些情况下,可能...

    jquery.jtemplates 实例

    本文将深入探讨jQuery.jTemplates的使用方法,通过三个具体的DEMO来帮助你理解并掌握这个强大的工具。 一、jQuery.jTemplates简介 jQuery.jTemplates是基于Mustache模板语言理念的一个jQuery插件,它的主要功能是...

    完美的CMS后台DEMO

    此外,可能会有jQuery或其他JavaScript库用于处理DOM操作和动态效果,简化前端开发。 总的来说,这个“完美的CMS后台DEMO”是一个集成了现代Web技术的后台管理系统实例,它展示了如何利用HTML5和CSS3的力量来创建...

    2015-UC-Template-Demo:2015 Esri用户会议模板样板演示

    此资源——“2015-UC-Template-Demo”,提供了丰富的示例和代码,帮助开发者理解和实践这个概念。 ArcGIS是Esri公司开发的一套地理信息系统,广泛应用于地图制作、地理数据分析以及Web地图服务。其中,ArcGIS Web ...

    jquery 圈人

    描述中提到"jquery 圈人Demo 实例 例子 源码",这表明提供了一个实际操作的示例,包括HTML、CSS、JavaScript源代码,用于演示如何实现这一功能。用户可以下载这些文件,在本地运行以查看效果,并根据需要修改源码以...

    requirejs_Demo演示

    template.html`可以用来加载HTML模板。 6. **异步加载**:requireJS的一大优势在于其异步加载特性,允许脚本按需加载,而不是一次性加载所有脚本,这显著提高了页面的加载速度。 7. **Shim配置**:对于不支持AMD的...

    jquery-mytooltip插件鼠标悬停文字提示代码.zip

    link rel="stylesheet" href="demo/style.css?3.1.64"&gt;  [removed][removed]  [removed][removed]  [removed][removed] &lt;/head&gt; &lt;body&gt;[removed][removed]      ...

    实现登录用户管理功能的demo

    在这个“实现登录用户管理功能的demo”中,我们主要关注以下几个技术点:Spring、Struts2、Spring JDBC Template、ajaxanywhere和jquery。 首先,Spring是一个开源的应用框架,它提供了强大的依赖注入(DI)和面向...

    使用juicer模板创建jQuery-weui九宫格

    在创建九宫格布局时,首先你需要准备一个HTML文件,如`juicer_demo.html`,在这个文件中,你需要定义一个容器元素,用于展示九宫格。这个容器可以是一个`div`元素,通过CSS设置相应的布局属性,例如使用`display: ...

    ListViewDemo

    在使用ListView时,我们需要设置控件的LayoutTemplate,定义数据项的布局。这通常包括一个PlaceHolder或其他容器控件,用来承载由ItemTemplate定义的每条数据项。ItemTemplate中可以包含各种控件,如Label、...

    瀑布流demo

    1. **JavaScript/jQuery实现**:瀑布流的实现通常需要JavaScript的支持,尤其是jQuery库,因为它提供了方便的DOM操作和事件处理功能。通过监听窗口的`resize`事件,可以确保在窗口大小改变时动态调整布局。一个基本...

    Admin Dashboard Template

    这些现成的demo可以帮助开发者快速原型设计和实现后台管理系统的核心功能,减少了从零开始创建页面布局和元素的时间。同时,模版通常会遵循最佳实践,确保界面的易用性和一致性,提高用户体验。 在使用"Admin ...

Global site tag (gtag.js) - Google Analytics