JQuery 简单颜色选择器 - 用作背景颜色选择器

Question

我正在尝试使用 jQuery 简单颜色选择器 select 并更改背景颜色。我是 HTML 写作的新手，我发现似乎没有任何东西可以帮助我使用这种特定类型的颜色选择器。我已经尝试过许多不同的颜色选择器，但不确定如何让背景和显示框一起响应。

https://jqueryui.com/slider/#colorpicker.

我使用的代码来自以下网站。

<!doctype html>
<html lang='en'>
<head>
    <!-- Source  https://jqueryui.com/slider/#colorpicker, retrieved Feb 2018 
            added missing 'https:' to line 7
            removed local call to /resources/demos/style.css line 8-->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>jQuery UI Slider - Colorpicker</title>
    <link rel='stylesheet' href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'>
    <style>
        #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; }
    </style>

    <script src='https://code.jquery.com/jquery-1.12.4.js'></script>
    <script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'></script>
    <script>
        $( function() {
            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 );
            }
            $( '#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>

<class='ui-widget-content' style='border:0;'>
    <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>




</body>
</html>

Answer 1

要实现这一点，您只需在 refreshSwatch() 函数中将 #swatch 替换为 body：

$(function() {
          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);  <-- replace this
              $('body').css('background-color', '#' + hex);     // <-- with this
          }
          $('#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);
        });

<!doctype html>
<html lang='en'>

  <head>
    <!-- Source  https://jqueryui.com/slider/#colorpicker, retrieved Feb 2018 
            added missing 'https:' to line 7
            removed local call to /resources/demos/style.css line 8-->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>jQuery UI Slider - Colorpicker</title>
    <link rel='stylesheet' href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'>
    <style>
      #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;
      }

    </style>

    <script src='https://code.jquery.com/jquery-1.12.4.js'></script>
    <script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'></script>

  </head>

  <class='ui-widget-content' style='border:0;'>
    <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>




    </body>

</html>

JQuery 简单颜色选择器 - 用作背景颜色选择器

J Query Simple Color Picker - use as background color selector

html

css

jquery-plugins

background-color