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中 noConflict() 方法使用
Apr 25 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
JS实现随机抽选获奖者
Nov 07 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通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
json简单介绍
2008/06/10 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python线程池threadpool使用篇
2018/04/27 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
keras之权重初始化方式
2020/05/21 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
中班中秋节活动反思
2014/02/18 职场文书
学校献爱心活动总结
2014/07/08 职场文书
项目负责人岗位职责
2015/02/15 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL