ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery_jqueryをベースにした投票システム結果表示プラグイン

jQuery_jqueryをベースにした投票システム結果表示プラグイン

WBOY
WBOYオリジナル
2016-05-16 18:03:311384ブラウズ

まず、図 1 に示すランニング効果を見てみましょう。

このプラグインを使用する手順
1. CSS ファイルをインポートします
まず、CSS スタイル ファイル 'votecss.css' をページにインポートします。投票結果の通常の表示に必要なものは少なくなります。具体的なコードは次のとおりです。
2. jQuery を導入するソース ファイルは次のとおりです。ソース ファイル
プラグインは 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","カラー":"#39c"},{"名前":"中間レビュー","データ":"10","カラー":"#f00"},{"名前":"悪いレビュー","データ":"30","カラー":"#000"}]);
});



このコードを実行した結果を図 1 に示します。
注: このプラグインには 2 つのパラメータがあります
1. オプションは必須のプラグインです。具体的な形式は次のとおりです。
[{},{}...{}]この配列の数は投票オプションの数です。投票オプションが 10 個ある場合、この配列は 10 でなければなりません。項目は 3 つあります。合計で。
"name" は投票オプションの名前を表し、
"data" はこのオプションの投票数を表します。
"color" はこのオプションの列の色を表します。
2. オプションのパラメータはすべて省略できます。投じられた投票の合計数を示します。主に多肢選択投票のパーセンテージを計算するために使用されます。

プラグインの特定のコード


コードをコピーします コードは次のとおりです:
$.fn.study_vote= function(options,totle){
var settings=options;
if(totle!=null)
{
if(isNaN(totle) )
{
alert('パラメータエラー');
return
}
}
if(typeof(settings)!='object')
{
alert('パラメータエラー') ;
return;
var context(this);
dl>');
varstudy_voteCount=0;
if(totle==null||totle=='')
{//1 回の投票
(i=0;i {
study_voteCount = parseInt(settings[i].data);
}
}
else
{//複数の投票
study_voteCount = parseInt (合計);
}
varstudy_votestr="";
for(i=0;i{
varstudyplay_present=settings[i].data /study_voteCount*100;
if(parseInt(studyplay_present)!=studyplay_present)
{
studyplay_present=studyplay_present.toFixed(2)
study_votestr ='
' settings[i].name ':
' ;/dd>';
}
container.find('#studyvote').html(study_votestr)
}


プラグインのダウンロード
デモ アドレス
http://demo.jb51 .net/js/2011/studyplayvote/index.html
このファイルのダウンロード アドレスは次のとおりです:

studyplayvote.rar ご友人がダウンロードして使用していただければ幸いです。ご不明な点がございましたら、フィードバックをよろしくお願いいたします。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。