021-评分

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

自由与束缚JavaJavaScript

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

阅读量187

点赞数

分类专栏： layui学习

本文链接：https://blog.csdn.net/aihiao/article/details/113040279

版权

layui学习专栏收录该内容

32 篇文章 1 订阅

订阅专栏

1. rate评分组件在电商和O2O平台尤为常见, 一般用于对商家进行服务满意度评价。

2. 模块加载名称: rate。

3. 基础参数

3.1. 目前rate组件提供了以下基础参数, 你可根据实际场景进行相应的设置:

4. 分数设置

4.1. 关闭半星功能:

4.1.1. 小数值大于0.5, 分数向上取整, 如: 3.6分, 则系统自动更改为4分。

4.1.2. 小数值小于等于0.5, 分数向下取整, 如: 3.2分, 则系统自动更改为3分。

4.1.3. 如果在关闭半星功能的情况下开启了文本, 你会发现你的分数也相应的变成了整数。

4.2. 开启半星功能:

4.2.1. 不论你的小数值是0.1还是0.9, 都统一规划为0.5, 在文本开启的情况下, 你可以看见你的分数并没有发生变化。

5. 自定义文本的回调

5.1. 通过setText函数, 在组件初次渲染和点击后时产生回调。我们默认文本以星级显示, 你可以根据自己设定的文字来替换我们的默认文本, 如: "讨厌"、"喜欢" 。若用户选择分数而没有设定对应文字的情况下, 系统会使用我们的默认文本。

<script type="text/javascript">
	layui.use(['rate'], function() {
		var rate = layui.rate;

		// 渲染
	    rate.render({
	      	elem: '#test1'  // 指向容器选择器
			,setText: function(value){
		    	var arrs = {
		      		'1': '极差'
			      	,'2': '差'
			      	,'3': '一般'
			     	,'4': '中等'
			     	,'5': '好'
			     	,'6': '非常好'
			     	,'7': '非常非常好'
			     	,'8': '极好的'
			     	,'9': '极好极好的'
			     	,'10': '最好的'
		    	};
		    	this.span.text(arrs[value] || ( value + "星"));
			}
	    });
	});              
</script>

6. 点击产生的回调

6.1. 通过choose实现函数, 在组件被点击后触发, 回调分数, 用户可根据分数来设置效果:

<script type="text/javascript">
	layui.use(['rate'], function() {
		var rate = layui.rate;

		// 渲染
	    rate.render({
	      	elem: '#test1'  // 指向容器选择器
	      	,choose: function(value){
				if(value > 6) alert('么么哒');
			}
	    });
	});              
</script>

7. 例子

7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>评分 - layui</title>

		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<div id="test1"></div>

		<script type="text/javascript">
			layui.use(['rate'], function() {
  				var rate = layui.rate;
  
				// 渲染
			    rate.render({
			      	elem: '#test1'  // 指向容器选择器
			      	,length: 10 // 评分组件中具体星星的个数
			      	,value: 6 // 评分的初始值
			      	,half: true // 设定组件是否可以选择半星
			      	,text: true // 是否显示评分对应的内容
			      	,choose: function(value){
    					if(value > 6) alert('么么哒');
  					}
  					,setText: function(value){
				    	var arrs = {
				      		'1': '极差'
					      	,'2': '差'
					      	,'3': '一般'
					     	,'4': '中等'
					     	,'5': '好'
					     	,'6': '非常好'
					     	,'7': '非常非常好'
					     	,'8': '极好的'
					     	,'9': '极好极好的'
					     	,'10': '最好的'
				    	};
				    	this.span.text(arrs[value] || ( value + "星"));
					}
			    });
			});              
		</script>
	</body>
</html>

7.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

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

1. rate评分组件在电商和O2O平台尤为常见, 一般用于对商家进行服务满意度评价。2. 模块加载名称: rate。3. 基础参数3.1. 目前rate组件提供了以下基础参数, 你可根据实际场景进行相应的设置:4. 分数设置 4.1. 关闭半星功能:4.1.1. 小数值大于0.5, 分数向上取整, 如: 3.6分, 则系统自动更改为4分。4.1.2. 小数值小于等于0.5, 分数向下取整, 如: 3.2分, 则系统自动更改为3分。4.1.3. 如果在关闭半星功能的情况下
复制链接

扫一扫