easyui自定义timeline插件

(function($) {
    function build(target, options, data) {
        if(data && data.length > 0) {
            $.each(data, function(index,row) {
                var item = $("
").addClass('easyui-timeline-item');
                item.append('');
                var content = $('
 ');
                content.append('
' + this.time + '
');
                var body = $('
 ');

                body.html(this.content);
                content.append(body);

                item.append(content);

                if(options.onClick) {
                    item.on('click', function() {
                        options.onClick.call(target, row);
                    });
                }

                target.append(item);
            });
            
            if(options.onComplete) {
                options.onComplete.call(target, data);
            }
        }
    }

    $.fn.timeline = function(options) {
        if(typeof options == "string") {
            var params = [];
            for(var i = 1; i < arguments.length; i++) {
                params.push(arguments[i]);
            }
            this.each(function() {
                $.fn.timeline.methods[options].apply(this, params);
            });
            return this;
        }
        options = options || {};

        return this.each(function() {
            var data = $.data(this, "timeline");
            var newOptions;
            if(data) {
                newOptions = $.extend(data.options, options);
                data.opts = newOptions;
            } else {
                newOptions = $.extend({}, $.fn.timeline.defaults, $.fn.timeline.parseOptions(this), options);
                $.data(this, "circle", {
                    options: newOptions
                });
            }

            var target = $(this);
            target.addClass('easyui-timeline');
            if(newOptions.url) {
                $.ajax({
                    type: "get",
                    url: newOptions.url,
                    dataType: 'json',
                    success: function(data) {
                        if(newOptions.onLoadSuccess) {
                            newOptions.onLoadSuccess.call(target, data);
                        }
                        build(target, newOptions, data);
                    }
                });
            } else if(newOptions.data && newOptions.data.length > 0) {
                build(target, newOptions, newOptions.data);
            }
        });
    }

    $.fn.timeline.methods = {

    }

    $.fn.timeline.parseOptions = function(target) {
        return $.extend({}, $.parser.parseOptions(target, ["data", "url", {
            data: "array",
            url: "string"
        }]));
    };

    $.fn.timeline.defaults = {
        data: [],
        url: '',
        onLoadSuccess: function(data) {

        },
        onComplete:function(data){
            
        },
        onClick:function(item){
            
        }
    }

    $.parser.plugins.push('timeline');
})(jQuery);

.easyui-timeline {
  padding-left: 5px;
}
.easyui-timeline .easyui-timeline-item {
  position: relative;
  padding-bottom: 20px;
  list-style: none;
}
.easyui-timeline .easyui-timeline-item:before {
  content: '';
  position: absolute;
  left: 5px;
  top: 20px;
  z-index: 0;
  width: 1px;
  height: 100%;
  background-color: #e6e6e6;
}
.easyui-timeline .easyui-timeline-item:first-child:before {
  display: block;
}
.easyui-timeline .easyui-timeline-item:last-child:before {
  display: none;
}
.easyui-timeline .easyui-timeline-axis {
  position: absolute;
  left: -5px;
  top: 0;
  z-index: 10;
  width: 20px;
  height: 20px;
  background-color: #fff;
  color: #5FB878;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  border: 1px solid #5FB878;
}
.easyui-timeline .easyui-timeline-content {
  padding-left: 25px;
}
.easyui-timeline .easyui-text {
  line-height: 22px;
  font-size: 14px;
  color: #666;
}
.easyui-timeline .easyui-text h3 {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}
.easyui-timeline .easyui-text .easyui-timeline-title {
  position: relative;
  margin-bottom: 10px;
}

//js部分
$(function() {
    $("#timeline").timeline({
        url: 'timeline.json',
        onClick:function(item){
            alert(item.id);
        }
    });
})

//html部分

 

[{
	"id":1,
	"time":"8月18日",
	"content":"layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。 不枉近百个日日夜夜与之为伴。因小而大，因弱而强。无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔"
},{
	"id":2,
	"time":"8月16日",
	"content":"过去"
},{
	"id":3,
	"time":"7月16日",
	"content":"未来"
}]