当前博客:42-快码FOF中文编程layui教学-组件:评分

166 次浏览【转载需注明来源】

博客作者:【qiang】

个性签名:请输入个性签名___________

评分组件顾名思义就是评分的时候用的,通常是五颗星星组成的评分,通过点亮星星来评分。

layui内置的评分插件,可以改变星星数量,半分评价,主题颜色。

基础评分代码示例:

<区块 id="演示1"></区块>
<脚本>
	新建对象 lay_评分({
		[lay_评分.配置.绑定元素]: "#演示1",
	});
</脚本>
Markup

代码效果示例:

完整参数代码示例:

 

<区块 id="演示2"></区块>
<脚本>
	新建对象 lay_评分({
		[lay_评分.配置.绑定元素]: "#演示2",
		[lay_评分.配置.数量]: 6,
		[lay_评分.配置.初始值]: 0.5,
		[lay_评分.配置.主题]: "red",
		[lay_评分.配置.半星]: 真,
		[lay_评分.配置.只读]: 假,
		[lay_评分.配置.选择]: 定义函数 (值) {
			lay_弹出层.消息框(值 + "星评价!");
		},
		[lay_评分.配置.文本]: 真,
		[lay_评分.配置.设置文本]: 定义函数 (值) {
			变量 评价 = {
				"1": "极差",
				"2": "差",
				"3": "中等",
				"4": "好",
				"5": "优秀",
				"6": "顶呱呱!",
			};
			lay_评分.设置文本(本对象, 评价[值] || 值 + "星");
		},
	});
</脚本>
Markup

代码效果展示:

特殊参数解释:

1、初始值:在非半星的的情况下,小数 <= 0.5向下取整,>0.5向上取整,开启半星的情况下,小树0.1 ~ 0.9,都是0.5分;

2、只读:开启只读,则评分组件只能展示不可点击;

3、文本:开启文本,则组件右侧会出现默认文本 {评分值}星。

 

点击此处跳转案例下载:点击下载评分实例

42-快码FOF中文编程layui教学-组件:评分