4 */ |
4 */ |
5 background_color: function (r, g, b, a) { |
5 background_color: function (r, g, b, a) { |
6 if (a == undefined) |
6 if (a == undefined) |
7 a = 1.0; |
7 a = 1.0; |
8 |
8 |
9 this.css('background', 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')'); |
9 this.css('background', 'rgba(' + (r * 255) + ', ' + (g * 255) + ', ' + (b * 255) + ', ' + a + ')'); |
10 }, |
10 }, |
11 }); |
11 }); |
12 |
|
13 function color_slider_slide (event, ui) { |
|
14 // $(this).css('background', 'rgba(0, 0, 0, ' + (ui.value / 255) + ')'); |
|
15 |
|
16 $('#color').background_color( |
|
17 $('#slider-r').slider('value'), |
|
18 $('#slider-g').slider('value'), |
|
19 $('#slider-b').slider('value') |
|
20 ); |
|
21 |
|
22 $(['r', 'g', 'b']).each(function (i, c) { |
|
23 var value = $('#slider-' + c).slider('value'); |
|
24 var input = $('#' + c); |
|
25 var color = {r: 0, g: 0, b: 0}; |
|
26 |
|
27 color[c] = 255; |
|
28 |
|
29 input.val(value.toString(16)); |
|
30 input.background_color(color.r, color.g, color.b, value / 255); |
|
31 }); |
|
32 } |
|
33 |
|
34 function color_slider_input (input, c) { |
|
35 var value; |
|
36 |
|
37 if (input.val()) |
|
38 value = parseInt(input.val(), 16); |
|
39 else |
|
40 value = 0; |
|
41 |
|
42 $('#slider-' + c).slider('value', value); |
|
43 } |
|
44 |
|
45 $(function () { |
|
46 $('.color-slider').slider({ |
|
47 orientation: 'horizontal', |
|
48 range: 'min', |
|
49 min: 0, |
|
50 max: 255, |
|
51 |
|
52 slide: color_slider_slide, |
|
53 }); |
|
54 |
|
55 $(['r', 'g', 'b']).each(function (i, c) { |
|
56 var input = $('#' + c); |
|
57 |
|
58 // bind |
|
59 input.change(function () { color_slider_input($(this), this.id); }); |
|
60 |
|
61 // initialize |
|
62 color_slider_input(input, c); |
|
63 }); |
|
64 }); |
|