<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>颜色拾取器</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title"
style="margin-top: 30px;">
<legend>常规使用</legend>
</fieldset>
<div style="margin-left: 30px;">
<div id="test1"></div>
<div id="test2" style="margin-left: 30px;"></div>
</div>
<fieldset class="layui-elem-field layui-field-title"
style="margin-top: 30px;">
<legend>表单赋值</legend>
</fieldset>
<div style="margin-left: 30px;">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-input-inline" style="width: 120px;">
<input type="text" value="" placeholder="请选择颜色" class="layui-input"
id="test-form-input">
</div>
<div class="layui-inline" style="left: -11px;">
<div id="test-form"></div>
</div>
</div>
</form>
</div>
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
layui.use([ 'element', 'jquery', 'colorpicker', 'layer' ], function() {
var $ = layui.jquery;
var element = layui.element;
var colorpicker = layui.colorpicker;
var layer = layui.layer;
//常规使用
colorpicker.render({
elem : '#test1' //绑定元素
,
change : function(color) { //颜色改变的回调
layer.tips('选择了：' + color, this.elem, {
tips : 1
});
}
});
//初始色值
colorpicker.render({
elem : '#test2',
color : '#2ec770' //设置默认色
,
done : function(color) {
layer.tips('选择了：' + color, this.elem);
}
});
//表单赋值
colorpicker.render({
elem: '#test-form'
,color: '#1c97f5'
,done: function(color){
$('#test-form-input').val(color);
}
});
});
</script>
</body>
</html>
原理，页面声明元素再使用js去渲染
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 2019/10/2
Time: 14:59
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>颜色选择器</title>
<link rel="stylesheet" href="./libs/layui/css/layui.css">
<link rel="stylesheet" href="./libs/css/global.css">
<script type="text/javascript" src="./libs/layui/layui.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规使用</legend>
</fieldset>
<div style="margin-left: 30px;">
<div id="test1"></div>
<div id="test2" style="margin-left: 30px;"></div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>表单赋值</legend>
</fieldset>
<div style="margin-left: 30px;">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-input-inline" style="width: 120px;">
<input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test-form-input">
</div>
<div class="layui-inline" style="left: -11px;">
<div id="test-form"></div>
</div>
</div>
</form>
</div>
<script>
layui.use(['element','jquery','colorpicker','layer'], function(){
var $=layui.jquery;
var element=layui.element;
var colorpicker=layui.colorpicker;
var layer=layui.layer;
//常规使用
colorpicker.render({
elem: '#test1' //绑定元素
,change: function(color){ //颜色改变的回调
layer.tips('选择了：'+ color, this.elem, {
tips: 1
});
}
});
//初始色值
colorpicker.render({
elem: '#test2'
,color: '#2ec770' //设置默认色
,done: function(color){
layer.tips('选择了：'+ color, this.elem);
}
});
//表单赋值
colorpicker.render({
elem: '#test-form'
,color: '#1c97f5'
,done: function(color){
$('#test-form-input').val(color);
}
});
});
</script>
</body>
</html>
