創建彩色電子賀卡

我正在創建基於Web的GUI編輯器。在這樣做的時候，我需要創建顏色選擇器的前端，例如附加圖像中的顏色選擇器。我需要知道我應該如何去創建它。由於我不熟悉這種開發，我可以考慮以下選項。 1.創建跨度並使它們可點擊並給它們背景顏色。 2.使用一些生成此功能的插件 3.使用一組按鈕，每個按鈕都具有唯一的顏色。創建彩色電子賀卡

我還需要知道是否有任何生成此功能的在線工具或jquery插件。任何幫助，將不勝感激

來源

2016-09-17 M.Hasham

嗨！恐怕圖像沒有附加。 –

我寫了類似的事情在過去，這裏有一個簡單的例子，說明你可以做到這一點的一種方法：

<!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 - 不確定任何庫或插件，你可以使用，肯定會有一個。但是建立一些東西並不難。

來源

2016-09-17 10:40:15 Nunchy

創建彩色電子賀卡

回答

相關問題