diff options
Diffstat (limited to 'static/development-bundle/demos/slider/colorpicker.html')
-rw-r--r-- | static/development-bundle/demos/slider/colorpicker.html | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/static/development-bundle/demos/slider/colorpicker.html b/static/development-bundle/demos/slider/colorpicker.html new file mode 100644 index 0000000..0f7c264 --- /dev/null +++ b/static/development-bundle/demos/slider/colorpicker.html | |||
@@ -0,0 +1,92 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Slider - Colorpicker</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/ui.slider.js"></script> | ||
9 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
10 | <style type="text/css"> | ||
11 | #red, #green, #blue { | ||
12 | float: left; | ||
13 | clear: left; | ||
14 | width: 300px; | ||
15 | margin: 15px; | ||
16 | } | ||
17 | #swatch { | ||
18 | width: 120px; | ||
19 | height: 100px; | ||
20 | margin-top: 18px; | ||
21 | margin-left: 350px; | ||
22 | background-image: none; | ||
23 | } | ||
24 | #red .ui-slider-range { background: #ef2929; } | ||
25 | #red .ui-slider-handle { border-color: #ef2929; } | ||
26 | #green .ui-slider-range { background: #8ae234; } | ||
27 | #green .ui-slider-handle { border-color: #8ae234; } | ||
28 | #blue .ui-slider-range { background: #729fcf; } | ||
29 | #blue .ui-slider-handle { border-color: #729fcf; } | ||
30 | #demo-frame > div.demo { padding: 10px !important; }; | ||
31 | </style> | ||
32 | <script type="text/javascript"> | ||
33 | function hexFromRGB (r, g, b) { | ||
34 | var hex = [ | ||
35 | r.toString(16), | ||
36 | g.toString(16), | ||
37 | b.toString(16) | ||
38 | ]; | ||
39 | $.each(hex, function (nr, val) { | ||
40 | if (val.length == 1) { | ||
41 | hex[nr] = '0' + val; | ||
42 | } | ||
43 | }); | ||
44 | return hex.join('').toUpperCase(); | ||
45 | } | ||
46 | function refreshSwatch() { | ||
47 | var red = $("#red").slider("value") | ||
48 | ,green = $("#green").slider("value") | ||
49 | ,blue = $("#blue").slider("value") | ||
50 | ,hex = hexFromRGB(red, green, blue); | ||
51 | $("#swatch").css("background-color", "#" + hex); | ||
52 | } | ||
53 | $(function() { | ||
54 | $("#red, #green, #blue").slider({ | ||
55 | orientation: 'horizontal', | ||
56 | range: "min", | ||
57 | max: 255, | ||
58 | value: 127, | ||
59 | slide: refreshSwatch, | ||
60 | change: refreshSwatch | ||
61 | }); | ||
62 | $("#red").slider("value", 255); | ||
63 | $("#green").slider("value", 140); | ||
64 | $("#blue").slider("value", 60); | ||
65 | }); | ||
66 | </script> | ||
67 | </head> | ||
68 | <body class="ui-widget-content" style="border:0;"> | ||
69 | |||
70 | <div class="demo"> | ||
71 | |||
72 | <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> | ||
73 | <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> | ||
74 | Simple Colorpicker | ||
75 | </p> | ||
76 | |||
77 | <div id="red"></div> | ||
78 | <div id="green"></div> | ||
79 | <div id="blue"></div> | ||
80 | |||
81 | <div id="swatch" class="ui-widget-content ui-corner-all"></div> | ||
82 | |||
83 | </div><!-- End demo --> | ||
84 | |||
85 | <div class="demo-description" style="clear:left;"> | ||
86 | |||
87 | <p>Combine three sliders to create a simple RGB colorpicker.</p> | ||
88 | |||
89 | </div><!-- End demo-description --> | ||
90 | |||
91 | </body> | ||
92 | </html> | ||