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下function声明一些小结
Dec 28 Javascript
用js生产批量批处理执行命令
Jul 28 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
一分钟理解js闭包
May 04 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
Vue实现下拉加载更多
May 09 Vue.js
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
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
JSONP之我见
2015/03/24 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
python中requests模块的使用方法
2015/04/08 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
python cumsum函数的具体使用
2019/07/29 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
消防安全标语
2014/06/07 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python