1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
| <!DOCTYPE html>
| <html>
| <head>
| <meta charset="utf-8">
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
| <title>颜色选择器 - layui</title>
|
| <link rel="stylesheet" href="../src/css/layui.css">
|
| <style>
| body{padding:20px;}
| .test-box{margin-bottom: 50px;}
| </style>
| </head>
| <body>
|
| <div class="layui-container">
| <div class="test-box">
| <div class="layui-inline">
| <input class="layui-input" id="LAY-test1">
| </div>
| <div id="test1"></div>
| </div>
|
| <div class="test-box">
| <div id="test2"></div>
| </div>
|
| <div class="test-box">
| <div id="test3"></div>
| </div>
|
| <div class="test-box">
| <div id="test4"></div>
| </div>
|
| <div class="test-box">
| <div id="test5"></div>
| </div>
|
| <div class="test-box">
| <div id="test6"></div>
| </div>
|
| <div class="test-box">
| <div class="test-more" lay-options="{color: '#FF0000'}"></div>
| <div class="test-more" lay-options="{color: '#008000'}"></div>
| <div class="test-more" lay-options="{color: '#0000FF'}"></div>
| </div>
| </div>
|
| <script src="../src/layui.js"></script>
| <script>
|
| layui.use(['colorpicker', 'layer'], function(){
| var colorpicker = layui.colorpicker;
|
| colorpicker.render({
| elem: '#test1'
| //,predefine: true //开启预定义颜色
| //,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
| ,change: function(color){
| this.done(color);
| }
| ,done: function(color){
| layui.$('#LAY-test1').val(color);
| document.body.style.backgroundColor = color;
| }
| ,cancel: function(color){
| this.done(color);
| console.log('cancel', color);
| }
| ,close: function(color){
| console.log('close', color);
| }
| });
|
| colorpicker.render({
| elem: '#test2'
| ,color: 'rgba(218, 121, 157, 1)' //设置默认色
| ,predefine: true
| ,alpha: true //开启透明度
| ,format: 'rgb'
| ,change: function(color){
| console.log(color)
| }
| });
|
| colorpicker.render({
| elem: '#test3'
| ,color: 'rgba(0,0,0)'
| //,alpha: true
| //,format: 'rgb' //设置输入显示格式为rgb
| });
|
| colorpicker.render({
| elem: '#test4'
| ,color: '#06eeb8'
| ,predefine: true //开启预定义色
| ,format: 'rgb'
| });
|
| colorpicker.render({
| elem: '#test5'
| ,color: '#ffd900'
| ,predefine: true
| ,size: 'lg'
| });
|
| colorpicker.render({
| elem: '#test6'
| ,color: '#F00'
| ,predefine: true
| ,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
| ,size: 'xs'
| });
|
| // 同时绑定多个
| colorpicker.render({
| elem: '.test-more',
| done: function(color){
| console.log(this.elem, color);
| }
| });
| })
| </script>
| </body>
| </html>
|
|
