Voting system display results plug-in based on jQuery_jquery

First, let’s take a look at the running effect, as shown in Figure 1.

Steps to use this plug-in
1. Import the css file
First, import the css style file 'votecss.css' into the page, which is necessary for the normal display of voting results. Less. The specific code is as follows:
<link href="startpic/votecss.css" rel="stylesheet" type="text/css" />
2. The source file that introduces jQuery is the source file
The plug-in is based on jQuery, so the specific code required to introduce the jQuery plug-in is as follows:
<script type="text/javascript" src="startpic/jquery.js"></script>
3. Introducing the voting plug-in
Introducing the self-developed voting plug-in "Studyplay_vote.js", the specific code is as follows:
<script src="startpic/Studyplay_vote.js"></script>
4. Page call
First add a div element with ID 'z' to the page and write JavaScript code to display the voting results. The specific code is as follows:

Copy Code The code is as follows:

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

The effect of running this code is shown in Figure 1.
Note: This plug-in has two parameters
1. Options is a required plug-in. It is an object data. The specific form is as follows.
[{},{}...{}]The number of this array is the number of voting options. If there are ten voting options, this array must be 10; {} is json data, there are three items in total .
"name" represents the name of the voting option;
"data" represents the number of votes for this option;
"color" represents the column color of this option.
2. The totle optional parameter can be omitted. Indicates the total number of votes cast, mainly used for calculating percentages for multiple choice votes.

The specific code of the plug-in

Copy the code The code is as follows:

$. fn.study_vote= function(options,totle){
var settings=options;
if(totle!=null)
{
if(isNaN(totle))
{
alert('Parameter error');
return;
}
}
if(typeof(settings)!='object')
{
alert('Parameter error') ;
return;
}
var container = jQuery(this);
container.html('<dl id="studyvote"></dl>');
var study_voteCount=0;
if(totle==null||totle=='')
{//Single vote
for(i=0;i<settings.length;i )
{
study_voteCount = parseInt(settings[i].data);
}
}
else
{//Multiple votes
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)
}

Plug-in download
Demo addresshttp://demo.jb51 .net/js/2011/studyplayvote/index.html
The download address of this file is:
studyplayvote.rar
I hope friends can download and use it. If you have any questions, thank you for your feedback.