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 相关文章推荐
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
JavaScript知识点整理
Dec 09 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
bootstrap table实例详解
Jan 06 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
JS 验证码功能的三种实现方式
Nov 26 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,不用COM,生成excel文件
2006/10/09 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
资料员的岗位职责
2013/11/20 职场文书
决心书标准格式
2014/03/11 职场文书
奥利奥广告词
2014/03/20 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP