|
0
|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
|
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
|
3
|
|
|
4 <html>
|
|
|
5 <head>
|
|
|
6 <title></title>
|
|
|
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
8 <link type="text/css" rel="StyleSheet" href="css/bluecurve/bluecurve.css" />
|
|
|
9 <style type="text/css">
|
|
|
10
|
|
|
11 body, html {
|
|
|
12 overflow: hidden;
|
|
|
13 margin: 0;
|
|
|
14 border: 0;
|
|
|
15 padding: 0;
|
|
|
16 width: 100%;
|
|
|
17 height: 100%;
|
|
|
18 background: rgb(230,230,230);
|
|
|
19 font: MessageBox;
|
|
|
20 font: Message-Box;
|
|
|
21 }
|
|
|
22
|
|
|
23 .color-picker {
|
|
|
24 background: transparent;
|
|
|
25 width: 100%;
|
|
|
26 height: 100%;
|
|
|
27 }
|
|
|
28
|
|
|
29 .color-picker td {
|
|
|
30 padding: 1px;
|
|
|
31 }
|
|
|
32
|
|
|
33 .dynamic-slider-control {
|
|
|
34 width: auto;
|
|
|
35 height: 20px;
|
|
|
36 margin: 0;
|
|
|
37 }
|
|
|
38
|
|
|
39 .color-picker input {
|
|
|
40 text-align: right;
|
|
|
41 width: 30px;
|
|
|
42 }
|
|
|
43 .color-picker td,
|
|
|
44 .color-picker input {
|
|
|
45 font: Message-Box;
|
|
|
46 font: MessageBox;
|
|
|
47 }
|
|
|
48
|
|
|
49 #color-result {
|
|
|
50 width: 60px;
|
|
|
51 border: 1px solid rgb(90,97,90);
|
|
|
52 background-color: black;
|
|
|
53 }
|
|
|
54
|
|
|
55 </style>
|
|
|
56
|
|
|
57 <script type="text/javascript" src="js/range.js"></script>
|
|
|
58 <script type="text/javascript" src="js/timer.js"></script>
|
|
|
59 <script type="text/javascript" src="js/slider.js"></script>
|
|
|
60 </head>
|
|
|
61 <body>
|
|
|
62
|
|
|
63 <table class="color-picker" cellspacing="2" cellpadding="0" border="0">
|
|
|
64 <col style="width: 40px" />
|
|
|
65 <col style="" />
|
|
|
66 <col style="width: 10px" />
|
|
|
67 <col style="width: 50px" />
|
|
|
68 <tr>
|
|
|
69 <td><label for="red-slider">Red:</label></td>
|
|
|
70 <td>
|
|
|
71 <div class="slider" id="red-slider" tabIndex="1">
|
|
|
72 <input class="slider-input" id="red-slider-input" />
|
|
|
73 </div>
|
|
|
74 </td>
|
|
|
75 <td><input id="red-input" maxlength="3" tabIndex="2" /></td>
|
|
|
76 <td rowspan="3" id="color-result"></td>
|
|
|
77 </tr>
|
|
|
78 <tr>
|
|
|
79 <td><label for="green-slider">Green:</label></td>
|
|
|
80 <td>
|
|
|
81 <div class="slider" id="green-slider" tabIndex="3">
|
|
|
82 <input class="slider-input" id="green-slider-input" />
|
|
|
83 </div>
|
|
|
84 </td>
|
|
|
85 <td><input id="green-input" maxlength="3" tabIndex="4" /></td>
|
|
|
86 </tr>
|
|
|
87 <tr>
|
|
|
88 <td><label for="blue-slider">Blue:</label></td>
|
|
|
89 <td>
|
|
|
90 <div class="slider" id="blue-slider" tabIndex="5">
|
|
|
91 <input class="slider-input" id="blue-slider-input" />
|
|
|
92 </div>
|
|
|
93 </td>
|
|
|
94 <td><input id="blue-input" maxlength="3" tabIndex="6" /></td>
|
|
|
95 </tr>
|
|
|
96 </table>
|
|
|
97
|
|
|
98
|
|
|
99
|
|
|
100
|
|
|
101
|
|
|
102
|
|
|
103
|
|
|
104
|
|
|
105 <script type="text/javascript">
|
|
|
106
|
|
|
107 // init code
|
|
|
108 var r = new Slider(document.getElementById("red-slider"), document.getElementById("red-slider-input"));
|
|
|
109 r.setMaximum(255);
|
|
|
110 var g = new Slider(document.getElementById("green-slider"), document.getElementById("green-slider-input"));
|
|
|
111 g.setMaximum(255);
|
|
|
112 var b = new Slider(document.getElementById("blue-slider"), document.getElementById("blue-slider-input"));
|
|
|
113 b.setMaximum(255);
|
|
|
114
|
|
|
115 var ri = document.getElementById("red-input");
|
|
|
116 ri.onchange = function () {
|
|
|
117 r.setValue(parseInt(this.value));
|
|
|
118 };
|
|
|
119
|
|
|
120 var gi = document.getElementById("green-input");
|
|
|
121 gi.onchange = function () {
|
|
|
122 g.setValue(parseInt(this.value));
|
|
|
123 };
|
|
|
124
|
|
|
125 var bi = document.getElementById("blue-input");
|
|
|
126 bi.onchange = function () {
|
|
|
127 b.setValue(parseInt(this.value));
|
|
|
128 };
|
|
|
129
|
|
|
130 r.onchange = g.onchange = b.onchange = function () {
|
|
|
131 var cr = document.getElementById("color-result");
|
|
|
132 cr.style.backgroundColor = "rgb(" + r.getValue() + "," +
|
|
|
133 g.getValue() + "," +
|
|
|
134 b.getValue() + ")";
|
|
|
135 ri.value = r.getValue();
|
|
|
136 gi.value = g.getValue();
|
|
|
137 bi.value = b.getValue();
|
|
|
138
|
|
|
139 if (typeof window.onchange == "function")
|
|
|
140 window.onchange();
|
|
|
141 };
|
|
|
142
|
|
|
143 r.setValue(128);
|
|
|
144 g.setValue(128);
|
|
|
145 b.setValue(128);
|
|
|
146
|
|
|
147 // end init
|
|
|
148
|
|
|
149 function setRgb(nRed, nGreen, nBlue) {
|
|
|
150 r.setValue(nRed);
|
|
|
151 g.setValue(nGreen);
|
|
|
152 b.setValue(nBlue);
|
|
|
153 }
|
|
|
154
|
|
|
155 function getRgb() {
|
|
|
156 return {
|
|
|
157 r: r.getValue(),
|
|
|
158 g: g.getValue(),
|
|
|
159 b: b.getValue()
|
|
|
160 };
|
|
|
161 }
|
|
|
162
|
|
|
163 function fixSize() {
|
|
|
164 r.recalculate();
|
|
|
165 g.recalculate();
|
|
|
166 b.recalculate();
|
|
|
167 }
|
|
|
168
|
|
|
169 window.onresize = fixSize;
|
|
|
170
|
|
|
171 fixSize();
|
|
|
172
|
|
|
173
|
|
|
174 </script>
|
|
|
175
|
|
|
176
|
|
|
177 </body>
|
|
|
178 </html>
|
