jQuery插件Tmpl的简单使用方法
1.引入脚本
2.编写模板
2.1假设此时有一个,从后台一json格式发送来的数据
[{"tId":1,"tName":"张三","tAge":14,"tClass":1,"TeachClass":{"cId":1,"cName":"1班"}},
{"tId":2,"tName":"李四","tAge":25,"tClass":1,"TeachClass":{"cId":1,"cName":"1班"}},
{"tId":4,"tName":"赵六 ","tAge":16,"tClass":2,"TeachClass":{"cId":2,"cName":"2班"}}]
2.2此时你要显示的内容如下
然后按照你要显示的内容,设置模板:
【类似于aspx中的repeater控件】
【注:记得要设置id】
3.填写模板
按照上面的假设,后台返回的是一个json格式的字符串,那么通过ajax请求,并填写 模板
4.看到了效果页面
以上所述就是本文的全部内容了,希望大家能够喜欢。
相关推荐
-
jQuery插件EnPlaceholder实现输入框提示文字
用法: 首先在head中分别引入jQuery及本插件 <script type="text/javascript" src="jquery-1.7.2.min.js">script> <script type="text/javascript" src="jquery.enplaceholder.js">script> 然后就可以调用鸟 //通过value模拟placeholder $('i
-
编写自己的jQuery插件简单实现代码
这里只阐述如何编写自己的插件,至于要实现什么功能,要因人而异了...好了,下面开始... jQuery插件主要分为三种 1.封装对象方法的插件 2.封装全局函数的插件 3.扩展选择器的插件 这里只编写前俩种,即比较常见的.. 大多数插件都是已这种形式编写的: 复制代码 代码如下: (function ($) { /* 这里放置代码 */ })(jQuery); 这样的好处是函数内部依然可以使用$作为jQuery的别名,而不影响到其他库使用$ jQuery提供了俩个扩展用于编写插件 $.fn.ex
-
jQuery插件expander实现图片翻转特效
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 引入CSS和JS <link href="css/expander.css" rel="stylesheet"> <link href="css/theme.css" rel="stylesheet"> <script src="js/j
-
jquery实现的代替传统checkbox样式插件
本文实例讲述了jquery实现的代替传统checkbox样式插件.分享给大家供大家参考.具体如下: 效果图如下: 具体代码如下: (function($){ $.fn.tzCheckbox = function(options){ // Default On / Off labels: options = $.extend({ labels : ['ON','OFF'] },options); return this.each(function(){ var originalCheckBox =
-
JQuery实现的图文自动轮播效果插件
本文实例讲述了JQuery实现的图文自动轮播效果插件.分享给大家供大家参考.具体如下: intervalID = setInterval(cycleImage, slidetime); $(".main_image .desc").show(); // 展示图片 $(".main_image .block").animate({ opacity: 0.85 }, 1 ); // 设置透明度 //点击和悬停事件 $(".image_thumb ul li:f
-
jQuery插件简单实现方法
本文实例讲述了jQuery插件简单实现方法.分享给大家供大家参考.具体如下: (function($){ $.fn.extend({ myFunk: function() { // 此处必须返回jQuery对象 return $(); }, myPunk: function() { return this.addClass('punked') .bind('click', function(){ alert('You were punked!'); }); } }); })(jQuery); 使
-
jquery插件unobtrusive实现片段式加载
废话不多说,首先把源码分享给大家. //ajax支持库 /*! ** Unobtrusive Ajax support library for jQuery ** Copyright (C) Microsoft Corporation. All rights reserved. */ /*jslint white: true, browser: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true,
-
jQuery插件datalist实现很好看的input下拉列表
HTML5中定义了一种input框很好看的下拉列表--datalist,然而目前它的支持性并不好(万恶的IE,好在你要渐渐退役了...).于是最近更据需求写了一个小型datalist插件,兼容到IE8(IE7应该没多少人用了吧?).实现的具体需求如下: 当被选中的时候(触发blur焦点)(不管是鼠标还是tab键)清空input框并且显示自定义的下拉列表,然后可以用键盘的上下键选择(鼠标当然肯定没理由不可以啦),单击鼠标左键或者enter键将选中的列表的值输入到input框. 具体的实现代码如下:
-
jQuery插件windowScroll实现单屏滚动特效
回首望,曾经洋洋得意的代码现在不忍直视.曾经看起来碉堡的效果现在也能稍微弄点出来.社会在往前发展,人也不得不向前走. 参考于搜狗浏览器4.2版本首页的上下滚动效果.主要实现整个窗口的上下和左右滚动逻辑,还有很多可以拓展的空间.希望大家能多提意见与建议. 代码如下: HTML <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-
-
jQuery插件zepto.js简单实现tab切换
老规矩,先贴代码 <script> $(function(){ window.onload = function() { var $li = $('.taocan-title li'); var $ul = $('.taocan-content .con110'); $li.mouseover(function(){ var $this = $(this); var $t = $this.index(); $li.removeClass(); $this.addClass('active');
-
jQuery插件boxScroll实现图片轮播特效
BoxScroll 常见图片轮播效果的简单实现.可以数字列表控制或者左右按键控制.逻辑很简单,到了尽头得往回跑,看看注释就知道了. 代码如下: HTML <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="" name="keywor
随机推荐
- 基于ThinkPHP实现批量删除
- extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
- 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
- 基于JavaScript实现瀑布流效果
- Mybatis与Hibernate的区别
- java比较器Comparable接口与Comaprator接口的深入分析
- 深入理解Javascript中的this关键字
- .net 中的SqlConnection连接池机制详解
- XenServer 6.5 安装配置图文教程
- JavaScript中的连字符详解
- 一段ASP的HTTP_REFERER判断代码
- Android中的SpannableString与SpannableStringBuilder详解
- [asp]天枫AJAX blog V1.0 程序提供下载了
- 深入理解Shell输出颜色与控制
- c语言实现顺序表的基本操作
- 通过jQuery源码学习javascript(一)
- java微信公众号开发第一步 公众号接入和access_token管理
- 关于PHP中协程和阻塞的一些理解与思考
- PHP spl_autoload_register实现自动加载研究
- Android sdutio配置Zxing进行扫码功能的实现方法