← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to lib/jquery/jquery.ui-1.6rc2/tests/visual/colorpicker.html

  • Committer: V. Keith Hughitt
  • Date: 2009-03-26 19:20:57 UTC
  • Revision ID: hughitt1@kore-20090326192057-u0x8rf8sf5lmmnwh
nightly build 03-26-2009: Using alpha-channel JPEG 2000 dataset

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/jquery/jquery.ui-1.6rc2/tests/visual/colorpicker.html
1
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
 
<head>
4
 
 
5
 
    <title>ColorPicker</title>
6
 
 
7
 
<style type="text/css" media="screen">
8
 
 
9
 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
10
 
        margin:0;
11
 
        padding:0;
12
 
}
13
 
table {
14
 
        border-collapse:collapse;
15
 
        border-spacing:0;
16
 
}
17
 
fieldset,img {
18
 
        border:0;
19
 
}
20
 
address,caption,cite,code,dfn,em,strong,th,var {
21
 
        font-style:normal;
22
 
        font-weight:normal;
23
 
}
24
 
ol,ul {
25
 
        list-style:none;
26
 
}
27
 
caption,th {
28
 
        text-align:left;
29
 
}
30
 
h1,h2,h3,h4,h5,h6 {
31
 
        font-size:100%;
32
 
        font-weight:normal;
33
 
}
34
 
q:before,q:after {
35
 
        content:'';
36
 
}
37
 
abbr,acronym { border:0;
38
 
}
39
 
html, body {
40
 
        background-color: #fff;
41
 
        font-family: Arial, Helvetica, sans-serif;
42
 
        font-size: 12px;
43
 
        line-height: 18px;
44
 
        color: #52697E;
45
 
}
46
 
body {
47
 
        text-align: center;
48
 
        overflow: auto;
49
 
}
50
 
.wrapper {
51
 
        width: 700px;
52
 
        margin: 0 auto;
53
 
        text-align: left;
54
 
}
55
 
h1 {
56
 
        font-size: 21px;
57
 
        height: 47px;
58
 
        line-height: 47px;
59
 
        text-transform: uppercase;
60
 
}
61
 
.navigationTabs {
62
 
        height: 23px;
63
 
        line-height: 23px;
64
 
        border-bottom: 1px solid #ccc;
65
 
}
66
 
.navigationTabs li {
67
 
        float: left;
68
 
        height: 23px;
69
 
        line-height: 23px;
70
 
        padding-right: 3px;
71
 
}
72
 
.navigationTabs li a{
73
 
        float: left;
74
 
        dispaly: block;
75
 
        height: 23px;
76
 
        line-height: 23px;
77
 
        padding: 0 10px;
78
 
        overflow: hidden;
79
 
        color: #52697E;
80
 
        background-color: #eee;
81
 
        position: relative;
82
 
        text-decoration: none;
83
 
}
84
 
.navigationTabs li a:hover {
85
 
        background-color: #f0f0f0;
86
 
}
87
 
.navigationTabs li a.active {
88
 
        background-color: #fff;
89
 
        border: 1px solid #ccc;
90
 
        border-bottom: 0px solid;
91
 
}
92
 
.tabsContent {
93
 
        border: 1px solid #ccc;
94
 
        border-top: 0px solid;
95
 
        width: 698px;
96
 
        overflow: hidden;
97
 
}
98
 
.tab {
99
 
        padding: 16px;
100
 
        display: block;
101
 
}
102
 
.tab h2 {
103
 
        font-weight: bold;
104
 
        font-size: 16px;
105
 
}
106
 
.tab h3 {
107
 
        font-weight: bold;
108
 
        font-size: 14px;
109
 
        margin-top: 20px;
110
 
}
111
 
.tab p {
112
 
        margin-top: 16px;
113
 
        clear: both;
114
 
}
115
 
.tab ul {
116
 
        margin-top: 16px;
117
 
        list-style: disc;
118
 
}
119
 
.tab li {
120
 
        margin: 10px 0 0 35px;
121
 
}
122
 
.tab a {
123
 
        color: #8FB0CF;
124
 
}
125
 
.tab strong {
126
 
        font-weight: bold;
127
 
}
128
 
.tab pre {
129
 
        font-size: 11px;
130
 
        margin-top: 20px;
131
 
        width: 668px;
132
 
        overflow: auto;
133
 
        clear: both;
134
 
}
135
 
