基于jquery打造的百分比动态色彩条插件
2012-09-19 00:00
525 查看
以前没写过jquery插件,在开发这个时,写一下代码,又看一下jquery插件的定义(如何开发之类的东东),来来去去的。
之所以要写这个插件,主要是为了往后的项目中方便实现这类型的功能,在之前做问卷调查那个应用中,就用到这个来显示结果,但当时开发时并不用是插件的,一大堆代码,看也烦,用起来很麻烦(当时就调了一个上午)。
还好,这个功能比较简单,正好合适新手写插件。
具体的效果如图:
这个也算是简单的比例图吧。
插件的具体的代码如下:
本来想把css独立出来的,但最后还是直接出到jquery插件里了,这样使用起来更加方便的说。
例:
方法参数说明:
percent:比例数组(占的比例),如:[0.5,0.4,0.6] 长度大于1时,按顺序发配比例
bar_bgcolor:色彩条的背景颜色
bar_bordercolor:色彩条的边框颜色
bar_borderwidth:色彩条的边框宽度
width:色彩条的宽度
height:色彩条的高度
callback:回调函数(色彩条显示完后)
之所以要写这个插件,主要是为了往后的项目中方便实现这类型的功能,在之前做问卷调查那个应用中,就用到这个来显示结果,但当时开发时并不用是插件的,一大堆代码,看也烦,用起来很麻烦(当时就调了一个上午)。
还好,这个功能比较简单,正好合适新手写插件。
具体的效果如图:
这个也算是简单的比例图吧。
插件的具体的代码如下:
; (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打造的百分比动态色彩条插件
- (jquery插件)打造百分比动态色彩条
- 基于jquery的动态创建表格的插件
- 基于jQuery的动态表格插件
- 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
- 基于jQuery的动态表格插件
- 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
- 介绍一款基于favicon的JQuery动态通知插件 Tinycon.js
- 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
- jQuery基于Canvas的微信运动折线图动态曲线图插件 - wcMotionChart
- 灰常好用的基于html5的上传jquery插件
- 基于JQuery的cookie插件
- 一个基于jQuery+CSS打造的多级菜单,动感效果
- 基于JQuery的动态删除Table表格的行和列的代码
- JavaScript操作SVG画图库:基于jquery的插件jquery.svgmagic.js
- PgwSlideshow-基于Jquery的图片轮播插件
- jquery.zSlide.js-基于CSS3/HTML5演示文档jQuery插件
- 基于jQuery动态创建html元素
- 使用jquery插件coin-slider轻松打造幻灯片教程
- 30款基于 jQuery & CSS3 的加载动画和进度条插件