基于jquery打造的百分比動態(tài)色彩條插件
更新時間：2012年09月19日 21:47:37 作者：
主要是為了往后的項目中方便實現(xiàn)這類型的功能，在之前做問卷調(diào)查那個應(yīng)用中，就用到這個來顯示結(jié)果，但當時開發(fā)時并不用是插件的，一大堆代碼，看也煩，用起來很麻煩
以前沒寫過jquery插件，在開發(fā)這個時，寫一下代碼，又看一下jquery插件的定義（如何開發(fā)之類的東東），來來去去的。
之所以要寫這個插件，主要是為了往后的項目中方便實現(xiàn)這類型的功能，在之前做問卷調(diào)查那個應(yīng)用中，就用到這個來顯示結(jié)果，但當時開發(fā)時并不用是插件的，一大堆代碼，看也煩，用起來很麻煩（當時就調(diào)了一個上午）。
還好，這個功能比較簡單，正好合適新手寫插件。
具體的效果如圖：
這個也算是簡單的比例圖吧。
插件的具體的代碼如下：
; (function ($) {
$.fn.percentbar = function (o) {
var options1 = $.extend({
percent:[],//比例數(shù)組，如：[0.5,0.4,0.6] 長度大于1時，按順序發(fā)配比例
bar_bgcolor:'#EFEFEF',//色彩條的背景顏色
bar_bordercolor:'#E2E2E2',//色彩條的邊框顏色
bar_borderwidth:1,//色彩條的邊框?qū)挾?
width:250,//色彩條的寬度
height:14,//色彩條的高度
callback:function(){}//l回調(diào)函數(shù)（色彩條顯示完后）
},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獨立出來的，但最后還是直接出到j(luò)query插件里了，這樣使用起來更加方便的說。
例：
$(".good").percentbar({ percent: [0.5, 0.4], width: 500 });
<div class=".good"><div>
<div class=".good"><div>
方法參數(shù)說明：
percent:比例數(shù)組（占的比例），如：[0.5,0.4,0.6] 長度大于1時，按順序發(fā)配比例
bar_bgcolor:色彩條的背景顏色
bar_bordercolor:色彩條的邊框顏色
bar_borderwidth:色彩條的邊框?qū)挾?
width:色彩條的寬度
height:色彩條的高度
callback:回調(diào)函數(shù)（色彩條顯示完后）
之所以要寫這個插件，主要是為了往后的項目中方便實現(xiàn)這類型的功能，在之前做問卷調(diào)查那個應(yīng)用中，就用到這個來顯示結(jié)果，但當時開發(fā)時并不用是插件的，一大堆代碼，看也煩，用起來很麻煩（當時就調(diào)了一個上午）。
還好，這個功能比較簡單，正好合適新手寫插件。
具體的效果如圖：
這個也算是簡單的比例圖吧。
插件的具體的代碼如下：
復制代碼 代碼如下:
; (function ($) {
$.fn.percentbar = function (o) {
var options1 = $.extend({
percent:[],//比例數(shù)組，如：[0.5,0.4,0.6] 長度大于1時，按順序發(fā)配比例
bar_bgcolor:'#EFEFEF',//色彩條的背景顏色
bar_bordercolor:'#E2E2E2',//色彩條的邊框顏色
bar_borderwidth:1,//色彩條的邊框?qū)挾?
width:250,//色彩條的寬度
height:14,//色彩條的高度
callback:function(){}//l回調(diào)函數(shù)（色彩條顯示完后）
},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獨立出來的，但最后還是直接出到j(luò)query插件里了，這樣使用起來更加方便的說。
例：
復制代碼 代碼如下:
$(".good").percentbar({ percent: [0.5, 0.4], width: 500 });
<div class=".good"><div>
<div class=".good"><div>
方法參數(shù)說明：
percent:比例數(shù)組（占的比例），如：[0.5,0.4,0.6] 長度大于1時，按順序發(fā)配比例
bar_bgcolor:色彩條的背景顏色
bar_bordercolor:色彩條的邊框顏色
bar_borderwidth:色彩條的邊框?qū)挾?
width:色彩條的寬度
height:色彩條的高度
callback:回調(diào)函數(shù)（色彩條顯示完后）
相關(guān)文章
花N長時間積累的Jquery插件，希望大家喜歡。大家還有什么新的插件，請留言，我們一并收錄。感謝大家的支持。2011-05-05
jQuery Real Person驗證碼插件防止表單自動提交
這篇文章為大家介紹了一款jQuery驗證碼插件Real Person，可以防止自動提交表單2015-11-11
這篇文章主要介紹了IDEA配置jQuery, $符號不再顯示黃色波浪線的問題，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-10
jQtransForm jQuery表單美化修飾插件，附帶有PHP提交程序，當然ASP/ASP/NET/JSP都是同理，這里主要是jQuery美化部分的實例，美化對象為文本框、密碼框、文本域、Select下拉框、按鈕等，有了這些示例，美化其它的表單元素應(yīng)該不是大問題。2012-07-07
這篇文章主要介紹了一個有意思的鼠標點擊文字特效jquery代碼,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了jQuery中die()方法用法,實例分析了die()方法的功能、定義及移除所有通過live()方法向指定元素添加的一個或多個事件處理程序的使用技巧,需要的朋友可以參考下2015-01-01
用一個絕對定位的div作為動畫滑塊,改變它的left屬性來呈現(xiàn)動畫效果javascript：hover()觸發(fā)移動鼠標到導航nav的動作，和移出導航nav的動作2013-05-05
jQuery實現(xiàn)點擊DIV同時點擊CheckBox,并為DIV上背景色的實例
下面小編就為大家分享一篇jQuery實現(xiàn)點擊DIV同時點擊CheckBox,并為DIV上背景色的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
jQuery實現(xiàn)圖片輪播效果代碼(基于jquery.pack.js插件)
這篇文章主要介紹了jQuery實現(xiàn)圖片輪播效果的方法,該功能基于jquery.pack.js插件實現(xiàn),涉及jQuery針對頁面元素與樣式的動態(tài)操作技巧,需要的朋友可以參考下2016-06-06
多行文字圖片滾動效果的實現(xiàn)方法有很多，本例與大家分享的是jquery實現(xiàn)的具體步驟，很實用的2014-10-10