lib-jquery-style-custom-development-bundle-demos-slider-colorpicker.htm / htm
<!doctype html> <html lang="en"> <head> <title>jQuery UI Slider - Colorpicker</title> <link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="ui/ui.core.js"></script> <script type="text/javascript" src="ui/ui.slider.js"></script> <link type="text/css" href="lib-jquery-style-custom-development-bundle-demos-demos.css" rel="stylesheet" /> <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; } #demo-frame > div.demo { padding: 10px !important; }; </style> <script type="text/javascript"> function hexFromRGB (r, g, b) { var hex = [ r.toString(16), g.toString(16), b.toString(16) ]; </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>Combine three sliders to create a simple RGB colorpicker.</p> </div><!-- End demo-description --> </body> </html>
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.