layui颜色选择器

最新推荐文章于 2024-07-02 16:57:53 发布

zhouzhou_98

最新推荐文章于 2024-07-02 16:57:53 发布

阅读量4.1k

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/zhouzhou_98/article/details/101920614

版权

layui 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

颜色选择器

相关代码

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

zhouzhou_98

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui颜色选择器

颜色选择器相关代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:...
复制链接

扫一扫

专栏目录