root/other-projects/tipple-android/i-greenstone-server-files/greenstone/webapps/greenstone3/interfaces/default/js/jquery-ui-1.8.15/demos/slider/colorpicker.html @ 26899

Revision 26899, 2.5 KB (checked in by davidb, 7 years ago)

Tipple reborn after Chris's Summer of Code 2013

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