基础效果 显示文字 半星效果 自定义内容 自定义长度 只读 自定义主题色 layui.use(['rate'], function(){ var rate = layui.rate; //基础效果 rate.re
需要引入Layui组件
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>基础效果</legend></fieldset>
<div id="test1"> </div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>显示文字</legend></fieldset>
<div id="test2"> </div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>半星效果</legend></fieldset>
<div id="test3"> </div>
<div>
<div id="test4"> </div></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>自定义内容</legend></fieldset>
<div id="test5"> </div>
<div>
<div id="test6"> </div></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>自定义长度</legend></fieldset>
<div id="test7"> </div>
<div>
<div id="test8"> </div></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>只读</legend></fieldset>
<div id="test9"> </div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>自定义主题色</legend></fieldset>
<ul>
<li>
<div id="test10"> </div></li>
<li>
<div id="test11"> </div></li>
<li>
<div id="test12"> </div></li>
<li>
<div id="test13"> </div></li>
<li>
<div id="test14"> </div></li>
</ul>
<script>
layui.use(['rate'], function(){
var rate = layui.rate;
//基础效果
rate.render({
elem: '#test1'
})
//显示文字
rate.render({
elem: '#test2'
,value: 2 //初始值
,text: true //开启文本
});
//半星效果
rate.render({
elem: '#test3'
,value: 2.5 //初始值
,half: true //开启半星
})
rate.render({
elem: '#test4'
,value: 3.5
,half: true
,text: true
})
//自定义文本
rate.render({
elem: '#test5'
,value: 3
,text: true
,setText: function(value){ //自定义文本的回调
var arrs = {
'1': '极差'
,'2': '差'
,'3': '中等'
,'4': '好'
,'5': '极好'
};
this.span.text(arrs[value] || ( value + "星"));
}
})
rate.render({
elem: '#test6'
,value: 1.5
,half: true
,text: true
,setText: function(value){
this.span.text(value);
}
})
//自定义长度
rate.render({
elem: '#test7'
,length: 3
});
rate.render({
elem: '#test8'
,length: 10
,value: 8 //初始值
});
//只读
rate.render({
elem: '#test9'
,value: 4
,readonly: true
});
//主题色
rate.render({
elem: '#test10'
,value: 3
,theme: '#FF8000' //自定义主题色
});
rate.render({
elem: '#test11'
,value: 3
,theme: '#009688'
});
rate.render({
elem: '#test12'
,value: 2.5
,half: true
,theme: '#1E9FFF'
})
rate.render({
elem: '#test13'
,value: 2.5
,half: true
,theme: '#2F4056'
});
rate.render({
elem: '#test14'
,value: 2.5
,half: true
,theme: '#FE0000'
})
});
</script>
