基於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("

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

　　

方法參數說明： percent:比例數組（佔的比例），如：[0.5,0.4,0.6] 長度大於1時，依序發配比例bar_bgcolor:色條的背景顏色bar_bordercolor:色條的邊框顏色bar_borderwidth:色條的邊框寬度width:色條的寬度height:色條的高度callback:色條的寬度height:色條的高度callback:色函數的寬度（色彩條顯示完後）