Fontawesomeには素晴らしい星評価css拡張機能があり、これは本当に素晴らしいように見えます。
ただし、スパン要素のいずれかをクリックしても、実際には何も起こりません。これをデータベースモデルに接続する方法がわかりません。Djangoに0-5の整数フィールドがあるとしましょう。テンプレート内でのユーザーの選択に応じて値を設定するにはどうすればよいですか？
<span class="rating">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</span>
私はRatyを使用することになりました。シンプルでクリーンなソリューションを探しているなら、これが最も簡単だと思います。
$('#star').raty('score'); // Get the current score.
この投稿を見ましたが、必要以上にプラグインを使いたくありませんでした。それで、私はこれを私が取り組んでいる小さなプロジェクトのために一緒に投げました。これを使用するためにブートストラップは必要ありません。
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();
ブートストラップを使用している場合、これは星評価に最適なプラグインです。
class="rating"入力に追加する必要がありますブートストラップグリフィコンと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>
もう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";
}
さまざまな構成可能なオプションを使用して作成したBootstrapJQueryStar評価プラグインを確認できます（シナリオのデモが含まれています）。可能な限りCSS3を使用しますが、JQueryも使用します（問題がない場合）。星評価番号を取得するか、プラグインメソッドを使用して簡単に設定できます。
Bootstrap 3.xグリフィコンを使用し、RTLサポートを含み、プラグインイベントとメソッドをサポートします。プラグインは、部分的に塗りつぶされた星もサポートします。ここでソースを参照できます。
Font-Awesomeの使用に熱心な場合は、プラグインCSSをオーバーライドして、プロジェクトでBootstrapGlyphiconsの代わりにFont-Awesomeを使用できます。
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"> de <b>10</b> estrellas </span>
</div>
JavaScript
$('#rating_1').RatingStar(
{callback:function(val){$('#result_1').html(" "+val+" estrella(s).")}}
);
$('#rating_2').RatingStar();
$('#rating_3').RatingStar();
$('#rating_4').RatingStar({
val:4.95,
stars:10,
input:'#rating_val',
change:true
});
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>
django-ratingsを見てください-それがあなたが探しているものです。
これがより良い解決策です。星は数字だけに基づいているので、検索エンジンとブラウザは5つのうち4.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;
}
基本的に、評価の最初の文字は、その量の星全体を含む文字でフォーマットされ、小数は部分的な星でフォーマットされます。星の輪郭は、存在する他のどのキャラクターにも適用できますが、期間から作成されます。（フォントを編集するか、疑似要素を使用して）
CssTricksのCSSが非常に少ない星評価を検討してください。イメージ、ブートストラップ、Javascriptを使用しません。純粋なCSSとUnicodeスター、これを参照してください。IE<=6を除くすべてのブラウザでサポートされています。
注：JavascriptはUIには必要ありませんが、サーバーにデータを送信し、要素がフォーカスを失った後の評価の選択を維持するために必要です。
また、純粋なCSSを使用したAccessibleStarRatingウィジェットもご覧ください。これも純粋なCSSです。ここで説明する手法を使用します-CSSを使用したカスタムラジオおよびチェックボックス入力。要素がフォーカスを失った後も評価が選択されたままになるという点で、最初のものとは異なります。残念ながら、サポートされているブラウザは少なくなっています。
それを読んでいる間、 CSSセレクターに関する簡単なメモが役立つかもしれません。
アップデート：
投稿を読み直して、リンクをクリックしてください。私の答えの最初のリンクは、トピックスターターのものと同じです。謝罪。
とにかく、私は答えを削除しないことを選択しました。それは私が見つけてとてもうれしくて、他の人に役立つかもしれないいくつかのリンクを含んでいるからです。