layui颜色选择器

颜色选择器使用详解

最新推荐文章于 2025-09-11 02:23:54 发布

转载最新推荐文章于 2025-09-11 02:23:54 发布 · 607 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/OpenSource_/article/details/119296235

文章标签：

#layui

layui颜色选择器专栏收录该内容

1 篇文章

订阅专栏

颜色选择器

相关代码

<%@ 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>

<title>颜色拾取器</title>

</head>

<body>

<fieldset class="layui-elem-field layui-field-title"

style="margin-top: 30px;">

</fieldset>

</div>

<fieldset class="layui-elem-field layui-field-title"

style="margin-top: 30px;">

</fieldset>

<input type="text" value="" placeholder="请选择颜色" class="layui-input"

id="test-form-input">

</div>

</div>

</form>

</div>

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>

<title>颜色选择器</title>

</head>

<body>

</fieldset>

</div>

</fieldset>

</div>

</div>

</form>

</div>

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>