流程一品

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

上一篇记录了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' });
        });

预览效果:

源码下载

posted on 2016-12-22 15:39  流程一品  阅读(933)  评论(0编辑  收藏  举报
会员力量,点亮园子希望