layui评分

最新推荐文章于 2023-03-31 00:23:56 发布

zhouzhou_98

最新推荐文章于 2023-03-31 00:23:56 发布

阅读量2k

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/zhouzhou_98/article/details/101922760

版权

layui 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

评分

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

.demo-slider{

margin-top: 20px;

}

</style>

</head>

</fieldset>

</fieldset>

</fieldset>

<legend>自定义内容</legend>

</fieldset>

<legend>自定义长度</legend>

</fieldset>

</fieldset>

<legend>自定义主题色</legend>

</fieldset>

<ul>

</ul>

layui.use([ 'element', 'jquery', 'colorpicker', 'layer','slider','rate' ], function() {

var $ = layui.jquery;

var element = layui.element;

var colorpicker = layui.colorpicker;

var layer = layui.layer;

var slider=layui.slider;

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: '#FF0000'

})

/**

RGB ===RAD GREEN BLUE

#F00 16*16*16==?

#00FF00 255*255*255

#FFFF0000 前两位代表透明度

});

</script>

</body>

</html>

详细代码

<%--

Created by IntelliJ IDEA.

User: Lenovo

Date: 2019/10/2

Time: 15:59

To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

</head>

<body>

</fieldset>

</fieldset>

</fieldset>

<legend>自定义内容</legend>

</fieldset>

<legend>自定义长度</legend>

</fieldset>

</fieldset>

<legend>自定义主题色</legend>

</fieldset>

<ul>

</ul>

layui.use(['element','jquery','colorpicker','layer','rate'], function(){

var $=layui.jquery;

var element=layui.element;

var colorpicker=layui.colorpicker;

var layer=layui.layer;

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>

</body>

</html>

zhouzhou_98

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
layui评分

评分 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3....
复制链接

扫一扫

专栏目录