Как я могу изменить цвет с помощью кнопки? - PullRequest
Новая
       0

Как я могу изменить цвет с помощью кнопки?

0 голосов
/ 21 октября 2019

Это средство выбора цвета для начальной загрузки. Я хочу использовать кнопку внутри div, когда я нажимаю кнопку, она показывает цветовую диаграмму и меняет цвет фона div. Как я могу это сделать? 

    <div class="row">
                <div class=" col-sm-4   border  border-primary  picker">
             <!--    add   a  button here -->
               <button class=" btn btn-primary"> clolor </button>
                 <h4> colopicker</h4>
                </div>
                <div class=" col-sm-8">
                </div>
           </div>
        </div>
        <script src="js/jquery-3.1.1.min.js"></script>
        <script src="src/colorPick.js"></script>
       <script>
            $(".picker").colorPick({
                'initialColor': 'onColorSelected',
                'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
                'onColorSelected': function() {
                    console.log("The user has selected the color: " + this.color)
                    this.element.css({
                        'backgroundColor': this.color
                    });
                }
            });
        </script>

Ответы [ 3 ]

0 голосов
/ 21 октября 2019

проверить, рабочий пример вашего кода

https://codepen.io/de-co/pen/xxxgKby

<script src="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.js"></script>
<link href="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.css" rel="stylesheet" type="text/css">
  <div class="row">
            <div class=" col-sm-4   border  border-primary  picker">
         <!--    add   a  button here -->
              <Button >colopicker</Button>
             <h4> colopicker</h4>
            </div>
            <div class=" col-sm-8">
            </div>
       </div>
    </div>

   <script>
     $('button').click(function(){

        $(".picker").colorPick({
            'initialColor': 'onColorSelected',
            'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
            'onColorSelected': function() {
                console.log("The user has selected the color: " + this.color)
               $('button').css({
                    'backgroundColor': this.color
                });
            }
        });
         });
    </script>
0 голосов
/ 21 октября 2019 
 <html>
   <head>
      <link rel="stylesheet" href="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.css">
   </head>
   <body>
   <div class="row">
      <div class=" col-sm-4   border  border-primary ">
         <button class=" btn btn-primary picker"> clolor </button>
         <h4> colopicker</h4>
      </div>
      <div class=" col-sm-8 show_color">
        Show color
      </div>
   </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.js"></script>
    <script>
    $( document ).ready(function() {
        $(".picker").colorPick({
            'initialColor': 'onColorSelected',
            'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
            'onColorSelected': function() {
                console.log("The user has selected the color: " + this.color);
                /*this.element.css({
                    'backgroundColor': this.color
                });*/
                $('.show_color').css('backgroundColor',this.color);
            }
        });
    });
    </script>
   </body>
</html>

Я добавил document.ready в коде и ссылку CSS для цветовой палитры согласно плагину colorpick.js https://www.jqueryscript.net/other/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js.html

Метод ready () используется для созданияфункция доступна после загрузки документа. Какой бы код вы ни написали в методе $ (document) .ready (), он будет запущен, когда DOM страницы будет готов выполнить код JavaScript.

0 голосов
/ 21 октября 2019

Просто добавьте 1 кнопку в div и вызовите событие нажатия кнопки, чтобы отобразить диаграмму цвета. Вот образец. Надеюсь на помощь, дружище :)) 

<div class="row">
            <div class=" col-sm-4   border  border-primary  picker">
            <!--    add   a  button here -->
                <input type="button" id="btnShow" value="Choose color">
                <h4> colopicker</h4>
            </div>
            <div class=" col-sm-8">
            </div>
    </div>

$(document).ready(function(){

    $('#btnShow').on('click', function(){
        $(".picker").colorPick({
                'initialColor': 'onColorSelected',
                'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
                'onColorSelected': function() {
                    console.log("The user has selected the color: " + this.color)
                    this.element.css({
                        'backgroundColor': this.color
                    });
                }
            });
    });

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...