root/trac/hacks/marketplugin/0.9/slider/rgbdemo.html

Revision 56 (checked in by stevegt, 6 years ago)

import slider 1.02

Line 
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(r, g, b) {
150         r.setValue(r);
151         g.setValue(g);
152         b.setValue(b);
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>
Note: See TracBrowser for help on using the browser.