Bootstrap Star Rating 使ってみる

前書き

お試し検証用アプリでRating表示機能を設けており、もともと1刻みで登録できるようにしていたのですが、0.5刻みで表示できるようになプラグインを使って、見た目いい感じにしてみようと思い

Bootstrap Star Rating を試しに使ってみることにしました。

必要なもの

上記からダウンロードができる下記2ファイルと

• star-rating.css
• star-rating.js

bootstrap.min.css と　jquery.min.js　です

はまった点としてローカルに配置する場合

bootstrap.min.cssだけではだめでして、下記のようなツリー構造にしないと★が表示されません。

+ css
    - bootstrap.min.css
+ fonts
    - glyphicons-halflings-regular.woff2

無難にBootStrapをローカルで使うときは、ディレクトリごと使えば思わぬ不具合に遭遇せずに済みそうです。

form 修正

htmlの中で、ratingをつけたい箇所に下記のように追加

<input id="grade" name="grade"  class="rating rating-loading" data-min="0" data-max="5" data-step="0.5" data-size="xs">

色々なサンプルや使い方も下記の公式サイトに詳しく載ってます。

js 修正

更新時ダイアログを開く際に、既存のrating情報を持たせた状態で開けるようにしたかったのですが、

既存のデータ付与方法では、上手くいきませんでした。

var targetHotel = JSON.parse($('#'+ this.id).attr('data-hotel'));
$.each(targetHotel, function(i,v){
    $('#updateHotel').find('#'+i).val(v);
})

どうやら、val()を用いた変更はできないらしく

調べていたら方法を見つけたので、修正しました。

var targetHotel = JSON.parse($('#'+ this.id).attr('data-hotel'));
$.each(targetHotel, function(i,v){
    if (i == 'grade'){
        $('#updateHotel').find('#grade').rating('update', v);
    }else{
        $('#updateHotel').find('#'+i).val(v);
    }
})  

.rating('update', 'updateしたい値')のような方法で、値を更新できるそうです。

見た目

　

これで、既存ratingの表示と更新が可能になりました。