基于jquery打造的百分比动态色彩条插件


Posted in Javascript onSeptember 19, 2012

以前没写过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:回调函数(色彩条显示完后)
Javascript 相关文章推荐
关于javascript document.createDocumentFragment()
Apr 04 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
javascript几个易错点记录
Nov 26 Javascript
jQuery ajax应用总结
Jun 02 Javascript
原生js编写焦点图效果
Dec 08 Javascript
angular之ng-template模板加载
Nov 09 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
angular共享依赖的解决方案分享
Oct 15 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 #Javascript
基于JQuery的多标签实现代码
Sep 19 #Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 #Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 #Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 #Javascript
You might like
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
Python 文件重命名工具代码
2009/07/26 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
Win8下python3.5.1安装教程
2020/07/29 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
np.dot()函数的用法详解
2020/01/17 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
如何用Python绘制3D柱形图
2020/09/16 Python
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
历史学专业推荐信
2013/11/06 职场文书
委托书模板
2014/04/04 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
对照检查剖析材料
2014/09/30 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
React配置子路由的实现
2021/06/03 Javascript