当前博客:41-快码FOF中文编程layui教学-组件:滑块

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

博客作者:【qiang】

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

滑块在设置身高,体重,音量,进度等,可以一目了然的知道数量的变化。

虽然数据框有滑块类型,但是不太美观,功能也不是很多,需要后期的优化才行。

而layui的滑块组件可以设置数据框,提示文字,垂直展示,还可以更改主题,感觉功能在大多数情况都应该够用了。

layui滑块的基础代码示例:

<区块 id="演示1"></区块>
<脚本>
	新建对象 lay_滑块({
		[lay_滑块.配置.绑定元素]: "#演示1",
		[lay_滑块.配置.初始值]: 10,
		[lay_滑块.配置.输入框]: 真,
		[lay_滑块.配置.设置提示]: 定义函数 (值) {
			//自定义提示文本
			返回 值 + "%";
		},
	});
</脚本>
Markup

代码效果展示:

如果不想要右边的数据框,可以把 输入框参数删除掉。

完整滑块参数代码示例:

<区块 id="演示2"></区块>
<脚本>
	局部变量 滑块2 = 新建对象 lay_滑块({
		[lay_滑块.配置.绑定元素]: "#演示2",
		[lay_滑块.配置.类型]: lay_滑块.类型.垂直,
		[lay_滑块.配置.最小值]: 0,
		[lay_滑块.配置.最大值]: 100,
		[lay_滑块.配置.范围]: 真,
		[lay_滑块.配置.初始值]: [0, 20],
		[lay_滑块.配置.步长]: 5,
		[lay_滑块.配置.显示步长]: 真,
		[lay_滑块.配置.提示]: 真,
		[lay_滑块.配置.输入框]: 假,
		[lay_滑块.配置.高度]: 200,
		[lay_滑块.配置.主题]: "#0cc",
		[lay_滑块.配置.设置提示]: 定义函数 (值) {
			返回 值 + "%";
		},
		[lay_滑块.配置.改变]: 定义函数 (值) {
			lay_弹出层.消息框(值[0] + "%  -  " + 值[1] + "%");
		},
	});
</脚本>
Markup

代码效果展示:

特殊参数解释:

1、类型:滑块有两种类型,一种是横向的,一种垂直的,横向的滑块不需要设置类型;

2、范围:可以在滑块设置一个范围;

3、初始值:如果不是范围,则是数字类型,如果是范围则是数组类型,可以参考代码示例;

4、步长:每次滑动的距离(一步的长度),上面的步长是5,那么我每次滑动的距离都是5的倍数。

5、显示步长:设置真,则每一步的距离(间隔点)都会出现一个白色的点隔开;

6、输入框:第一个案例,右侧的数据框,只有不是范围的滑块才会显示;

7、高度:设置滑块的高度,只对垂直类型的滑块管用。

 

点击此处跳转案例下载:点击下载滑块实例

41-快码FOF中文编程layui教学-组件:滑块