星星评价

文章转载，请注明出处 H-ui前端框架，网址http://www.h-ui.net/

采用背景填充+百分比，可现实半颗星。

描述相符：

宝贝描述：

4.1

宝贝描述：

4.5

HTML SCSS CSS JS

<div class="clearfix">
  <span class="f-l f-15 va-m">描述相符：</span>
  <div id="star-1" class="hui-star size-M f-l mr-10 va-m"></div>
  <strong id="result-1" class="f-l va-m"></strong>
</div>
<div class="clearfix mt-10">
  <span class="f-l f-14 va-m">宝贝描述：</span>
  <div class="hui-star hui-star-show size-M f-l va-m mr-10">
    <span class="hui-star-item" style="width:82%"></span>
  </div>
  <strong class="f-l f-14 va-m">4.1</strong>
</div>
<div class="clearfix mt-10">
  <span class="f-l f-14 va-m">宝贝描述：</span>
  <div class="hui-star hui-star-show size-S f-l va-m mr-10">
    <span class="hui-star-item" style="width:90%"></span>
  </div>
  <strong class="f-l f-14 va-m">4.5</strong>
</div>

通过.size-M，和.size-S 控制星星的大小。

.hui-star{
  font-size: 0;
  line-height: 0;
  .hui-star-item {
    display: inline-block;
    text-align: center;
  }
  &.hui-star-show {
    background: url(../images/star/iconpic-star-S-default.png) repeat-x 0 0;
    .hui-star-item {
      background: url(../images/star/iconpic-star-S.png) repeat-x 0 0;
      &.star-1 {
        width: 20%;
      }

      &.star-2 {
        width: 40%;
      }

      &.star-3 {
        width: 60%;
      }

      &.star-4 {
        width: 80%;
      }

      &.star-5 {
        width: 100%;
      }
    }
  }
  &.size-S {
    width: 80px;
    height: 16px;
    background-size:16px;
    .hui-star-item {
      height: 16px;
      background-size: 16px;
    }
    img {
      width: 16px;
      height: 16px;
    }
  }
  &.size-M {
    width: 120px;
    height: 24px;
    background-size: 24px;
    .hui-star-item {
      height: 24px;
      background-size: 24px;
    }
    img {
      width: 24px;
      height: 24px;
    }
  }
}

.hui-star {
  font-size: 0;
  line-height: 0;
}
.hui-star .hui-star-item {
  display: inline-block;
  text-align: center;
}
.hui-star.hui-star-show {
  background: url(../images/star/iconpic-star-S-default.png) repeat-x 0 0;
}
.hui-star.hui-star-show .hui-star-item {
  background: url(../images/star/iconpic-star-S.png) repeat-x 0 0;
}
.hui-star.hui-star-show .hui-star-item.star-1 {
  width: 20%;
}
.hui-star.hui-star-show .hui-star-item.star-2 {
  width: 40%;
}
.hui-star.hui-star-show .hui-star-item.star-3 {
  width: 60%;
}
.hui-star.hui-star-show .hui-star-item.star-4 {
  width: 80%;
}
.hui-star.hui-star-show .hui-star-item.star-5 {
  width: 100%;
}
.hui-star.size-S {
  width: 80px;
  height: 16px;
  background-size: 16px;
}
.hui-star.size-S .hui-star-item {
  height: 16px;
  background-size: 16px;
}
.hui-star.size-S img {
  width: 16px;
  height: 16px;
}
.hui-star.size-M {
  width: 120px;
  height: 24px;
  background-size: 24px;
}
.hui-star.size-M .hui-star-item {
  height: 24px;
  background-size: 24px;
}
.hui-star.size-M img {
  width: 24px;
  height: 24px;
}

$("#star-1").raty({
  hints: ['1','2', '3', '4', '5'],//自定义分数
  starOff: 'iconpic-star-S-default.png',//默认灰色星星
  starOn: 'iconpic-star-S.png',//黄色星星
  path: 'h-ui/images/star',//可以是相对路径
  number: 5,//星星数量，要和hints数组对应
  showHalf: true,
  targetKeep : true,
  click: function (score, evt) {//点击事件
    //第一种方式：直接取值
    $("#result-1").html('你的评分是'+score+'分');
  }
});

显示不需要脚本。只有在点评的时候需要脚本。

参数	默认值	说明
number	10	星星数量，默认10颗
hints	['10', '20', '30', '40', '50', '60', '70', '80', '90', '100' ]	星星对应的分数设置，一定要和星星数量（number参数）相对应
path	images/	图片存放目录环境
starOff	star-off.png	默认星星图片（依赖path参数）
starOn	star-on.png	激活状态星星图片（依赖path参数）
cancel	false	取消
cancelHint	取消评级	取消后的显示文案
cancelOff	cancel-off.png	取消按钮默认状态，（依赖path参数）
cancelOn	cancel-on.png	取消按钮激活状态，（依赖path参数）
readOnly	false	只读模式
score	undefined	默认选中星星数量（数字）
click	undefined	点击事件，回调函数，此处返回打分结果。

星星评价

相关参数