android星星评分进度条,HUI

HUI - 星级评分组件

实现步骤

1、添加一个div用于放置星级图标

2、使用huiStar('id选择器')初始化星级插件对象var star1 = new huiStar('#star1');

3、使用对象的draw函数绘制星级图标star1.draw();

注意

需要引用 hui-star.js。

默认选择第N个星级//默认3星

//原理: 在星级外层寻找 .hui-icons-star 元素，在对应的星级上模拟点击事件即可。

hui('#star1').find('.hui-icons-star').eq(2).trigger('click');

完整演示代码html>

HUI

HUI 星级评分组件

星级评分演示

提交评分

自定义 + 事件监听

提交评分

var star1 = new huiStar('#star1');

star1.draw();

//默认3星

hui('#star1').find('.hui-icons-star').eq(2).trigger('click');

//事件监听

hui('#btn1').click(function(){

var starVal = star1.getVal();

hui.iconToast('星级 : ' + starVal, 'star');

});

var star2 = new huiStar('#star2');

star2.starNum = 6;

star2.color   = '#D1D1D1';

star2.colorActive = '#FF0000';

star2.size = 28;

star2.change = function(starVal){

hui.toast(starVal + '星');

}

star2.draw();

hui('#btn2').click(function(){

var starVal = star2.getVal();

hui.iconToast('星级 : ' + starVal, 'star');

});

huiStar对象属性说明

starNum ：星标数量，默认 5；

size ： 星标大小，默认 35px；

color ：默认星标演示，默认 #CCCCCC；

colorActive ：选中后星标的颜色。默认 #F9BE66；

huiStar对象的change函数

huiStar对象的change函数在星标变化或被点击时会被自动调用，并传入评分参数。