1 | $(function() { |
---|
2 | $('.colorpicker').colorPicker(); |
---|
3 | }); |
---|
4 | |
---|
5 | jQuery.fn.colorPicker = function() { |
---|
6 | $(this).each(function() { |
---|
7 | var colbox, f; |
---|
8 | var colbox = $('#jquery-colorpicker')[0]; |
---|
9 | |
---|
10 | if (colbox == undefined) { |
---|
11 | colbox = document.createElement('div'); |
---|
12 | colbox.id = 'jquery-colorpicker'; |
---|
13 | colbox.linkedto = null; |
---|
14 | |
---|
15 | $(colbox).css({border: '1px solid #000', width: '195px', background: '#fff', position: 'absolute'}); |
---|
16 | $(colbox).css({display: 'none'}); |
---|
17 | $('body').append(colbox); |
---|
18 | } |
---|
19 | f = $.farbtastic(colbox); |
---|
20 | f.linkTo(this); |
---|
21 | |
---|
22 | var handler = $(document.createElement('img')); |
---|
23 | handler.attr('src','images/picker.png'); |
---|
24 | handler.attr('alt',''); |
---|
25 | |
---|
26 | var span = $(document.createElement('span')); |
---|
27 | |
---|
28 | if ($(this).css('position') == 'absolute') { |
---|
29 | span.css('position','absolute'); |
---|
30 | span.css('top',$(this).css('top')); |
---|
31 | span.css('left',$(this).css('left')); |
---|
32 | $(this).css('position','static'); |
---|
33 | } else { |
---|
34 | span.css('position','relative'); |
---|
35 | } |
---|
36 | span.css('display','block'); |
---|
37 | |
---|
38 | /*ligne supprimée car elle ne fait pas le calcul |
---|
39 | du width de l'input et ça fout la merde */ |
---|
40 | //span.css('width',($(this).width()+12)+'px'); |
---|
41 | span.css('padding','0 5px 0 0'); |
---|
42 | $(this).wrap(span); |
---|
43 | $(this).after(handler); |
---|
44 | |
---|
45 | var offset = $(this).offset(); |
---|
46 | handler.css({ |
---|
47 | position: 'absolute', |
---|
48 | top: 3, |
---|
49 | /* la largeur du span n'étant pas calculée |
---|
50 | right: 0 crée un affichage pourri. On vire. */ |
---|
51 | //right: 0 |
---|
52 | }); |
---|
53 | |
---|
54 | handler.css({cursor: 'default'}); |
---|
55 | |
---|
56 | var This = this; |
---|
57 | handler.click(function() { |
---|
58 | if ($(colbox).css('display') == 'none' || this != colbox.linkedto) { |
---|
59 | f.linkTo(This); |
---|
60 | This.focus(); |
---|
61 | var offset = $(This).offset(); |
---|
62 | $(colbox).css({ |
---|
63 | zIndex: 1000, |
---|
64 | top: offset.top + $(this).height() + 5, |
---|
65 | left: offset.left |
---|
66 | }); |
---|
67 | if (document.all) { $('select').hide(); } |
---|
68 | $(colbox).show(); |
---|
69 | colbox.linkedto = this; |
---|
70 | |
---|
71 | } else { |
---|
72 | $(colbox).hide(); |
---|
73 | if (document.all) { $('select').show(); } |
---|
74 | colbox.linkedto = null; |
---|
75 | } |
---|
76 | }); |
---|
77 | $(this).blur(function() { |
---|
78 | $(colbox).hide(); |
---|
79 | if (document.all) { $('select').show(); } |
---|
80 | }); |
---|
81 | }); |
---|
82 | return this; |
---|
83 | }; |
---|