The voting system is a very common system on websites, and display results are also very common. Recently, a vote result display jquery plug-in was developed for the project. First, let's take a look at the running effect 1.
Steps for using this plug-in1. Introduce CSS file 'votecss.css 'on the first page, which is essential for normal display of voting results. The Code is as follows: <link href = "startpic/votecss.css" rel = "stylesheet" type = "text/CSS"/> 2. Introduce jquery as the source file. This plug-in is based on jquery. the specific code required by the plug-in is as follows: <SCRIPT type = "text/JavaScript" src = "startpic/jquery. JS "> </SCRIPT> 3. Introduce the voting plug-in to introduce the self-developed voting plug-in" studyplay_vote.js ". The specific code is as follows: <SCRIPT src = "startpic/studyplay_vote.js"> </SCRIPT> 4. To call a page, add a div element with the ID of 'Z' to the page, the code for compiling JavaScript code to display the voting result 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> shows the effect of code execution in this section. Note: This plug-in has two parameters. Options is required. The plug-in is an object data in the following format. [{},{}... {}] 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$. 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
The file is:
/Files/studyplay/studyplayvote.rar
I hope a friend can download and use it. If you have any questions, thank you for your feedback.
Others:
From: http://www.cnblogs.com/jyshi/
The voting system is a very common system on websites, and display results are also very common. Recently, a vote result display jquery plug-in was developed for the project. First, let's take a look at the running effect 1.
Steps for using this plug-in1. Introduce CSS file 'votecss.css 'on the first page, which is essential for normal display of voting results. The Code is as follows: <link href = "startpic/votecss.css" rel = "stylesheet" type = "text/CSS"/> 2. Introduce jquery as the source file. This plug-in is based on jquery. the specific code required by the plug-in is as follows: <SCRIPT type = "text/JavaScript" src = "startpic/jquery. JS "> </SCRIPT> 3. Introduce the voting plug-in to introduce the self-developed voting plug-in" studyplay_vote.js ". The specific code is as follows: <SCRIPT src = "startpic/studyplay_vote.js"> </SCRIPT> 4. To call a page, add a div element with the ID of 'Z' to the page, the code for compiling JavaScript code to display the voting result 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> shows the effect of code execution in this section. Note: This plug-in has two parameters. Options is required. The plug-in is an object data in the following format. [{},{}... {}] 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$. 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
The file is:
/Files/studyplay/studyplayvote.rar
I hope a friend can download and use it. If you have any questions, thank you for your feedback.
