web-dev-qa-db-ja.com

DjangoでFont-awesomeの星評価を使用するには？

Fontawesome には、素晴らしい星評価のcss拡張機能があります。

ただし、スパン要素のいずれかをクリックしても、実際には何も実行されません。これをデータベースモデルに接続する方法がわかりません。 Djangoに0〜5の整数フィールドがあるとします。テンプレート内のユーザーの選択に従って値を設定するにはどうすればよいですか？

enter image description here

<span class="rating">
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</span>
djangotwitter-bootstrapfont-awesome
24
Houman

最終的に Raty を使用しました。シンプルでクリーンなソリューションを探しているなら、これが一番簡単だと思いました。

$('#star').raty('score');                   // Get the current score.
19
Houman

この投稿を見ましたが、必要以上にプラグインを使いたくありませんでした。それで、私はこれを私が取り組んでいる小さなプロジェクトのために一緒に投げました。 bootstrapを使用する必要はありません。

HTML

<div class="star-rating"> 
  <span class="fa fa-star-o" data-rating="1"></span>
  <span class="fa fa-star-o" data-rating="2"></span>
  <span class="fa fa-star-o" data-rating="3"></span>
  <span class="fa fa-star-o" data-rating="4"></span>
  <span class="fa fa-star-o" data-rating="5"></span>
  <input type="hidden" name="whatever" class="rating-value" value="3">
</div>

CSS

.star-rating {
  line-height:32px;
  font-size:1.25em;
  cursor: pointer;
}

CoffeeScript

$star_rating = $('.star-rating .fa')

SetRatingStar = ->
  $star_rating.each ->
    if parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))
      $(this).removeClass('fa-star-o').addClass('fa-star')
    else
      $(this).removeClass('fa-star').addClass('fa-star-o')

$star_rating.on 'click', ->
    $star_rating.siblings('input.rating-value').val $(this).data('rating')
    SetRatingStar()

SetRatingStar()

Javascript：

var $star_rating = $('.star-rating .fa');

var SetRatingStar = function() {
  return $star_rating.each(function() {
    if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
      return $(this).removeClass('fa-star-o').addClass('fa-star');
    } else {
      return $(this).removeClass('fa-star').addClass('fa-star-o');
    }
  });
};

$star_rating.on('click', function() {
  $star_rating.siblings('input.rating-value').val($(this).data('rating'));
  return SetRatingStar();
});

SetRatingStar();
16
TylerJPresley

ブートストラップを使用している場合、これは星評価に最適なプラグインです。

  • 2Kb縮小
  • Bootstrap Glyphiconsを使用
  • 余分なCSSはありません
  • 追加する必要があるのはclass="rating"入力へ

Githubプロジェクト

12
Tom Sarduy

bootstrap=グリフィコンとjqueryのみを使用した簡単な答えは見当たりませんでした。他の人がここに来てクイックコピーと貼り付けを探しているので、書きました。

