prettypopinというプラグインを使えば、簡単にモーダルウインドウを表示させることが出きます。
…
ホームページやブログの記事なんかにスター評価を表示させたい場合は、jQuery Ratyで簡単に設定出来ます。
jQuery Raty – A Star Rating Plugin
目次
ダウンロード
まずは、必要なファイルを以下からダウンロードします。ダウンロードしたファイルを解凍して、jquery.raty.min.jsとimgフォルダ(星の画像)を任意の場所にアップロードします。
Raty on Github
ヘッダーでjsファイルの読み込み設定
jQueryファイルとratyのjsファイルをヘッダーで読み込みます。
jQuery読み込み<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>Raty読み込み
<script type="text/javascript" src="/js/jquery.raty.min.js"></script>Ratyの設定
この場合は、Ratyを設置した箇所にスコア3なので、星が3つだけ色づいたレーティングが表示されます。
<script type="text/javascript"> $('#star').raty({ score: 3 }); </script>
表示したい場所にコードを設置
以下のコードをレーティングを設置したい場所に記述します。<div id="star"></div>
複数レーティング、動的表示
ページ内に複数のレーティング表示をしたい場合や、PHPなどで動的に表示させたい場合は、スコアをHTML側で設定するようにしてやれば簡単です。
read only、サーバ上の画像のパスは任意、スコアを動的に設定する場合<script type="text/javascript"> $(function() { $('#star').raty( { readOnly: true, //閲覧者によるスコアの変更不可 score: function() { return $(this).attr('data-score'); }, path: 'http://your-server.com/img/' //サーバ上のRaty画像のパス }); }); </script>
表示させたい場所に設置
<div id="star" data-score="<?php echo $score1 ;?>"></div> <div id="star" data-score="<?php echo $score2 ;?>"></div> <div id="star" data-score="<?php echo $score3 ;?>"></div>
コード内にも説明がありますが、readOnlyをtrueにすると閲覧モード(投票機能なし)、scoreの設定は、HTML側のdata-scoreの値($score1,$score2,$score3)でレーティングスコアの設定、pathの項目で星画像のパス設定、といった感じです。これなら、PHPで動的にレーティング表示させるのも簡単に実装出来ますね。
この投稿へのコメント