PHPXRef 0.7 : Drupal 6 (yi-drupal) : /sites/all/libraries/jquery.ui/demos/slider/colorpicker.html source

[Summary view] [Print] [Text view]
   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Slider - Colorpicker</title>
   5      <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
   6      <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
   7      <script type="text/javascript" src="../../ui/ui.core.js"></script>
   8      <script type="text/javascript" src="../../ui/ui.slider.js"></script>
   9      <link type="text/css" href="../demos.css" rel="stylesheet" />
  10      <style type="text/css">
  11      #red, #green, #blue {

  12          float: left;
  13          clear: left;
  14          width: 300px;
  15          margin: 15px;
  16      }
  17      #swatch {

  18          width: 120px;
  19          height: 100px;
  20          margin-top: 18px;
  21          margin-left: 350px;
  22          background-image: none;
  23      }
  24      #red .ui-slider-range { background: #ef2929; }

  25      #red .ui-slider-handle { border-color: #ef2929; }

  26      #green .ui-slider-range { background: #8ae234; }

  27      #green .ui-slider-handle { border-color: #8ae234; }

  28      #blue .ui-slider-range { background: #729fcf; }

  29      #blue .ui-slider-handle { border-color: #729fcf; }

  30      #demo-frame > div.demo { padding: 10px !important; };

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

/sites/all/libraries/jquery.ui/demos/slider/ -> colorpicker.html (source)
