diff options
| author | Richard Worth <rdworth@gmail.com> | 2008-12-31 05:49:49 +0000 |
|---|---|---|
| committer | Richard Worth <rdworth@gmail.com> | 2008-12-31 05:49:49 +0000 |
| commit | ac1866a7b09c6356d2ab25215f6de2bf0ee12803 (patch) | |
| tree | 1bf0de4c29555690179080cde030eacd8627fb4c /demos/slider/colorpicker.html | |
| parent | 69f63a8c6d8182f50b7d24ae1a549df17fb9860a (diff) | |
| download | jquery-ui-ac1866a7b09c6356d2ab25215f6de2bf0ee12803.tar.gz jquery-ui-ac1866a7b09c6356d2ab25215f6de2bf0ee12803.zip | |
demos/slider: Added a simple colorpicker demo
Diffstat (limited to 'demos/slider/colorpicker.html')
| -rw-r--r-- | demos/slider/colorpicker.html | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/demos/slider/colorpicker.html b/demos/slider/colorpicker.html new file mode 100644 index 000000000..1525df634 --- /dev/null +++ b/demos/slider/colorpicker.html @@ -0,0 +1,92 @@ +<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Slider - Colorpicker Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.slider.js"></script> + <style type="text/css"> + #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 type="text/javascript"> + 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({ + 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;"> + +<div class="demo"> + +<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><!-- End demo --> + +<div class="demo-description" style="clear:left;"> + +<p> +This example shows how easy it is to put together three sliders to make a simple RGB colorpicker. +</p> + +</div><!-- End demo-description --> + +</body> +</html> |