$(function(){
    $('.rating-select .btn').on('mouseover', function(){
        $(this).removeClass('btn-default').addClass('btn-warning');
        $(this).prevAll().removeClass('btn-default').addClass('btn-warning');
        $(this).nextAll().removeClass('btn-warning').addClass('btn-default');
    });

    $('.rating-select').on('mouseleave', function(){
        active = $(this).parent().find('.selected');
        if(active.length) {
            active.removeClass('btn-default').addClass('btn-warning');
            active.prevAll().removeClass('btn-default').addClass('btn-warning');
            active.nextAll().removeClass('btn-warning').addClass('btn-default');
        } else {
            $(this).find('.btn').removeClass('btn-warning').addClass('btn-default');
        }
    });

    $('.rating-select .btn').click(function(){
        if($(this).hasClass('selected')) {
            $('.rating-select .selected').removeClass('selected');
        } else {
            $('.rating-select .selected').removeClass('selected');
            $(this).addClass('selected');
        }
    });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating-select">
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
</div>

Djangoテンプレートを使用してDBからデフォルト値を設定するには、各スターに対して以下を実行します。

<div class="btn btn-{% if rate.value > 0 %}warning{% else %}default{% endif %}{% if rate.value == 1 %} selected{% endif %} btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
8
dotcomly

もう1つの興味深い方法。純粋なCSS、選択された値を保持、ラジオボタン（クール！）およびFAフォントを使用

デモを参照

この投稿 から取得

HTML

<div class="star-rating">
  <div class="star-rating__wrap">
    <input class="star-rating__input" id="star-rating-5" type="radio" name="rating" value="5">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
    <input class="star-rating__input" id="star-rating-4" type="radio" name="rating" value="4">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
    <input class="star-rating__input" id="star-rating-3" type="radio" name="rating" value="3">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
    <input class="star-rating__input" id="star-rating-2" type="radio" name="rating" value="2">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
    <input class="star-rating__input" id="star-rating-1" type="radio" name="rating" value="1">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
  </div>
</div>

CSS

.star-rating{
    font-size: 0;
}
.star-rating__wrap{
    display: inline-block;
    font-size: 1rem;
}
.star-rating__wrap:after{
    content: "";
    display: table;
    clear: both;
}
.star-rating__ico{
    float: right;
    padding-left: 2px;
    cursor: pointer;
    color: #FFB300;
}
.star-rating__ico:last-child{
    padding-left: 0;
}
.star-rating__input{
    display: none;
}
.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before
{
    content: "\f005";
}
7
ymakux

Bootstrap JQuery Star rating plugin さまざまな構成可能なオプションで作成しました（シナリオのデモが含まれています）。 CSS3を可能な限り使用しますが、JQueryも使用します（それでよければ）。あなたは星の評価番号を取得することができますORプラグインメソッドを通して簡単に設定できます。

Bootstrap 3.xグリフィコン、RTLサポートを含み、プラグインイベントとメソッドをサポートします。プラグインは部分的に満たされた星もサポートします。 source here を参照できます。

Font-Awesomeを使用したい場合は、プラグインCSSをオーバーライドして、プロジェクトでBootstrap Glyphiconsの代わりにFont-Awesomeを使用できます。

6
Kartik V

Font AwesomeとJQuery DEMO

HTML

<div>Rating Star - Function CallBack onChange</div>
<div class="well well-sm">
    <span id="rating_1" class="rating" ></span>
    <span id="result_1"></span> 
</div>
<div>Rating Star - No Editable</div>
<div class="well well-sm">
    <span id="rating_2" class="rating" data-val="2.49" data-stars='6' data-change="false"></span>
    <span>Calificaste con <b>2.49</b> de <b>6</b> Estrellas</span> 
</div>
<div>Rating Star - Tamaño - Data Html options -- Hidden input</div>
<div class="well well-sm">
   <span id="rating_3" class="rating" data-val="2.49" data-stars='10' data-input=".rating-value" data-change="true" style="font-size:35px;" >
        <input type="hidden" name="whatever3" class="rating-value" size="5"  />
   </span>
</div>
<div>Rating Star - javascript Options - input text</div>
<div class="well well-sm">
   <span id="rating_4" class="rating">
       <input type="text" name="whatever4" id="rating_val" size="1" readOnly="readOnly" />    
   </span>
    <span id="result_4"> &nbsp;&nbsp;de <b>10</b> estrellas </span> 
</div>

JavaScript

 $('#rating_1').RatingStar(
   {callback:function(val){$('#result_1').html(" &nbsp;"+val+" estrella(s).")}}
 );

 $('#rating_2').RatingStar();

 $('#rating_3').RatingStar();

 $('#rating_4').RatingStar({
     val:4.95,
     stars:10,
     input:'#rating_val',
     change:true
 });
2
EpNiebla
var $star_rating = $('.rating .star');

var SetRatingStar = function() {
  return $star_rating.each(function() {


var puan = document.formname.whatever.value;



    if ( parseInt($(this).data('rating')) <= puan) {
      return $(this).removeClass('star').addClass('star filled');
    } else {
      return $(this).removeClass('star filled').addClass('star');
    }
  });
};

$star_rating.on('click', function() { 

  document.formname.whatever.value=$(this).data('rating');

  return SetRatingStar();
});



.rating{unicode-bidi:bidi-override;direction:rtl;font-size:10px;}
.rating span.star{font-family:FontAwesome;font-weight:normal;font-style:normal;display:inline-block}
.rating span.star:hover{cursor:pointer}
.rating span.star:before{content:"\f006";padding-right:5px;color:#999}
.rating span.star:hover:before,.rating span.star:hover~span.star:before{content:"\f005";color:#e3cf7a}
.rating span.star.filled {}
.rating span.star.filled:before{content:"\f005";color:#e3cf7a; }



<span class="rating" style="font-size:20px;">
<span class="star" data-rating="5"></span><span class="star" data-rating="4"></span><span class="star" data-rating="3"></span><span class="star" data-rating="2"></span><span class="star" data-rating="1"></span></span>
1
alpc

これがより良い解決策です。星は数字のみに基づいているため、検索エンジンとブラウザは4.5 out of 5を読み取り、それだけです。 独自のカスタムフォント ;を使用します。 JS、SVG、Flash、Canvasはありません。 プログレスバーとして利用可能 です。

デモ/コード

ここでは、簡単にするためにmicroformatタグなしのコードを示します。

Rating: <span class="star-rating-icons">
<strong>3.5</strong> out of <i>5</i>
</span>

そして、フォントと関連するスタイルを含むCSSです。

.star-rating-icons {
    font-family: seostars;
  font-size: 1.2em;
    line-height: .6em;
    position: relative;
    width: 5em;
    text-indent: -5000px;
    display: inline-block;
    font-style: normal;
}
.star-rating-icons strong {
    font-weight: normal;
    display: block;
    position: absolute;
    left: 0px;
    color: #FC0;
    font-family: seostars;
    text-indent: 0;
}
.star-rating-icons strong:first-letter {
    font-weight: bold;
    position: absolute;
    left: 0px;
    font-style: normal;
}
.star-rating-icons i {
    color: #666;
    position: absolute;
    text-indent: 0;
    color: #666;
    left: 0;
}

基本的に、評価の最初の文字は、その星全体の量の文字と部分的な星の小数でフォーマットされます。星の輪郭はその時代から作られていますが、存在する他のキャラクターに適用することもできます。 （フォントを編集するか、擬似要素のみを使用して）

0
sergio

CssTricksの CSSが非常に少ない星評価 を検討してください。画像、ブートストラップ、Javascriptを使用しません。純粋なCSSおよびUnicodeスター。 this を参照してください。 IE <= 6.を除くすべてのブラウザでサポートされています。

注：JavascriptはUIには必要ありませんが、サーバーにデータを送信し、要素がフォーカスを失った後のレーティング選択を保持するために必要です。

純粋なCSSを使用したアクセス可能な星評価ウィジェット もご覧ください。それも純粋なCSSです。ここで説明する手法を使用します- CSSを使用したカスタムラジオおよびチェックボックス入力 。要素がフォーカスを失った後も評価が選択されたままになるという点で、最初のものとは異なります。残念ながら、より少ないブラウザでサポートされています。

CSSセレクター に関する簡単なメモは、それを読んでいるときに役立つかもしれません。

UPDATE：

投稿を読み直して、リンクをクリックしてください。私の答えの最初のリンクは、トピックのスターターと同じです。謝罪。

とにかく、私は答えを削除しないことにしました。それは、私が見つけてとてもうれしくて、他の人にとって役に立つかもしれないいくつかのリンクを含んでいるからです。

0
Sergey Markelov

Django-ratings をご覧ください-それがあなたが探しているものです。

0
Thomas Schwärzl