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);