基于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封装的一个AJAX函数分享
Oct 11 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
js实现磁性吸附的示例
Oct 26 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上传图片、删除图片实现代码
2010/05/12 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
js倒计时小程序
2013/11/05 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
汉语言文学毕业生求职信
2013/10/01 职场文书
学子宴答谢词
2014/01/25 职场文书
委托书样本
2014/04/02 职场文书
社团活动总结
2014/04/28 职场文书
红头文件任命书范本
2014/06/05 职场文书
文化产业实施方案
2014/06/07 职场文书
学生安全责任书模板
2014/07/25 职场文书
上班离岗检讨书
2014/09/10 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS