微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery自定义插件结合baiduTemplate.js实现异步刷新附源码

<p style="text-align: left">上一篇记录了<a target="_blank" href="//www.jb51.cc/article/100901.htm">BaiduTemplate模板引擎使用示例(附源码),在此基础上对使用方法进行了封装


<p style="text-align: left">

自定义插件jajaxrefresh.js 代码如下:


<div class="jb51code">
<pre class="brush: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);

调用方法:

预览效果:

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文地址:https://www.jb51.cc/jquery/43246.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