third-party/jquery-ui-1.10.2/demos/slider/colorpicker.html

   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.9.1.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         </style>
  34         <script>
  35         function hexFromRGB(r, g, b) {
  36                 var hex = [
  37                         r.toString( 16 ),
  38                         g.toString( 16 ),
  39                         b.toString( 16 )
  40                 ];
  41                 $.each( hex, function( nr, val ) {
  42                         if ( val.length === 1 ) {
  43                                 hex[ nr ] = "0" + val;
  44                         }
  45                 });
  46                 return hex.join( "" ).toUpperCase();
  47         }
  48         function refreshSwatch() {
  49                 var red = $( "#red" ).slider( "value" ),
  50                         green = $( "#green" ).slider( "value" ),
  51                         blue = $( "#blue" ).slider( "value" ),
  52                         hex = hexFromRGB( red, green, blue );
  53                 $( "#swatch" ).css( "background-color", "#" + hex );
  54         }
  55         $(function() {
  56                 $( "#red, #green, #blue" ).slider({
  57                         orientation: "horizontal",
  58                         range: "min",
  59                         max: 255,
  60                         value: 127,
  61                         slide: refreshSwatch,
  62                         change: refreshSwatch
  63                 });
  64                 $( "#red" ).slider( "value", 255 );
  65                 $( "#green" ).slider( "value", 140 );
  66                 $( "#blue" ).slider( "value", 60 );
  67         });
  68         </script>
  69 </head>
  70 <body class="ui-widget-content" style="border:0;">
  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 class="demo-description">
  84 <p>Combine three sliders to create a simple RGB colorpicker.</p>
  85 </div>
  86 </body>
  87 </html>