2016-09-17 6 views
0

Я создаю веб-редактор графического интерфейса. При этом мне нужно создать переднюю часть набора цветов, например, на прилагаемом изображении. Мне нужно знать, как мне его создать. Так как я новичок в такого рода разработках, я могу подумать о следующих вариантах: 1. Создайте промежутки и сделайте их интерактивными и дайте им цвета фона. 2. используйте некоторый плагин, который генерирует эту функциональность. 3. используйте массив кнопок, каждый с уникальным цветом.Создание цветовой палитры

Мне также нужно знать, есть ли какой-либо онлайн-инструмент или плагин jquery, который генерирует эту функциональность. Любая помощь будет оценена

+0

Привет! Я боюсь, что изображение не прикреплено. –

ответ

0

Я написал подобные вещи в прошлом, вот простой пример, который иллюстрирует один из способов вы можете сделать это:

<!DOCTYPE html> 

<html lang="en"> 

<head> 
    <style type="text/css"> 
     .colorBox   { 
      position:  relative; 
      float:   left; 

      width:   24px; 
      height:   24px; 

      margin:   6px; 
      padding:  0; 

      background:  #FFFFFF; 
      border:   solid 1px #000000; 
     } 

     colorPicker   { 
      background:  #DCDCDC; 
      border:   solid 1px #000000; 
     } 
    </style> 

    <title> 
     Page 
    </title> 

    <script src="plugins/js/jquery-1.11.0.js"> 
    </script> 

</head> 

<body> 

    <div id="colorPicker" class="colorPicker"> 
     <div id="color-red" class="colorBox" style="background: red;"> 
      &nbsp; 
     </div> 
     <div id="color-green" class="colorBox" style="background: green;"> 
      &nbsp; 
     </div> 
     <div id="color-blue" class="colorBox" style="background: blue;"> 
      &nbsp; 
     </div> 
    </div> 

    <div id="targetBox" class="colorBox"> 
     &nbsp; 
    </div> 

    <script> 
     $(document).ready(function() { 
      $(".colorBox").on("click", function() { 
       var strID = $(this).attr("id"); 

       $("#targetBox").css("backgroundColor", $("#" + strID).css("backgroundColor")); 
      }); 
     }); 
    </script> 

</body> 

<html> 

Просто слушать для click события на конкретный элемент и вернуть цвет фона элемента, который нажал.

Надеюсь, это поможет.

ETA - не уверены в каких-либо библиотеках или плагинах, которые вы могли бы использовать, их обязательно будет. Но создать что-то не так уж сложно.

Смежные вопросы