jQuery_jquery를 기반으로 한 투표 시스템 표시 결과 플러그인

먼저 그림 1과 같이 실행 효과를 살펴보겠습니다.

플러그인 사용 방법
1. CSS 파일 가져오기
먼저 CSS 스타일 파일 'votecss.css'를 페이지로 가져옵니다. 이는 투표 결과를 정상적으로 표시하는 데 필요합니다. 구체적인 코드는 다음과 같습니다.

2. 소스 파일
플러그인은 jQuery를 기반으로 하므로 jQuery 플러그인을 도입하기 위해 필요한 구체적인 코드는 다음과 같습니다.

3. 투표 플러그인 소개
자체 개발한 투표 플러그인 'Studyplay_vote.js'를 소개하며, 구체적인 코드는 다음과 같습니다.
< script src="startpic/Studyplay_vote.js">
4. 페이지 호출
먼저 페이지에 ID가 'z'인 div 요소를 추가하고 투표 결과를 표시하는 JavaScript 코드를 작성합니다. 구체적인 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

< 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"}]);
});

이 코드를 실행한 결과는 그림 1에 나와 있습니다.
참고: 이 플러그인에는 두 개의 매개변수가 있습니다
1. 옵션은 필수 플러그인입니다. 구체적인 형식은 다음과 같습니다.
[{},{}...{}]이 배열의 수는 투표 옵션의 수입니다. 투표 옵션이 10개인 경우 이 배열은 10이어야 합니다. {}는 json 데이터이며 항목이 3개 있습니다. 총 .
"name"은 투표 옵션의 이름을 나타냅니다.
"data"는 이 옵션의 투표 수를 나타냅니다.
"color"는 이 옵션의 열 색상을 나타냅니다.
2. 전체 선택적 매개변수는 생략 가능합니다. 주로 객관식 투표에 대한 백분율을 계산하는 데 사용되는 총 투표 수를 나타냅니다.

플러그인의 구체적인 코드

코드 복사 코드는 다음과 같습니다

$.fn.study_vote= function(options,totle){
var settings=options;
if(totle!=null)
{
if(isNaN(totle) )
{
경고('매개변수 오류');
return;
}
}
if(typeof(settings)!='object')
{
alert('매개변수 오류') ;
return;
}
var 컨테이너 = jQuery(this)
container.html('

/ dl>');
var Study_voteCount=0;
if(totle==null||totle=='')
{//단일 투표
for(i=0;i {
study_voteCount =parseInt(settings[i].data);
}
}
else
{//다중 투표
study_voteCount =parseInt (전체);
}
var Study_votestr="";
for(i=0;i{
var Studyplay_present=settings[i].data /study_voteCount*100;
if(parseInt(studyplay_present)!=studyplay_present)
{
studyplay_present=studyplay_present.toFixed(2)
}
study_votestr ='

' 설정[i].name '：

' Studyplay_present '%

< ;/dd>';
}
container.find('#studyvote').html(study_votestr)
}

플러그인 다운로드
데모 주소http://demo.jb51 .net/js/2011/studyplayvote/index.html
이 파일의 다운로드 주소는
studyplayvote.rar
입니다. 친구들이 다운로드하여 사용할 수 있기를 바랍니다. 궁금한 점이 있으면 의견을 보내주셔서 감사합니다.