読者です 読者をやめる 読者になる 読者になる

修行@ホーチミン

ホーチミン長期出張の日記です

Bootstrap Star Rating 使ってみる

前書き

Ratingをもともと、1刻みで登録できるようにしていたのですが

0.5刻みで表示や登録・更新ができるようにしたほうがいいと指摘を受けまして

Select Box で「0~5」の11個を選ぶようにしてもよかったんですが、

どうせなら便利なプラグインを使って、見た目いい感じにしてみようと思い

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

必要なもの

https://github.com/kartik-v/bootstrap-star-rating/zipball/master

上記からダウンロードができる下記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をローカルで使うときは、ディレクトリごと使えば思わぬ不具合に遭遇せずに済みそうです。

 

from 修正

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

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

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

Bootstrap Star Rating - © Kartik

 

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したい値')のような方法で、値を更新できるそうです。

 

見た目

f:id:bebe0909:20161006181211p:plain

 

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