星星评价
文章转载,请注明出处 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 | 点击事件,回调函数,此处返回打分结果。 |