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 相关文章推荐
javascript延时加载之defer测试
Dec 28 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
react如何快速设置文件路径别名
Apr 28 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源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
Puppet的一些技巧
2018/09/17 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
微信小程序实现星星评分效果
2020/11/01 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
Python解析xml中dom元素的方法
2015/03/12 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
python 简单的多线程链接实现代码
2016/08/28 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
如何理解Python中的变量
2020/06/01 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
公司总经理岗位职责
2014/03/15 职场文书
《风筝》教学反思
2014/04/10 职场文书
大型公益活动策划方案
2014/08/20 职场文书
2016寒假假期总结
2015/10/10 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS