🕌
jQuery Raty.js とは
jQuery Raty.js とは
jQuery Raty.js は、星型評価のアイコン表示・入力ができる jQueryプラグインです。
使い方
1️⃣ githubよりダウンロード
ディレクトリ直下で以下コマンドを実行。
$ git clone git@github.com:wbotelhos/raty.git
ratyディレクトリが新規作成される。
ratyディレクトリ内の画像を app/assets/imagesに移動させる。
ratyディレクトリ内の raty.jsをコピーし、
app/javascriptに移動させる。
app/javascript/packs/application.jsに以下のコードを追記する。
app/javascript/packs/application.js
import Raty from "raty.js"
window.raty = function(elem,opt) {
let raty = new Raty(elem,opt)
raty.init();
return raty;
}
2️⃣ Ratyを使いたいHTML中に JavaScript, jQueryを読み込む
example.html
<script src="jquery.min.js"></script>
<script src="jquery.raty.js"></script>
3️⃣ 構文コードを記述する
上記の例では、 jquery.raty.js にRatyの構文コードを記述する。
4️⃣ もしくは、HTMLに直接構文コードを記述する
HTMLに直接構文コードを記述する場合は、2️⃣ の手順は不要です。
以下のように記述します。
example.html
<div id="post_raty"></div>
<script>
// scriptファイルをどのidの部分に配置するかを指定
let elem = document.querySelector('#post_raty');
let opt = {
//星画像の指定などのオプションをここに記述,
};
raty(elem,opt);
</script>
構文
Ratyの構文について解説します。
こちらのチュートリアルを参考にしています。
<div>要素の設置
Ratyを利用する直前に、<div>要素を置く必要があります。
この部分に星の画像が表示されます。
example.html
<div></div>
<script>
new Raty(document.querySelector('div'));
</script>
<script>はHTML中に JavaScriptコードを記述する際に使用します。
上記コードの後にオプションをつけて、細かい設定を変更していきます。
Score オプション
評価を表す Score の値を指定します。
example.html
<div></div>
<script>
new Raty(document.querySelector('div'), { score: 3 });
</script>
ScoreName オプション
パラメーターの名前を変更します。
example.html
<div></div>
<script>
new Raty(document.querySelector('div'), { scoreName: 'entity[score]' });
</script>
ReadOnly オプション
example.html
<div></div>
<script>
new Raty(document.querySelector('div'), { readOnly: true });
</script>
StarOn/Off/Half オプション
星の画像イメージを指定します。ディレクトリが別の場合は、明示的に記載します。
example.html
<div></div>
<script>
new Raty(document.querySelector('div'), {
starOn: 'star-on.png',
starOff: 'star-off.png',
starHalf: 'star-half.png' ,
});
</script>
参照
Discussion