|
《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：
1.27 颜色选择器colorpicker
在主题定制的应用场景中，自然离不开颜色的自定义，而往往需要的是关于它的直观选择，colorpicker支持hex、rgb、rgba三类色彩模式，在代码中简单的调用后，便可在网页系统中自由拖拽去选择中意的颜色。
模块加载名称：colorpicker。
1.27.1 快速使用
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<script>
layui.use('colorpicker', function() {
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#test1' //绑定元素
});
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.27.2 基础参数
colorpicker组件目前支持如图1-xx所示的参数。
1.27.3 属性color
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script>
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#test1',
color: "#123ABC"
});
colorpicker.render({
elem: '#test2',
color: "rgb(255, 120, 0)"
});
colorpicker.render({
elem: '#test3',
color: "rgba(255, 69, 0, 0.68)"
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.27.4 属性format和alpha
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script>
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#test1',
format: "hex"
});
colorpicker.render({
elem: '#test2',
format: "rgb"
});
colorpicker.render({
elem: '#test3',
alpha: true,
format: "rgb"
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.27.5 属性predefine和colors
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<script>
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#test1',
predefine: true,
colors: ['#ff4500', '#1e90ff', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)']
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.27.6 属性size
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script>
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#test1',
size: "lg"
});
colorpicker.render({
elem: '#test2',
size: "sm"
});
colorpicker.render({
elem: '#test3',
size: "xs"
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.27.7 颜色被改变的回调
回调名：change。
当颜色在选择器中发生选择改变时，会进入change回调，可以通过它来进行所需的操作，如下代码就是实时的输出当前选择器的颜色。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<script>
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#test1',
change: function(color) {
console.log(color)
}
});
</script>
</body>
</html>
1.27.8 颜色选择后的回调
回调名：done。
点击颜色选择器的“确认”和“清除”按钮，均会触发done回调，回调返回当前选择的颜色值。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div id="test1"></div>
<script>
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#test1',
done: function(color) {
console.log(color)
//譬如你可以在回调中把得到的color赋值给表单
}
});
</script>
</body>
</html>
| 
转播
