快捷導(dǎo)航

基于jQuery的投票系統(tǒng)顯示結(jié)果插件

更新時(shí)間：2011年08月12日 11:08:31 作者：

投票系統(tǒng)是網(wǎng)站中十分常見的系統(tǒng)，顯示結(jié)果也是十分常見的。最近因?yàn)轫?xiàng)目需要開發(fā)了一個(gè)投票結(jié)果顯示jQuery插件。

首先還是來看一下運(yùn)行效果如圖1所示。

該插件使用步驟
一、引入css文件
首先頁面引入css樣式文件‘votecss.css'，他是投票結(jié)果正常顯示必不可少的。具體代碼如下所示：
<link href="startpic/votecss.css" rel="stylesheet" type="text/css" />
二、引入jQuery的就是源文件
該插件是以jQuery為基礎(chǔ)的所以引入jQuery插件是必須的具體代碼如下：
<script type="text/javascript" src="startpic/jquery.js"></script>
三、引入投票插件
　　引入自己開發(fā)的投票插件“Studyplay_vote.js”，具體代碼如下所示：
<script src="startpic/Studyplay_vote.js"></script>
四、頁面調(diào)用
首先在頁面中添加一個(gè)ID為‘z'的div元素，編寫JavaScript代碼顯示投票結(jié)果具體代碼如下：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#z").study_vote([{"options":"好評","data":"16","color":"#39c"},{"name":"中評","data":"10","color":"#f00"},{"name":"差評","data":"30","color":"#000"}]); 
}); 
</script> 

該段代碼運(yùn)行的效果如圖一所示。
說明：該插件存在兩個(gè)參數(shù)
1、options 必填插件他是一個(gè)object數(shù)據(jù)具體形式如下所示。
[{},{}...{}]該數(shù)組的個(gè)數(shù)就是投票選項(xiàng)的個(gè)數(shù)，如果投票有十個(gè)選項(xiàng)這個(gè)數(shù)組必須為10個(gè)；其中｛｝為json數(shù)據(jù)，共有三項(xiàng)。
"name"表示投票選項(xiàng)的名稱；
"data"表示該選項(xiàng)投票數(shù)；
"color"表示該選項(xiàng)柱形顏色。
2、totle可選參數(shù)，可以省略不寫。表示投票的總數(shù)量，主要用于多項(xiàng)選擇投票計(jì)算百分比。

該插件具體代碼

復(fù)制代碼代碼如下:

 
$.fn.study_vote= function(options,totle){ 
var settings=options; 
if(totle!=null) 
{ 
if(isNaN(totle)) 
{ 
alert('參數(shù)錯(cuò)誤'); 
return; 
} 
} 
if(typeof(settings)!='object') 
{ 
alert('參數(shù)錯(cuò)誤'); 
return; 
} 
var container = jQuery(this); 
container.html('<dl id="studyvote"></dl>'); 
var study_voteCount=0; 
if(totle==null||totle=='') 
{//單項(xiàng)投票 
for(i=0;i<settings.length;i++) 
{ 
study_voteCount += parseInt(settings[i].data); 
} 
} 
else 
{//多項(xiàng)投票 
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) 
} 