J Query Simple Color Picker - использовать в качестве селектора цвета фона - PullRequest
Новая
       33

J Query Simple Color Picker - использовать в качестве селектора цвета фона

2 голосов
/ 28 января 2020

Я пытаюсь использовать простой инструмент выбора цвета jQuery, чтобы выбрать и изменить цвет фона. Я новичок в HTML письме, и ничто, что я нашел, кажется, не помогает мне с этим определенным c палитрой цветов. Я экспериментировал со многими различными палитрами цветов, но не уверен, как заставить фон реагировать так же, как и окно дисплея.

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

Код i использовали с сайта ниже. 

<!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>

1 Ответ

1 голос
/ 28 января 2020

Для этого вам нужно только заменить #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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...