开发测试时的layui版本为2.5.5
在主题定制的应用场景中,自然离不开颜色的自定义。而你往往需要的是关于它的直观选择,于是 colorpicker 模块姗姗来迟,它支持 hex、rgb、rgba 三类色彩模式,在代码中简单的调用后,便可在你的网页系统中自由拖拽去选择你中意的颜色
模块加载名称:colorpicker
注意:colorpicker 为 layui 2.4.0 新增模块,不支持 ie10 以下版本,其它高级浏览器均支持。
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>颜色选择器</title>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
</head>
<body>
<!--
颜色选择器不仅仅是独立使用,它更多情况可能是跟表单结合使用
-->
<div id="test1"></div>
<script type="text/javascript">
layui.use('colorpicker', function(){
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#test1', //绑定元素
color: 'red',
format:'rgb',
alpha:true,
predefine: true,
colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)'],
size:'lg',
change: function(color){//当颜色在选择器中发生选择改变时,会进入 change 回调,你可以通过它来进行所需操作,当前示例为实时输出当前选择器的颜色
console.log(color);
},
done: function(color){//点击颜色选择器的“确认”和“清除”按钮,均会触发 done 回调,回调返回当前选择的色值
console.log(color)
//譬如你可以在回调中把得到的 color 赋值给表单
}
});
});
</script>
</body>