.tab table {
136
 
        width: 100%;
137
 
}
138
 
.tab table td {
139
 
        padding: 6px 10px 6px 0;
140
 
        vertical-align: top;
141
 
}
142
 
.tab dt {
143
 
        margin-top: 16px;
144
 
}
145
 
 
146
 
#colorSelector {
147
 
        position: relative;
148
 
        width: 36px;
149
 
        height: 36px;
150
 
        background: url(../../themes/default/images/select.png);
151
 
}
152
 
#colorSelector div {
153
 
        position: absolute;
154
 
        top: 3px;
155
 
        left: 3px;
156
 
        width: 30px;
157
 
        height: 30px;
158
 
        background: url(../../themes/default/images/select.png) center;
159
 
}
160
 
#colorSelector2 {
161
 
        position: absolute;
162
 
        top: 0;
163
 
        left: 0;
164
 
        width: 36px;
165
 
        height: 36px;
166
 
        background: url(../../themes/default/images/select2.png);
167
 
}
168
 
#colorSelector2 div {
169
 
        position: absolute;
170
 
        top: 4px;
171
 
        left: 4px;
172
 
        width: 28px;
173
 
        height: 28px;
174
 
        background: url(../../themes/default/images/select2.png) center;
175
 
}
176
 
#colorpickerHolder2 {
177
 
        top: 32px;
178
 
        left: 0;
179
 
        width: 356px;
180
 
        height: 0;
181
 
        overflow: hidden;
182
 
        position: absolute;
183
 
}
184
 
#colorpickerHolder2 .ui-colorpicker {
185
 
        background-image: url(../../themes/default/images/custom_background.png);
186
 
        position: absolute;
187
 
        bottom: 0;
188
 
        left: 0;
189
 
}
190
 
#colorpickerHolder2 .ui-colorpicker-hue div {
191
 
        background-image: url(../../themes/default/images/custom_indic.gif);
192
 
}
193
 
#colorpickerHolder2 .ui-colorpicker-hex {
194
 
        background-image: url(../../themes/default/images/custom_hex.png);
195
 
}
196
 
#colorpickerHolder2 .ui-colorpicker-rgb-r {
197
 
        background-image: url(../../themes/default/images/custom_rgb_r.png);
198
 
}
199
 
#colorpickerHolder2 .ui-colorpicker-rgb-g {
200
 
        background-image: url(../../themes/default/images/custom_rgb_g.png);
201
 
}
202
 
#colorpickerHolder2 .ui-colorpicker-rgb-b {
203
 
        background-image: url(../../themes/default/images/custom_rgb_b.png);
204
 
}
205
 
#colorpickerHolder2 .ui-colorpicker-hsb-s {
206
 
        background-image: url(../../themes/default/images/custom_hsb_s.png);
207
 
        display: none;
208
 
}
209
 
#colorpickerHolder2 .ui-colorpicker-hsb-h {
210
 
        background-image: url(../../themes/default/images/custom_hsb_h.png);
211
 
        display: none;
212
 
}
213
 
#colorpickerHolder2 .ui-colorpicker-hsb-b {
214
 
        background-image: url(../../themes/default/images/custom_hsb_b.png);
215
 
        display: none;
216
 
}
217
 
#colorpickerHolder2 .ui-colorpicker-submit {
218
 
        background-image: url(../../themes/default/images/colorpicker_submit.png);
219
 
}
220
 
#colorpickerHolder2 .ui-colorpicker input {
221
 
        color: #778398;
222
 
}
223
 
#customWidget {
224
 
        position: relative;
225
 
        height: 36px;
226
 
}
227
 
 
228
 
 
229
 
</style>
230
 
 
231
 
<link rel="stylesheet" href="../../themes/default/ui.all.css" type="text/css" media="screen" title="no title" charset="utf-8">
232
 
 
233
 
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
234
 
<script type="text/javascript" src="../../ui/ui.core.js"></script>
235
 
<script type="text/javascript" src="../../ui/ui.colorpicker.js"></script>
236
 
 
237
 
<script type="text/javascript">
238
 
 
239
 
