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 相关文章推荐
JS显示表格内指定行html代码的方法
Mar 31 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
js实现计时器秒表功能
Dec 16 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
原生JS生成指定位数的验证码
Oct 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对数组排序代码分享
2014/02/24 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
php strftime函数的详细用法
2018/06/21 PHP
菜鸟javascript基础整理1
2010/12/06 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
Vue如何获取数据列表展示
2019/12/11 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
Python缓存技术实现过程详解
2019/09/25 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
奇怪的鱼:Weird Fish
2018/03/18 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
巧克力蛋糕店创业计划书
2014/01/14 职场文书
化妆品促销方案
2014/02/24 职场文书
天网工程实施方案
2014/03/26 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
python tkinter实现定时关机
2021/04/21 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis