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 remove 自定义数组删除方法
Oct 20 Javascript
js 代码优化点滴记录
Feb 19 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 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 多维数组排序实现代码
2009/08/05 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
smarty中post用法实例
2014/11/28 PHP
php实现通过ftp上传文件
2015/06/19 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
python列表操作使用示例分享
2014/02/21 Python
详解Python中for循环是如何工作的
2017/06/30 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
Ajax请求总共有多少种Callback
2016/07/17 面试题
个人自荐信
2013/12/05 职场文书
生产部主管岗位职责
2014/01/06 职场文书
购房协议书
2014/04/11 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
2015年采购员工作总结
2015/04/27 职场文书