jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2019/6/27 21:32:52
本文主要是介绍jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
上一篇记录了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' }); });
预览效果:
源码下载:http://xiazai.zyiz.net/201612/yuanma/baiduTemplate-v1.1_jb51.rar
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持找一找教程网!
这篇关于jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南