JQuery-based voting system display result plug-in

First, let's take a look at the running effect 1.Steps for using this plug-in
1. Introduce css files
The first page introduces the csssample file 'votecss.css ', which is essential for normal display of voting results. The Code is as follows:
<Link href = "startpic/votecss.css" rel = "stylesheet" type = "text/css"/>
Ii. Introduce jQuery as the source file
This plug-in is based on jQuery. Therefore, the specific code required to introduce the jQuery plug-in is as follows:
<Script type = "text/javascript" src = "startpic/jquery. js"> </script>
Iii. Introduce voting plug-ins
Introduce 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 result. The specific code is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Z "). study_vote ([{"options": "", "data": "16", "color": "# 39c" },{ "name": "medium rating ", "data": "10", "color": "# f00" },{ "name": "negative comment", "data": "30", "color ": "#000"}]);
});
</Script>

The effect of running the code in this section is shown in Figure 1.
Note: This plug-in has two parameters.
1. The options plug-in is required. The specific format of the object data is as follows.
[{},{}... {}] The number of the array is the number of voting options. If there are ten voting options, this array must be 10; among them, {} is json data, there are three items.
"Name" indicates the name of the voting option;
"Data" indicates the number of votes for this option;
"Color" indicates the color of the selected column.
2. Optional totle parameters, which can be omitted without writing. Indicates the total number of votes, which is used to calculate the percentage of votes selected for multiple votes.

Code of this plug-in
Copy codeThe 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 class =" fl ">' + studyplay_present + '% </div> </dd> ';
}
Container.find('{studyvote'}.html (study_votestr)
}

Plugin download
Demo address http://demo.jb51.net/js/2011/studyplayvote/index.html
The file is:
Studyplayvote.rar
I hope a friend can download and use it. If you have any questions, thank you for your feedback.