jQuery百分比动态色彩条插件开发指南

插件开发背景与动机

此前未曾编写过jQuery插件，因此在开发此功能时，我反复查阅了jQuery插件的定义及开发规范，边写代码边对照文档，经历了不少调试过程。

开发此插件的初衷是为了在后续项目中复用此类功能。在之前的问卷调查应用中，曾使用过类似效果，但当时未封装为插件，导致代码冗余、维护困难且调用繁琐，仅调试就耗费了大量时间。

鉴于该功能逻辑相对简单，非常适合作为新手练习编写jQuery插件的案例。

具体运行效果如下图所示：

这属于一种简易的比例展示图表。

插件核心源码实现

以下是该插件的核心代码实现：

 
; (function ($) {
$.fn.percentbar = function (o) {
var options1 = $.extend({
percent:[],//比例数组，如：[0.5,0.4,0.6] 长度大于1时，按顺序发配比例
bar_bgcolor:'#EFEFEF',//色彩条的背景颜色
bar_bordercolor:'#E2E2E2',//色彩条的边框颜色
bar_borderwidth:1,//色彩条的边框宽度
width:250,//色彩条的宽度
height:14,//色彩条的高度
callback:function(){}//l回调函数（色彩条显示完后）
},o);
var g=this.length;
var styleData=InitColor();
$(this).css({ "background": "none repeat scroll 0 0 #EFEFEF", "border": "1px solid #E2E2E2" ,"height": options1.height+"px","width": options1.width+"px","background-color":options1.bar_bgcolor,"border-color":options1.bar_bordercolor,"border-width":options1.bar_borderwidth+"px"});
$(this).each(function(index, element) {
$(element).append(" <p style=\"float: left; margin: 0;padding: 0;\"><span style=\"float: left;height: "+options1.height+"px;overflow: hidden;background-color:"+styleData[index]+";width:0px\"></span></p>");
if(g==index+1)
{ 
$(element).find("span").animate({ width: Math.round(options1.percent[index] * options1.width) }, "slow",options1.callback)
}else
{ 
$(element).find("span").animate({ width: Math.round(options1.percent[index] * options1.width) }, "slow")
} 
}); 
//初始化色彩条
function InitColor() {
var o = [];
var n = ["#5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6", "#aee7f8", "#c2f263", "#d843b3", "#d8e929", "#e58652", "#e7ab6d", "#ee335f", "#fbe096", "#ffc535"];
var q = n.slice();
for (var p = 0, l = g; p < l; p++) {
var k = Math.floor(Math.random() * q.length);
o.push(q[k]);
q.splice(k, 1);
if (q.length == 0) {
q = n.slice()
} 
} 
return o
} 
} 
})(jQuery);

原本计划将CSS样式独立出来，但最终决定将其直接集成到jQuery插件中，以简化使用流程，提升便捷性。

调用示例与参数说明

调用示例如下：

 
$(".good").percentbar({ percent: [0.5, 0.4], width: 500 });
<div class=".good"><div>
<div class=".good"><div>

方法参数详细说明：

percent:比例数组（占的比例），如：[0.5,0.4,0.6] 长度大于1时，按顺序发配比例

bar_bgcolor:色彩条的背景颜色

bar_bordercolor:色彩条的边框颜色

bar_borderwidth:色彩条的边框宽度

width:色彩条的宽度

height:色彩条的高度

callback:回调函数（色彩条显示完后）