$(document).ready(function() {
240
 
 
241
 
        $('#colorpickerHolder').colorpicker({ flat: true });
242
 
        $('#colorpickerHolder2').colorpicker({
243
 
                flat: true,
244
 
                color: '#00ff00',
245
 
                submit: function(e, ui) {
246
 
                        $('#colorSelector2 div').css('backgroundColor', '#' + ui.hex);
247
 
                }
248
 
        });
249
 
        $('#colorpickerHolder2>div').css('position', 'absolute');
250
 
        var widt = false;
251
 
        $('#colorSelector2').bind('click', function() {
252
 
                $('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
253
 
                widt = !widt;
254
 
        });
255
 
        $('#colorpickerField1').colorpicker({
256
 
                submit: function(e, ui) {
257
 
                        $('#colorpickerField1').val(ui.hex);
258
 
                },
259
 
                beforeShow: function (e, ui) {
260
 
                        $(this).colorpicker("setColor", this.value);
261
 
                }
262
 
        })
263
 
        .bind('keyup', function(){
264
 
                $(this).colorpicker("setColor", this.value);
265
 
        });
266
 
        $('#colorSelector').colorpicker({
267
 
                color: '#0000ff',
268
 
                show: function (e, ui) {
269
 
                        $(this).data("colorpicker").picker.fadeIn(500);
270
 
                        return false;
271
 
                },
272
 
                hide: function (e, ui) {
273
 
                        $(this).data("colorpicker").picker.fadeOut(500);
274
 
                        return false;
275
 
                },
276
 
                change: function (e, ui) {
277
 
                        $('#colorSelector div').css('backgroundColor', '#' + ui.hex);
278
 
                }
279
 
        });
280
 
 
281
 
});
282
 
 
283
 
</script>
284
 
 
285
 
 
286
 
</head>
287
 
<body>
288
 
    <div class="wrapper">
289
 
        <h1>Color Picker</h1>
290
 
        <ul class="navigationTabs">
291
 
            <li><a href="#about" rel="about">About</a></li>
292
 
        </ul>
293
 
        <div class="tabsContent">
294
 
            <div class="tab">
295
 
                <h2>About</h2>
296
 
                <p>A simple component to select color in the same way you select color in Adobe Photoshop</p>
297
 
                <h3>Features</h3>
298
 
                <ul>
299
 
                    <li>Flat mode - as element in page</li>
300
 
                    <li>Powerful controls for color selection</li>
301
 
                                        <li>Easy to customize the look by changing some images</li>
302
 
                                        <li>Fits into the viewport</li>
303
 
                </ul>
304
 
                <h3>Examples</h3>
305
 
                <p>Flat mode.</p>
306
 
                <p id="colorpickerHolder">
307
 
                </p>
308
 
                <pre>
309
 
$('#colorpickerHolder').ColorPicker({flat: true});
310
 
                </pre>
311
 
                <p>Custom skin and using flat mode to display the color picker in a custom widget.</p>
312
 
                                <div id="customWidget">
313
 
                                        <div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
314
 
                        <div id="colorpickerHolder2">
315
 
                        </div>
316
 
                                </div>
317
 
 
318
 
                                <p>Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.</p>
319
 
                                <p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
320
 
                                <pre>
321
 
$('#colorpickerField1').ColorPicker({
322
 
        onSubmit: function(hsb, hex, rgb) {
323
 
                $('#colorpickerField1').val(hex);
324
 
        },
325
 
        onBeforeShow: function () {
326
 
                $(this).ColorPickerSetColor(this.value);
327
 
        }
328
 
})
329
 
.bind('keyup', function(){
330
 
        $(this).ColorPickerSetColor(this.value);
331
 
});
332
 
</pre>
333
 
                                <p>Attached to DOMElement and using callbacks to live preview the color and adding animation.</p>
334
 
                                <p>
335
 
                                        <div id="colorSelector"><div style="background-color: #0000ff"></div></div>
336
 
                                </p>
337
 
                                <pre>
338
 
$('#colorSelector').ColorPicker({
339
 
        color: '#0000ff',
340
 
        onShow: function (colpkr) {
341
 
                $(colpkr).fadeIn(500);
342
 
                return false;
343
 
        },
344
 
        onHide: function (colpkr) {
345
 
                $(colpkr).fadeOut(500);
346
 
                return false;
347
 
        },
348
 
        onChange: function (hsb, hex, rgb) {
349
 
                $('#colorSelector div').css('backgroundColor', '#' + hex);
350
 
        }
351
 
});
352
 
</pre>
353
 
            </div>
354
 
        </div>
355
 
    </div>
356
 
</body>
357
 
</html>