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模仿msgbox提示效果代码
Jun 10 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 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删除HTMl标签的三种解决方法
2013/06/30 PHP
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Python提取网页中超链接的方法
2016/09/18 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
摄影实习自我鉴定
2013/09/20 职场文书
医学专业大学生求职的自我评价
2013/11/27 职场文书
玲玲的画教学反思
2014/02/04 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
先进个人评语大全
2015/01/04 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
详解如何使用Nginx解决跨域问题
2022/05/06 Servers