在开发过程中,有时候不得不自己写一些简单的jquery插件,下面给大家展示一下我自己写的一个jquer现实的百分比进度条
直接上图吧:
还是比较好看吧!
还支持进度条的单击事件,请执行demo查看
插件代码:
/**
* prcProgress
*
*
* Author wqj[975005563@qq.com]
*
*/
(function($){
var _prcData = {
percent:"100%",
categoryName:"",
categoryInnerText:""
};
var _prcProgress = function(ele,opt){
this.$element = ele,
this.defaults = {
borderSize:1,
borderColor:'#e7e7e7',
borderStyle:"solid",
width:200,
height:18,
categoryWidth:60,
data:_prcData,
prcBarDefClass:"orange",
prcBarBackColor:"",
onClick:null
},
this.options = $.fn.extend({},this.defaults,opt)
}
_prcProgress.prototype = {
_render:function(){
var g = this, p = this.options;
g.prcProg = $(g.$element);
var prcRenderHtmlArr = [];
prcRenderHtmlArr.push(' <span class="prcCategory"></span>');
prcRenderHtmlArr.push(' <div class="graph">');
prcRenderHtmlArr.push(' <span class="categoryText"></span>');
prcRenderHtmlArr.push(' <span class="prcBar"></span>');
prcRenderHtmlArr.push(' </div>');
var prcRenderHtml = prcRenderHtmlArr.join('');
//给元素添加样式
g.prcProg.addClass("prcWarp");
//添加元素到页面
g.prcProg.html(prcRenderHtml);
g.prcProg.prcCategory = $(".prcCategory:first",g.prcProg);
g.prcProg.graph = $(".graph:first",g.prcProg);
g.prcProg.categoryText = $(".categoryText:first",g.prcProg);
g.prcProg.prcBar = $(".prcBar:first",g.prcProg);
},_init:function(){
this._render();
var g = this, p = this.options;
var prcData = p.data;
var prcWrapWidth = 0;
var prcWrapHeight = 0;
var borWdith = 0 ;
var graphWidth = 0;
var graphHeight = 0;
var cateWidth = 0;
//百分比条设置边框样式
g.prcProg.graph.css({"border-width ":p.borderSize,"border-style":p.borderStyle,"border-color ":p.borderColor});
if(p.borderStyle != "none"){
if(typeof p.borderSize == "number"){
borWidth = 2 * p.borderSize;
}else{
borWidth = 2 * parseInt(p.borderSize);
}
}
if(typeof p.width == "number"){
graphWidth = p.width;
}else{
graphWidth = parseFloat(p.width);
}
if(typeof p.categoryWidth == "number"){
cateWidth = p.categoryWidth;
}else{
cateWidth = parseFloat(categoryWidth);
}
if(typeof p.height == "number"){
graphHeight = p.height;
}else{
graphHeight = parseFloat(p.height);
}
g.prcProg.graph.height(graphHeight);
g.prcProg.prcCategory.width(cateWidth);
g.prcProg.graph.width(graphWidth);
//IE不加2会变形
prcWrapWidth = borWidth + g.prcProg.graph.outerWidth(true) + g.prcProg.prcCategory.outerWidth(true) + 2 ;
prcWrapHeight = borWidth + g.prcProg.graph.outerHeight(true) ;
g.prcProg.height(prcWrapHeight);
g.prcProg.width(prcWrapWidth);
//设置百分比条的背景
if(p.prcBarBackColor){
g.prcProg.prcBar.css("background",p.prcBarBackColor);
}else{
g.prcProg.prcBar.addClass(p.prcBarDefClass);
}
this._setData(prcData);
g.prcProg.graph.click(function(){
//如果有绑定的单击事件
if(p.onClick){
g.prcProg.graph.css("cursor","pointer");
//将传入的data传参给单击回调函数
p.onClick.call(p.onClick,prcData);
}
});
},_setData:function(prcData){
var g = this, p = this.options;
if(!prcData)return;
var percent = 0.0;
if(typeof prcData.percent == "string"){
var percentStr = prcData.percent ;
if(percentStr.indexOf("%") != -1){
percentStr = percentStr.substring(0,percentStr.lastIndexOf("%"));
percent = (percentStr * 1) / 100;
}else{
//转换字符串为数字类型
percent = percentStr * 1;
}
}else if(typeof prcData.percent == "number"){
percent = prcData.percent;
}
if(typeof percent == "number" && !isNaN(percent)){
if(percent >= 1){
percent = 1;
}
if(percent <= 0 ){
percent = 0;
}
//设置百分比条的宽度
g.prcProg.prcBar.width(g.prcProg.graph.width() * percent);
}
var cInnerText = g.parseNumPercent(percent)+"%";
if(prcData.categoryInnerText){
cInnerText = prcData.categoryInnerText + ":" + cInnerText;
}
g.prcProg.categoryText.text(cInnerText);
var categoryStr = "";
if(prcData.categoryName){
categoryStr = prcData.categoryName + ":";
}
g.prcProg.prcCategory.text(categoryStr);
},percentNum:function(num, num2) {
return (Math.round(num / num2 * 10000) / 100.00); //小数点后两位百分比
//转换小数位包含两位小数的数字
},parseNumPercent:function(num){
return(Math.round(num * 10000) / 100.00);
}
}
$.fn.prcProgress = function(options){
var prcProg = new _prcProgress(this,options);
prcProg._init();
}
})(jQuery);
将插件代码复制粘贴到prcProgress.js文件
css代码:
/**百分比进度条样式**/
body {
color: #3C3C3C;
}
body, button, input, select, textarea {
font: 12px/1.5 tahoma,arial,"Hiragino Sans GB",宋体,sans-serif;
}
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
margin: 0px;
padding: 0px;
}
ol, ul {
list-style: outside none none;
}
a{color:#3C3C3C;}
a {
text-decoration: none;
}
fieldset, img {
border: 0px none;
}
.prcWarp{
font:12px/1.5 tahoma,arial,"Hiragino Sans GB",宋体,sans-serif;
margin-top:5px;
margin-bottom:5px;
overflow:hidden;
}
.graph{
border:1px solid #7e7e7e;
overflow:hidden;
width:400px;
height:18px;
display:block;
position:relative;
}
.prcCategory{
height:20px;
line-height:20px;
overflow:hidden;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
display:block;
float:left;
width:60px;
text-align:right;
padding:0px 5px;
}
.prcBar{
text-indent:-999em;
display:block;
height:100%;
}
.categoryText{
position:absolute;
height:18px;
line-height:18px;
overflow:hidden;
display:block;
top:50%;
margin-top:-9px;
border
}
.graph .orange{background-color:#ff6600;}
.graph .green{background-color:#66CC33;}
.graph .blue{background-color:#3399CC;}
.graph .red{background-color:red;}
.graph .black{background-color:#555;}
将css代码复制粘贴到prcProgress-default.css文件
html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="../css/prcProgress-default.css" rel="stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../js/prcProgress.js"></script>
<script type="text/javascript">
$(function(){
$("#test").prcProgress({data:{"categoryName":"编制状态","percent":0.34,"categoryInnerText":"发放冻结"},onClick:function(a){
alert(a.categoryName);
}});
//可取data对象的任意属性
$("#test2").prcProgress({data:{"percent":"15.3242%",categoryName:"橙色",categoryInnerText:"橙色",aaa:"哈哈哈哈"},prcBarBackColor:"#3399CC",onClick:function(a){
alert(a.aaa);
}});
$("#test3").prcProgress({data:{"percent":"0.234",categoryName:"橙色",categoryInnerText:"橙色"},prcBarBackColor:"#3399CC",onClick:function(a){
alert(a.categoryName);
}});
$("#test4").prcProgress({data:{"percent":0.612,categoryName:"橙色",categoryInnerText:"橙色"},prcBarBackColor:"#3399CC",onClick:function(a){
alert(a.categoryName);
}});
$("#test5").prcProgress({data:{"percent":0.22,categoryName:"橙色",categoryInnerText:"橙色"},prcBarDefClass:"red",onClick:function(a){
alert(a.categoryName);
}});
$("#test6").prcProgress({data:{"percent":0.22,categoryName:"橙色",categoryInnerText:"橙色"},prcBarDefClass:"green",onClick:function(a){
alert(a.categoryName);
}});
$("#test7").prcProgress({data:{"percent":0.6532,categoryName:"橙色",categoryInnerText:"橙色"},prcBarDefClass:"black",onClick:function(a){
alert(a.categoryName);
}});
});
</script>
</head>
<body>
<div id="test"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5"></div>
<div id="test6"></div>
</body>
</html>
代码完整示例可以参考jquery百分比进度条demo