javascript颜色选择器

问题描述:

如果您使用Gmail,您知道您可以更改标签的颜色。没有太多的颜色选项,我想在我的网络应用程序中也有类似的东西。即使有一些颜色的<select>也会很棒。 jQuery ColorPicker提供了多种颜色可供选择,我不需要它。javascript颜色选择器

你知道与Gmail标签颜色选择器类似吗?

Really Simple Color Picker怎么样? (Demo

+0

更新演示链接的例子:[点击这里](http://laktek.github.io/really-simple-color-picker/demo。 HTML) –

您可以检查这也

color picker and samples

我基于HTML <select>开发一个简单的颜色选择器:jquery-simplecolorpicker

串联模式:

inline

选取模式:

picker

在线演示:http://plnkr.co/edit/VVclW0?p=preview

见我的跨浏览器兼容Color Selector(拾色器)。如果您想在旧的Web浏览器中打开您的网页,而不支持HTML5, (例如IE6),则可以使用我的颜色选择器代替< input type =“color”>。

<!--<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">--> 
 
<!doctype html> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
 
<head> 
 
    <title>Color Selector</title> 
 
\t <meta name="author" content="Andrej Hristoliubov [email protected]"> 
 
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
\t 
 
<link rel="stylesheet" href="https://rawgit.com/anhr/ColorSelector/master/ColorSelector.css" type="text/css"> \t \t 
 
\t <script type="text/javascript" src="https://rawgit.com/anhr/ColorSelector/master/Common.js"></script> 
 
\t <script type="text/javascript" src="https://rawgit.com/anhr/ColorSelector/master/ColorSelector.js"></script> 
 
\t 
 
</head> 
 
<body> 
 
\t 
 
\t <p> 
 
\t Your browser does not supports HTML5 if you do not see the HTML5 color selector here: <input type="color"> 
 
\t Instead you see a text input field. 
 
\t </p> 
 
\t <hr> 
 
\t My Color Selectors: 
 
\t <p> 
 
\t \t <input id="colorSelector1"> 
 
\t \t <script> 
 
\t \t \t colorSelector.Create("black", function(selectedColor){ 
 
\t \t \t \t \t consoleLog("selectedColor = " + selectedColor); 
 
\t \t \t \t \t var elementSelectedColor = document.getElementById("SelectedColor1") 
 
\t \t \t \t \t //elementSelectedColor.innerText = selectedColor;//Uncompatible with FireFox 
 
\t \t \t \t \t elementSelectedColor.innerHTML = selectedColor; 
 
\t \t \t \t \t elementSelectedColor.style.background = selectedColor; 
 
\t \t \t \t \t elementSelectedColor.style.color = invertHex(colourNameToHex(selectedColor)); 
 
\t \t \t \t } 
 
\t \t \t \t , "colorSelector1" 
 
\t \t \t); 
 
\t \t </script> 
 
\t \t Selected color: <span id="SelectedColor1"></span> 
 
\t </p> 
 
\t <p> 
 
\t \t <input id="colorSelector2"> 
 
\t \t <script> 
 
\t \t \t colorSelector.Create("#ffffff", function(selectedColor){ 
 
\t \t \t \t \t consoleLog("selectedColor = " + selectedColor); 
 
\t \t \t \t \t var elementSelectedColor = document.getElementById("SelectedColor2") 
 
\t \t \t \t \t //elementSelectedColor.innerText = selectedColor;//Uncompatible with FireFox 
 
\t \t \t \t \t elementSelectedColor.innerHTML = selectedColor; 
 
\t \t \t \t \t elementSelectedColor.style.background = selectedColor; 
 
\t \t \t \t \t elementSelectedColor.style.color = invertHex(colourNameToHex(selectedColor)); 
 
\t \t \t \t } 
 
\t \t \t \t , "colorSelector2" 
 
\t \t \t); 
 
\t \t </script> 
 
\t \t Selected color: <span id="SelectedColor2"></span> 
 
\t </p> 
 
\t <hr> 
 
\t Have a job for me? Please read <a href='../AboutMe/' target="_blank">About Me</a>. 
 
</body> 
 
</html>

也看到我Color Selector