color-select.html
1.7 KB
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
<div class="layuimini-container layuimini-page-anim">
<div class="layuimini-main">
<blockquote class="layui-elem-quote">
颜色选择器使用开源项目：paigusu<br>
<a href="http://www.jq22.com/jquery-info20030" target="_blank" class="layui-btn layui-btn-danger">TableSelect</a>
</blockquote>
<form class="layui-form" action="" style="padding:20px;">
<div class="layui-form-item">
<label class="layui-form-label">颜色选择器</label>
<div class="layui-input-inline">
<input type="hidden" name="test_color" value="#1aa094">
<span class="layui-btn layui-btn-primary test-select-color" style="padding:0 12px;min-width:45px;background-color: #1aa094;"></span>
</div>
</div>
</form>
<pre class="layui-code">
$(function () {
$('.paigusu').paigusu({
color: '#1926dc',//初始色 支持两种配置方案
}, function (event, obj) {
console.log(event);
console.log(obj);
$(event).css('color', '#' + obj.hex)
});
});
</pre>
</div>
</div>
<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
$(function () {
$('.test-select-color').paigusu({
color: '#1aa094',//初始色 支持两种配置方案
}, function (event, obj) {
console.log(event);
console.log(obj);
$(event).css('background-color', '#' + obj.hex);
$('input[name="test_color"]').val('#' + obj.hex);
});
});
</script>