jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)


Posted in Javascript onDecember 22, 2016

上一篇记录了BaiduTemplate模板引擎使用示例(附源码),在此基础上对使用方法进行了封装

自定义插件jajaxrefresh.js 代码如下:

//闭包限定命名空间
(function ($) {
 $.fn.extend({
 "ajaxrefresh": function (options) {
 //检测用户传进来的参数是否合法
 if (!isValid(options))
 return this;
 var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
 var $this = $(this); //获取当前dom 的 jQuery对象
 $.ajax({
 url: opts.url,
 dataType: "json",
 success: function (data) {
 var template = opts.template;
 $.ajax({
 url: template,
 dataType: "html",
 success: function (val) {
 $this.html(baidu.template(val, data));
 }
 });
 }
 });
 
 }
 });
 //默认参数
 var defaluts = {
 template: '',
 url:''
 };
 //私有方法,检测参数是否合法
 function isValid(options) {
 return !options || (options && typeof options === "object") ? true : false;
 }
})(window.jQuery);

调用方法:

$(document).ready(function () {
 $("#list").ajaxrefresh({ template: 'templates/list.html', url: 'data/data.txt' });
 });

预览效果:

jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)

源码下载:http://xiazai.3water.com/201612/yuanma/baiduTemplate-v1.1_3water.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
js给table赋值的实例代码
Oct 13 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
Html中 IFrame的用法及注意点
Dec 22 #Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 #Javascript
BootStrap3使用错误记录及解决办法
Dec 22 #Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 #Javascript
Angular-Touch库用法示例
Dec 22 #Javascript
Json按某个键的值进行排序
Dec 22 #Javascript
js实现登录验证码
Dec 22 #Javascript
You might like
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
Django csrf 验证问题的实现
2018/10/09 Python
PyTorch预训练的实现
2019/09/18 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
先进个人获奖感言
2014/01/24 职场文书
继承权公证书
2014/04/09 职场文书
公司租房协议书范本
2014/10/08 职场文书
婚宴邀请函
2015/01/30 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js