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 相关文章推荐
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
css配合jquery美化 select
Nov 29 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
javaScript中"=="和"==="的区别详解
Mar 16 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
js动态生成表格(节点操作)
Jan 12 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
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如何透过ODBC来存取数据库
2006/10/09 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
vue实现记事本功能
2019/06/26 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
python通过smpt发送邮件的方法
2015/04/30 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
python正则实现计算器功能
2017/12/14 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
Python关于反射的实例代码分享
2020/02/20 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
详解python UDP 编程
2020/08/24 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
会计学个人自荐信模板
2013/12/13 职场文书
音乐器材管理制度
2014/01/31 职场文书
合作协议书
2014/04/23 职场文书
运动员获奖感言
2014/08/15 职场文书
就业意向协议书
2015/01/29 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python