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代码
Aug 13 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 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生成制作验证码代码详解(推荐)
2016/06/12 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
js实现楼层导航功能
2017/02/23 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Python使用python-docx读写word文档
2019/08/26 Python
python global和nonlocal用法解析
2020/02/03 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
物业电工岗位职责
2013/11/20 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
精彩的广告词
2014/03/19 职场文书
表彰会主持词
2014/03/26 职场文书
部队个人年终总结
2015/03/02 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
JAVA API 实用类 String详解
2021/10/05 Java/Android
OpenCV实现普通阈值
2021/11/17 Java/Android
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js