J查询简单颜色选择器-用作背景颜色选择器

问题描述 投票：1回答：1

我正在尝试使用jQuery简单颜色选择器来选择和更改背景颜色。我是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>
html css jquery-plugins background-color
1个回答
0
投票

为了实现，您只需要在#swatch功能中将body替换为refreshSwatch()：

$(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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.