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
| /**
| * bootstrap-colorpalette.js
| * (c) 2013~ Jiung Kang
| * Licensed under the Apache License, Version 2.0 (the "License");
| */
|
| (function($) {
| "use strict";
| var aaColor = [
| ['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#F7F7F7', '#FFFFFF'],
| ['#FF0000', '#FF9C00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#9C00FF', '#FF00FF'],
| ['#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE'],
| ['#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD'],
| ['#E76363', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5'],
| ['#CE0000', '#E79439', '#EFC631', '#6BA54A', '#4A7B8C', '#3984C6', '#634AA5', '#A54A7B'],
| ['#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842'],
| ['#630000', '#7B3900', '#846300', '#295218', '#083139', '#003163', '#21104A', '#4A1031']
| ];
|
| var createPaletteElement = function(element, _aaColor) {
| element.addClass('bootstrap-colorpalette');
| var aHTML = [];
| $.each(_aaColor, function(i, aColor){
| aHTML.push('<div>');
| $.each(aColor, function(i, sColor) {
| var sButton = ['<button type="button" class="btn-color" style="background-color:', sColor,
| '" data-value="', sColor,
| '" title="', sColor,
| '"></button>'].join('');
| aHTML.push(sButton);
| });
| aHTML.push('</div>');
| });
| element.html(aHTML.join(''));
| };
|
| var attachEvent = function(palette) {
| palette.element.on('click', function(e) {
| var welTarget = $(e.target),
| welBtn = welTarget.closest('.btn-color');
|
| if (!welBtn[0]) { return; }
|
| var value = welBtn.attr('data-value');
| palette.value = value;
| palette.element.trigger({
| type: 'selectColor',
| color: value,
| element: palette.element
| });
| });
| };
|
| var Palette = function(element, options) {
| this.element = element;
| createPaletteElement(element, options && options.colors || aaColor);
| attachEvent(this);
| };
|
| $.fn.extend({
| colorPalette : function(options) {
| this.each(function () {
| var $this = $(this),
| data = $this.data('colorpalette');
| if (!data) {
| $this.data('colorpalette', new Palette($this, options));
| }
| });
| return this;
| }
| });
| })(jQuery);
|
|
