Просмотр архива jColor


<?php

<html>
  <head>
    <script type="text/javascript" src="../assets/jquery.js"></script>
    <script type="text/javascript" src="../../jcolor.js"></script>
    <link rel="stylesheet" type="text/css" href="../../jcolor.css">
    <style type="text/css">
      body { font-family: monospace; }
      .color-picker-1-outputs {
        position: absolute;
        bottom: 1em;
        left: 1em;
        color: white;
        text-shadow:  0    1px 0 black,
                      0   -1px 0 black,
                      1px  0   0 black,
                     -1px  0   0 black; }
      .color-picker-2 { position: absolute; bottom: 1em; right: 1em; }
    </style>
  </head>
  <body>
    <div class="color-picker-1"></div>
    <span class="color-picker-1-outputs"></span>
    <div class="color-picker-2"></div>
    <script>
      var color1 = 'hsla(282, 72%, 50%, 1)', color2 = 'rgb(241, 161, 40)';

      // Listen to the 'newcolor' event and use the new color to update things
      // The event is emitted from the color picker DOM element
      $('.color-picker-1').colorpicker({ color: color1 });
      $('.color-picker-1').on('newcolor', function (ev, colorpicker, component, value) {
        // Print some of the arguments that comes with the newcolor event
        $('.color-picker-1-outputs').html(
            'new color: ' + colorpicker.toString('rgba') + ', ' +
            'component: ' + component + ', ' +
            'value: ' + value.toFixed(3));
        // Store the new color in a variable
        color1 = colorpicker.toCssString();
        updateBackground();
      });

      // As a convenience, we can also call .on() directly on the color picker instance.
      // This is the exact same thing as calling $('.color-picker-2').on('newcolor', ...)
      var colorPicker2 = $('.color-picker-2').colorpicker({ color: color2 });
      colorPicker2.on('newcolor', function (ev, colorpicker, component, value) {
        color2 = colorpicker.toCssString();
        updateBackground();
      });

      // Set initial background color
      updateBackground();

      function updateBackground() {
        $('body').css('background', 'linear-gradient(to bottom right, ' + color1 + ', ' + color2 + ')');
      }
    </script>
  </body>
</html>

?>