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判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
分享Javascript实用方法二
Dec 13 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
eslint+prettier统一代码风格的实现方法
Jul 22 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读取目录所有文件信息dir示例
2014/03/18 PHP
php实现URL加密解密的方法
2016/11/17 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
python解析xml文件操作实例
2014/10/05 Python
简单介绍Python中的floor()方法
2015/05/15 Python
Python字符串格式化
2015/06/15 Python
python文件与目录操作实例详解
2016/02/22 Python
python实现简单购物商城
2016/05/21 Python
Django中的用户身份验证示例详解
2019/08/07 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
类的核心特性有哪些
2014/01/01 面试题
理工类毕业自我鉴定
2014/02/20 职场文书
科技工作者先进事迹
2014/08/16 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
2014教师年度工作总结
2014/11/10 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
2016党校培训心得体会
2016/01/07 职场文书
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android