如何在Django中使用字体awesome的星级？_Django_Twitter Bootstrap_Font Awesome

如何在Django中使用字体awesome的星级？

django twitter-bootstrap

如何在Django中使用字体awesome的星级？,django,twitter-bootstrap,font-awesome,Django,Twitter Bootstrap,Font Awesome,有一个伟大的星级css扩展，看起来真的很棒但是，单击任何跨度元素都不会真正起作用。我不知道如何将它与我的数据库模型连接起来。假设在Django中有一个0-5的整数字段。如何根据用户在模板中的选择设置值 </span&g

有一个伟大的星级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>

看一看-这就是你要找的。

我最终使用了。如果你正在寻找一个简单而干净的解决方案，我发现这是最简单的

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

这里有一个更好的解决方案。星星只基于数字，因此搜索引擎和浏览器只读取5个星星中的4.5个，仅此而已。它使用；没有JS，没有SVG，没有Flash，没有画布。它也是

这里是代码，没有微格式标签，使其更简单：

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

基本上，评级的第一个字母的格式是一个包含整颗星数量的字符，小数点包含部分星。星星的轮廓是根据这个时期制作的，尽管它可以应用于任何其他角色。（通过编辑字体或仅使用伪元素）

如果您使用引导，这是星级评定的最佳插件：

2Kb小型化
使用引导图标
没有额外的CSS
您只需在输入中添加
```
class=“rating”
```

我看过这篇文章，但不想使用一个插件，它包含的内容超出了我的需要。所以，我把这个放在一起做了一个小项目。您不需要引导就可以使用它

HTML

咖啡脚本

$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();

您可以使用各种可配置选项检查my I created（其中包括场景演示）。它尽可能多地使用CSS3，但也使用JQuery（如果您同意的话）。您可以通过插件方法轻松获得星级数字或进行设置

使用Bootstrap 3.x图标，包括RTL支持，支持插件事件和方法。该插件还支持任何分数填充的星星。你可以参考

如果您喜欢使用Font Awesome，您可以覆盖插件CSS，在项目中使用Font Awesome而不是引导图标。

var$star\u rating=$（'.rating.star'）；
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>

var SetRatingStar=函数（）{
返回$star_rating.each（函数（）{
var puan=document.formname.whatever.value；
if（parseInt（$（this）.data（'rating'））从CssTricks开始考虑。它不使用图像，不使用引导，不使用Javascript。纯CSS和Unicode星星，请参阅。除IE外，所有浏览器都支持我没有看到仅使用引导图标和jquery的简单答案。我确信其他人来这里寻找快速复制和粘贴，所以我只写了一个

$（函数（）{
$（'.rating select.btn'）。在（'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'）。在（'mouseleave'，function（）上{
active=$（this.parent（）.find（'.selected'）；
如果（活动长度）{
active.removeClass（'btn-default'）.addClass（'btn-warning'）；
active.prevAll（）.removeClass（'btn-default'）.addClass（'btn-warning'）；
active.nextAll（）.removeClass（'btn-warning'）.addClass（'btn-default'）；
}否则{
$（this）.find（'.btn'）.removeClass（'btn-warning'）.addClass（'btn-default'）；
}
});
$（'.rating select.btn'）。单击（函数（）{
if（$（this）.hasClass（'selected'））{
$（'.rating select.selected'）。removeClass（'selected'）；
}否则{
$（'.rating select.selected'）。removeClass（'selected'）；
$（this.addClass（'selected'）；
}
});
})；


HTML
还有一个有趣的方法：纯CSS，保留选定值，使用单选按钮（酷！）和FA字体

取自
HTML
谢谢你的提示，它看起来不错，但我遇到了一个问题。请你看看更新的问题好吗？谢谢你能评论一下它是如何工作的吗？你博客上的它是如何工作的非常模糊。它使用什么字体？css是什么？我为“晦涩难懂”感到抱歉。我假设每个人都知道如何使用“开发人员工具”或者一些“检查器”或者只是“源代码”。你可以根据代码的工作原理检查代码……它使用一种特殊的字体来表示整数（第一个字母），另一种字体表示小数，点表示星号“帧”.真的吗？-5票赞成一个简单的非JS解决方案？最复杂的是什么：第一个字母和位置：绝对？自定义字体也已经存在多年了。是的，这正是我想要的，而且演示非常好。不知道为什么会有这么多的仇恨。我更新了演示，让那些用Glight出售的人会喜欢它。当你看到再次演示，记住：这和你讨厌的一样，哈哈。不要害怕特殊字体和第一个字母的工作。谢谢@Yablargo的评论。有些人在吃鱼子酱时会感到恶心，他们不知道如何吃鱼子酱。heheThanks告诉我，我插入了github链接。你添加了CSS或只是投票吗？投了tur票吗n是否使用0值？coffeescript代码与javascript代码的作用完全相同。1+。Lol关于“快速复制和粘贴”。您的代码看起来不错，正在考虑复制它如何设置页面加载上的星星数？
$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()

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();

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>

<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>

 $('#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
 });

<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>

.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";
}