jQuery Auto Height とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。
3カラムのデザインで高さを調整したいなんて言う場合も多いのではないでしょうか。
…
ホームページやブログの記事なんかにスター評価を表示させたい場合は、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で動的にレーティング表示させるのも簡単に実装出来ますね。
この投稿へのコメント