1. 在主题定制的应用场景中, 自然离不开颜色的自定义。而你往往需要的是关于它的直观选择, 于是colorpicker模块姗姗来迟, 它支持hex、rgb、rgba 三类色彩模式, 在代码中简单的调用后, 便可在你的网页系统中自由拖拽去选择你中意的颜色。
2. 模块加载名称:colorpicker。
3. 基础参数
3.1. colorpicker组件目前支持以下参数:
4. 预定义颜色
4.1. 预定义颜色, 可以被认为是提供的参考色, 因此除了我们默认的预定义颜色之外, 你还可以自己定义:
<script type="text/javascript">
layui.use(['colorpicker'], function() {
var colorpicker = layui.colorpicker;
// 渲染
colorpicker.render({
elem: '#test1' // 绑定元素
,predefine: true
,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
});
});
</script>
5. 颜色被改变的回调 - change
5.1. 当颜色在选择器中发生选择改变时, 会进入change回调, 你可以通过它来进行所需操作:
<script type="text/javascript">
layui.use(['colorpicker'], function() {
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#test1' //绑定元素
,change: function(color){
console.log(color)
}
});
});
</script>
6. 颜色选择后的回调 - done
6.1. 点击颜色选择器的"确认"和"清除"按钮, 均会触发done回调, 回调返回当前选择的色值:
<script type="text/javascript">
layui.use(['colorpicker'], function() {
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#test1' //绑定元素
,done: function(color){
console.log(color)
}
});
});
</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" 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' //绑定元素
,size: 'lg'
,color: '#F00'
,format: 'rgb'
,alpha: true
,predefine: true
,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
,change: function(color){
console.log(color)
}
,done: function(color){
console.log(color)
}
});
});
</script>
</body>
</html>
7.2. 效果图