Jquery中文網 www.twdanq.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 基于jquery打造的百分比動態色彩條插件

基于jquery打造的百分比動態色彩條插件

發布時間:2013-09-25   編輯:www.twdanq.live
主要是為了往后的項目中方便實現這類型的功能,在之前做問卷調查那個應用中,就用到這個來顯示結果,但當時開發時并不用是插件的,一大堆代碼,看也煩,用起來很麻煩
以前沒寫過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:回調函數(色彩條顯示完后)

您可能感興趣的文章:
基于jquery打造的百分比動態色彩條插件
6款新穎的jQuery和CSS3進度條插件推薦
基于jquery的多彩百分比 動態進度條 投票效果顯示效果實現代碼
分享8款優秀的 jQuery 加載動畫和進度條插件
基于jQuery實現模擬頁面加載進度條
2010年最佳jQuery插件整理
javascript 歷史記錄 經常用于產品最近歷史瀏覽第1/2頁
JQuery結合CSS操作打印樣式的方法
40個有創意的jQuery圖片、內容滑動及彈出插件收藏集之一
jQuery 插件開發 其實很簡單

關鍵詞: 百分比  動態色彩條   
[關閉]
广西快乐10分怎样开奖号码 那种会计赚钱最多 尚合彩票网址 可以上下分的麻将游戏 村村通可以赚钱吗 朋友圈广告推广怎么赚钱 好赚钱的小软件有哪些 华为彩票苹果 手机上怎样在蜀山源农场种树赚钱 开网店卖女内衣赚钱吗 王者捕鱼现金版 秦时明月 如何赚钱 合法吗赚钱吗 安卓千炮捕鱼破解版 钓鱼模拟世界怎么赚钱 在哪个城打工赚钱 彩票2元网苹果