-
颜色选择器
相关代码
<%@ 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>