jQuery plugin評価投票(レーティング)
- jQuery Ajax Rater Plugin〔カスタマイズ性に富んだスターレーティング〕
- Progressive Enhancement: jQuery Rating〔jQueryを使用してシンプルなスターレーティングを作成する方法〕
- Sexy Vote jQuery plugin〔ツールチップ付きのスターレーティング〕
jQuery Ajax Rater Plugin
カスタマイズ性に富んだスターレーティング
2009/3/23
jQuery Ajax Rater Plugin
[JS]jquery.js、jquery.rater.js
[PHP]ratingsdemo.php
[PHP]ratingsdemo.php
星をクリックすると評価できるスターレイティングを簡単に作成できるjQueryプラグイン。
クリックした値は、PHPで取得して表示しています。
ratingsdemo.php
phpnow coding ...
/content/lib/jquery/jquery_rater/ratingsdemo.php
星部分は、1つ分の星の背景画像を横方向へ繰り返し表示しています。 いくつかのオプションが用意されており、簡単に星のレイアウトや動作を変更することができます。
Gmail風にシングルの星をON/OFFしたい場合は、下記のように星の数を1つだけにすればOK。$('#demo4').rater('ratingsdemo.php', {maxvalue:1, style: 'basic'});
オプション | 説明 |
---|---|
maxvalue | 評価の段階数(星の数)を数値で指定。デフォルトは5。 |
style | 星のスタイルを指定。デフォルトは「basic」(通常サイズの星)。小さな星にするには「small」、星部分をインライン表示するには「inline」を指定します。 |
curvalue | 評価の初期値を数値で指定。デフォルトは0。 |

jQuery Ajax Rater Pluginの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>jQuery Ajax Rater Plugin | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/jquery_rater/jquery.rater.js"></script> <script type="text/javascript"> $(function(){ /* 例1 */ $('#demo1').rater('/content/lib/jquery/jquery_rater/ratingsdemo.php'); /* 例2 */ $('#demo2').rater('/content/lib/jquery/jquery_rater/ratingsdemo.php', {style: 'small'}); /* 例3 */ $('#inline1').rater('/content/lib/jquery/jquery_rater/ratingsdemo.php', {style: 'inline'}); $('#inline2').rater('/content/lib/jquery/jquery_rater/ratingsdemo.php', {style: 'inline', curvalue:3}); /* 例4 */ $('#demo4').rater('/content/lib/jquery/jquery_rater/ratingsdemo.php', {maxvalue:1, style: 'basic'}); /* 例5 */ $('#demo5').rater('/content/lib/jquery/jquery_rater/ratingsdemo.php', {style: 'basic', curvalue:2}); /* 例6 */ $('#demo6').rater('/content/lib/jquery/jquery_rater/ratingsdemo.php', {maxvalue:10, style: 'basic', curvalue:0}); /* 例7 */ $('#demo7').rater('/content/lib/jquery/jquery_rater/ratingsdemo.php', {maxvalue:20, style: 'small', curvalue:3}); }); </script> <!-- CSS --> <link rel="stylesheet" type="text/css" href="/content/lib/jquery/jquery_rater/rater.css" /> </head> <body> <div id="wrap"> <h1><a href='http://www.m3nt0r.de/devel/raterDemo/'>jQuery Ajax Rater Plugin</a> | 設置サンプル</h1> <!-- CODE --> <h2>例1:基本</h2> <div id="demo1" class="demo"></div> <pre>$('#demo1').rater('ratingsdemo.php');</pre> <h2>例2:コンパクト表示</h2> <div id="demo2" class="demo"></div> <pre>$('#demo2').rater('ratingsdemo.php', {style: 'small'});</pre> <h2>例3:インライン表示</h2> <div id="demo3" class="demo"><span id="inline1"></span> <b>and</b> <span id="inline2"></span></div> <pre>$('#inline1').rater('ratingsdemo.php', {style: 'inline'}); $('#inline2').rater('ratingsdemo.php', {style: 'inline', curvalue:3});</pre> <h3>例4:Gmail風</h3> <div id="demo4" class="demo"></div> <pre>$('#demo4').rater('ratingsdemo.php', {maxvalue:1, style: 'basic'});</pre> <h2>例5:基本(初期値を指定)</h2> <div id="demo5" class="demo"></div> <pre>$('#demo5').rater('ratingsdemo.php', {style: 'basic', curvalue:2});</pre> <h2>例6:基本(星の数を指定)</h2> <div id="demo6" class="demo"></div> <pre>$('#demo6').rater('ratingsdemo.php', {maxvalue:10, style: 'basic', curvalue:0});</pre> <h2>例7:コンパクト表示(星の数を指定)</h2> <div id="demo7" class="demo"></div> <pre>$('#demo7').rater('ratingsdemo.php', {maxvalue:20, style: 'small', curvalue:3});</pre> <!-- / CODE --> </div> </body> </html>
Sexy Vote jQuery plugin
ツールチップ付きのスターレーティング
2009/3/23
Sexy Vote jQuery plugin
jquery.js、jquery.sexy-vote.js
メッセージ付きのスターレーティングを作成できるjQueryプラグイン。
星にマウスオーバーすると右側に評価メッセージが表示されます。 星をクリックして投票すると、投票完了メッセージが表示されます。 連続投稿できないよう、一度投稿するとリロードするまでクリックないようになっています。

Sexy Vote jQuery pluginの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>Progressive Enhancement: jQuery Rating | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/jquery.sexy-vote.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#rating").sexyVote(); }); </script> <!-- CSS --> <style type="text/css"> #rating img { vertical-align:middle; } #rating span { margin-left:10px; } </style> </head> <body> <div id="wrap"> <h1><a href='http://phone.witamean.net/sexy-vote/'>Sexy Vote jQuery plugin</a> | 設置サンプル</h1> <p>▼星にマウスオーバーすると右側にツールチップが表示されます。星をクリックすると、投票完了メッセージが表示されます。</p> <!-- CODE --> <div id="rating"></div> <!-- / CODE --> </div> </body> </html>