读书人

投票展示百分比条形图

发布时间: 2012-11-12 12:31:57 作者: rapoo

投票显示百分比条形图

投票展示百分比条形图

完整工程下载地址:http://download.csdn.net/download/software0116/4661751

JS

$.fn.study_vote= function(options,totle){var settings=options;if(totle!=null){if(isNaN(totle)){alert('参数错误');return;}}if(typeof(settings)!='object'){alert('参数错误');return;}var container = jQuery(this);container.html('<dl id="studyvote"></dl>');var study_voteCount=0;if(totle==null||totle==''){//单项投票for(i=0;i<settings.length;i++){study_voteCount += parseInt(settings[i].data);}}else{//多项投票study_voteCount = parseInt(totle);}var study_votestr="";for(i=0;i<settings.length;i++){var studyplay_present=settings[i].data/study_voteCount*100;if(parseInt(studyplay_present)!=studyplay_present){studyplay_present=studyplay_present.toFixed(2);}study_votestr +='<dd class="dd"><div class="fl">'+settings[i].name+':</div><div class="outbar"><div class="inbar" style="width:'+studyplay_present+'%;background:'+settings[i].color+';"></div></div> <div class="fl">'+studyplay_present+'% </div></dd>';}container.find('#studyvote').html(study_votestr)}


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=utf-8" /><title></title></head><body><script type="text/javascript" src="jquery-1.4.4.min.js"></script><script type="text/javascript" src="Studyplay_vote.js"></script><script type="text/javascript">$(document).ready(function(){$("#progressbar").study_vote([{"name":"支持","data":"90","color":"#39c"},{"name":"反对","data":"50","color":"#f00"},{"name":"中立","data":"20","color":"#000"}]);});</script><style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}.demo{margin:23px auto;width:500px;}#studyvote .fl{float:left;}#studyvote .dd{clear:both;margin:7px 0;width:100%;height:20px;}#studyvote .outbar{border:1px solid #dedede;background:#fff;height:18px;width:80%;float:left;}#studyvote .inbar{height:18px;display:block;}</style><div class="demo"><div id="progressbar"></div></div></body></html>


读书人网 >Web前端

热点推荐