git://git.onelab.eu / unfold.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
imported the whole jquery-ui package, refreshed with 1.10.2
[unfold.git] / third-party / jquery-ui-1.10.2 / demos / slider / colorpicker.html
diff --git a/third-party/jquery-ui-1.10.2/demos/slider/colorpicker.html b/third-party/jquery-ui-1.10.2/demos/slider/colorpicker.html
new file mode 100644 (file)
index 0000000..e579b0e
--- /dev/null
+++ b/third-party/jquery-ui-1.10.2/demos/slider/colorpicker.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+<head>
+       <meta charset="utf-8">
+       <title>jQuery UI Slider - Colorpicker</title>
+       <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+       <script src="../../jquery-1.9.1.js"></script>
+       <script src="../../ui/jquery.ui.core.js"></script>
+       <script src="../../ui/jquery.ui.widget.js"></script>
+       <script src="../../ui/jquery.ui.mouse.js"></script>
+       <script src="../../ui/jquery.ui.slider.js"></script>
+       <link rel="stylesheet" href="../demos.css">
+       <style>
+       #red, #green, #blue {
+               float: left;
+               clear: left;
+               width: 300px;
+               margin: 15px;
+       }
+       #swatch {
+               width: 120px;
+               height: 100px;
+               margin-top: 18px;
+               margin-left: 350px;
+               background-image: none;
+       }
+       #red .ui-slider-range { background: #ef2929; }
+       #red .ui-slider-handle { border-color: #ef2929; }
+       #green .ui-slider-range { background: #8ae234; }
+       #green .ui-slider-handle { border-color: #8ae234; }
+       #blue .ui-slider-range { background: #729fcf; }
+       #blue .ui-slider-handle { border-color: #729fcf; }
+       </style>
+       <script>
+       function hexFromRGB(r, g, b) {
+               var hex = [
+                       r.toString( 16 ),
+                       g.toString( 16 ),
+                       b.toString( 16 )
+               ];
+               $.each( hex, function( nr, val ) {
+                       if ( val.length === 1 ) {
+                               hex[ nr ] = "0" + val;
+                       }
+               });
+               return hex.join( "" ).toUpperCase();
+       }
+       function refreshSwatch() {
+               var red = $( "#red" ).slider( "value" ),
+                       green = $( "#green" ).slider( "value" ),
+                       blue = $( "#blue" ).slider( "value" ),
+                       hex = hexFromRGB( red, green, blue );
+               $( "#swatch" ).css( "background-color", "#" + hex );
+       }
+       $(function() {
+               $( "#red, #green, #blue" ).slider({
+                       orientation: "horizontal",
+                       range: "min",
+                       max: 255,
+                       value: 127,
+                       slide: refreshSwatch,
+                       change: refreshSwatch
+               });
+               $( "#red" ).slider( "value", 255 );
+               $( "#green" ).slider( "value", 140 );
+               $( "#blue" ).slider( "value", 60 );
+       });
+       </script>
+</head>
+<body class="ui-widget-content" style="border:0;">
+
+<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
+       <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
+       Simple Colorpicker
+</p>
+
+<div id="red"></div>
+<div id="green"></div>
+<div id="blue"></div>
+
+<div id="swatch" class="ui-widget-content ui-corner-all"></div>
+
+<div class="demo-description">
+<p>Combine three sliders to create a simple RGB colorpicker.</p>
+</div>
+</body>
+</html>
myslice (django)