javascript颜色选择器
问题描述:
如果您使用Gmail,您知道您可以更改标签的颜色。没有太多的颜色选项,我想在我的网络应用程序中也有类似的东西。即使有一些颜色的<select>
也会很棒。 jQuery ColorPicker提供了多种颜色可供选择,我不需要它。javascript颜色选择器
你知道与Gmail标签颜色选择器类似吗?
答
见我的跨浏览器兼容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
更新演示链接的例子:[点击这里](http://laktek.github.io/really-simple-color-picker/demo。 HTML) –