jquery实现百分比进度条

最新推荐文章于 2024-08-09 02:16:38 发布

置顶 wqj975005563

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量9.6k

点赞数

分类专栏： javascript前端 jquery插件文章标签： js jquery插件 html 百分比进度条

本文链接：https://blog.csdn.net/wqj975005563/article/details/46120915

版权

javascript前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

jquery插件

2 篇文章 0 订阅

订阅专栏

在开发过程中，有时候不得不自己写一些简单的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