topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

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)
                  ];
                  .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;">
  
  <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>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(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.