lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-10-07 23:24:32 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

第三次配置

Browse Source
This commit is contained in:
star
2018-04-25 16:11:15 +08:00
parent db82cc3695
commit 53e3951331
3 changed files with 102 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
examples/rate.html
View File

@@ -16,62 +16,34 @@ body{padding:20px;}
<div class="layui-container">
<div class="layui-row">
<!-- 基础评分用法 -->
<div class="layui-rate layui-col-xm4 layui-col-xm-offset4 ">
<div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4 ">
<h3>基础用法</h3>
<hr>
<ul class="layui-rate-primary">
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
</ul>
<div id="test1"></div>
</div>
<!-- 半星评分用法 -->
<div class="layui-rate layui-col-xm4 layui-col-xm-offset4 ">
<div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4 ">
<h3>选中半星</h3>
<hr>
<ul class="layui-rate-half">
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
</ul>
<div id="test2"></div>
</div>
<!-- 显示提示文字 -->
<div class="layui-rate layui-col-xm4 layui-col-xm-offset4 ">
<div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4 ">
<h3>显示提示文字</h3>
<hr>
<ul class="layui-rate-text">
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
</ul>
<div id="test3"></div>
<span></span>
</div>
<!-- 只读 -->
<div class="layui-rate layui-col-xm4 layui-col-xm-offset4 ">
<div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4 ">
<h3>只读</h3>
<hr>
<ul class="layui-rate-read">
<li class="layui-inline"><i class="layui-icon layui-icon-rate-solid"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate-solid"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
<li class="layui-inline"><i class="layui-icon layui-icon-rate"></i></li>
</ul>
<div id="test4"></div>
</div>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
</div>
</div>
@@ -82,20 +54,31 @@ body{padding:20px;}
layui.use(['rate'], function(){
var rate = layui.rate;
//设置全局
rate.set({
score: 3.5
});
var ins = rate.render({
elem: '#test1'
//渲染
rate.render({
elem: '#test1',
length: 7,
value: 4
})
rate.render({
elem: '#test2',
length: 6,
value: 2,
half: true
})
rate.render({
elem: '#test3',
length: 5,
value: 3,
text: true
})
rate.render({
elem: '#test4',
length: 8,
value: 5,
reader: true
})
rate.primary(".layui-rate-primary","li");
rate.half(".layui-rate-half","li");
rate.text(".layui-rate-text","li");
});
</script>
</body>