jQuery插件编写：Widget Factory实例（六）

在第三篇文章中介绍了一个采用传统方法开发的jQuery子弹图插件实例。这里将使用Widget Factory来创建同样的插件。所用到的HTML模型和CSS都是相同的，以及插件的调用方法都是一样。唯一不同的就是插件的实现方式，即JS文件不同。下面仅仅给出新的JS文件，其他CSS文件和运行效果图请参阅本系列文章的第三篇：jQuery插件编写：对象级插件示例（三）。

/**
 * 子弹图插件，基于网上的一个控件改编而成
 * 网上原插件地址：https://github.com/NETTUTS/An-In-Depth-Review-of-the-jQuery-Widget-Factory
 * http://net.tutsplus.com/tutorials/javascript-ajax/an-in-depth-review-of-jquerys-widget-factory/
 * 2013-6-21
 * @author 张书振
 */
(function($) {
	$.widget("nt.bulletchart", {
	    options : {
	      // 宽度为相对于容器的百分比: 0 - 100
	      size: 100,

	      //  [{ title: 'Sample Bar', value: 75, css: '' }],
	      bars: [],

	      //  [{ title: 'Sample Marker', value: 50, css: 'green' }],
	      markers: [],

	      // 刻度必须是百分比数值 ： 0 - 100
	      ticks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
	    },
	    _create : function() {
	    	var self = this;
	    	this.element.addClass("bullet-chart");
	    	// 设置size，即container的宽度
	    	this.element.css("width", this.options.size + "%");
	    	
	    	//添加legend
	    	this._legend = $("<div class='legend'></div>").appendTo(this.element);
	    	var legendIndex = 0;
	    	$.each(this.options.bars, function() {
		    	var $legendItem = $("<div class='legend-item'></div>")
		    	.attr("data-index", legendIndex++) // 给每个legendItem添加索引，便于单击事件处理
		    	.appendTo(self._legend);
		    	var $legendSymbol = $("<span class='legend-symbol bar'></span>").appendTo($legendItem);
		    	$legendSymbol.addClass(this.css);
		    	var $legendLabel = $("<span class='legend-label'></span>").appendTo($legendItem);
		    	$legendLabel.text(this.title);
	    	});
	    	$.each(this.options.markers, function() {
		    	var $legendItem = $("<div class='legend-item'></div>")
		    	.attr("data-index", legendIndex++)
		    	.appendTo(self._legend);
		    	var $legendSymbol = $("<span class='legend-symbol marker'></span>").appendTo($legendItem);
		    	$legendSymbol.addClass(this.css);
		    	var $legendLabel = $("<span class='legend-label'></span>").appendTo($legendItem);
		    	$legendLabel.text(this.title);
	    	});
	    	
	    	//添加图表
	    	this._container = $("<div class='chart-container'></div>").appendTo(this.element);
	    	this._tickbar = $("<div class='tick-bar'></div>").appendTo(this._container);
	    		//刻度
	    	$.each(this.options.ticks, function() {
	    		$("<span class='tick'></span>")
	    			.css("left", this + "%")
	    			.appendTo(self._tickbar);
	    		$("<span class='tick-label'><span>")
	    			.css("left", this + "%")
	    			.text(this)
	    			.appendTo(self._tickbar);
	    	});
	    		//绘制bar 和 marker
	    	$.each(this.options.bars, function() {
	    		$("<div class='bar'></div>")
	    			.addClass(this.css)
	    			.animate({ width : this.value + "%" })
	    			.appendTo(self._container);
	    	});
	    	$.each(this.options.markers, function() {
	    		$("<div class='marker'></div>")
	    			.addClass(this.css)
	    			.css("left", this.value + "%")
	    			.appendTo(self._container);
	    	});
	    	
	    },
	    _init : function() {
	    	var self = this;
	    	// 为legend添加事件
	    	$(".legend-item", this.element).toggle(
	    	function(event) {
	    		var $legendItem = $(this);
	    		$legendItem.addClass("fade");
	    		$(".chart-container>.bar, .chart-container>.marker", self.element).eq($legendItem.attr("data-index"))
	    		.fadeOut();
	    	},
	    	function(event) {
	    		var $legendItem = $(this);
	    		$legendItem.removeClass("fade");
	    		$(".chart-container>.bar, .chart-container>.marker", self.element).eq($legendItem.attr("data-index"))
	    		.fadeIn();
	    	});
	    },
	    _setOption : function(key, value) {
	    	this._super(key, value);
	    },
	    _destroy : function() {
	    	this.element.removeClass("bullet-chart");
	    	this._legend.remove();
	    	this._container.remove();
	    }
	});
})(jQuery);