/
example.html
86 lines (84 loc) · 4.23 KB
/
example.html
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
<!DOCTYPE html>
<html>
<head>
<title>SmallColorPicker Example</title>
<link rel="stylesheet/less" type="text/css" href="less/circle-picker.less" />
<link rel="stylesheet/less" type="text/css" href="less/color-buttons.less" />
<script src="lib/jquery/jquery-2.0.0.min.js"></script>
<script src="lib/less/less-1.3.3.min.js"></script>
<script src="js/color.js"></script>
<script src="js/transform2d.js"></script>
<script src="js/circle-picker.js"></script>
<script src="js/circle-picker.jquery.js"></script>
<style>
body {
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fafafa;
}
#buttons {
margin-top: 10px;
}
</style>
<script>
$(function() {
$("#color-selector-box").smallColorPicker({
placement: {
position: "static",
popup: false
},
colors: {
colorOld: "#990e8d",
colorNew: "#6d1f7a"
},
behavior: {
hideOnSelect: false
},
events: {
ok: function(color) {
console.log("ok", color);
}
}
});
$(".color-btn").smallColorPicker({ });
});
</script>
</head>
<body>
<div>Here's the color picker:</div>
<div id="color-selector-box"></div>
<div id="buttons">
<div>
<div class="color-btn color-btn-fixed color-btn-square"><b style="background-color: #990e8d;"></b>#990e8d</div>
<div class="color-btn color-btn-fixed color-btn-vertical"><b style="background-color: #f0631d;"></b>#f0631d</div>
<div class="color-btn color-btn-fixed color-btn-horizontal"><b style="background-color: #b81221;"></b>#b81221</div>
<div class="color-btn color-btn-fixed color-btn-left"><b style="background-color: #ff66bd;"></b>#ff66bd</div>
<div class="color-btn color-btn-fixed color-btn-right"><b style="background-color: #4154e0;"></b>#4154e0</div>
<div class="color-btn color-btn-fixed color-btn-circle"><b style="background-color: #800080;"></b>#800080</div>
</div>
<div>
<div class="color-btn color-btn-square"><b style="background-color: #990e8d;"></b>#990e8d</div>
<div class="color-btn color-btn-vertical"><b style="background-color: #f0631d;"></b>#f0631d</div>
<div class="color-btn color-btn-horizontal"><b style="background-color: #b81221;"></b>#b81221</div>
<div class="color-btn color-btn-left"><b style="background-color: #ff66bd;"></b>#ff66bd</div>
<div class="color-btn color-btn-right"><b style="background-color: #4154e0;"></b>#4154e0</div>
<div class="color-btn color-btn-circle"><b style="background-color: #800080;"></b>#800080</div>
</div>
<div>
<div class="color-btn color-btn-square"><b style="background-color: #990e8d;"></b>vio</div>
<div class="color-btn color-btn-vertical"><b style="background-color: #f0631d;"></b>org</div>
<div class="color-btn color-btn-horizontal"><b style="background-color: #b81221;"></b>red</div>
<div class="color-btn color-btn-left"><b style="background-color: #ff66bd;"></b>pink</div>
<div class="color-btn color-btn-right"><b style="background-color: #4154e0;"></b>blue</div>
<div class="color-btn color-btn-circle"><b style="background-color: #800080;"></b>pur</div>
</div>
<div>
<div class="color-btn color-btn-square"><b style="background-color: #990e8d;"></b>please select a color here</div>
<div class="color-btn color-btn-vertical"><b style="background-color: #f0631d;"></b>or choose your favorite color with me</div>
<div class="color-btn color-btn-horizontal"><b style="background-color: #b81221;"></b>click also me</div>
<div class="color-btn color-btn-left"><b style="background-color: #ff66bd;"></b>this button is pretty too</div>
<div class="color-btn color-btn-right"><b style="background-color: #4154e0;"></b>and more buttons</div>
<div class="color-btn color-btn-circle"><b style="background-color: #800080;"></b>yet more buttons</div>
</div>
</div>
</body>
</html>