2011-12-02 161 views
-1

如果您使用Gmail,您知道您可以更改標籤的顏色。沒有太多的顏色選項,我想在我的網絡應用程序中也有類似的東西。即使有一些顏色的<select>也會很棒。 jQuery ColorPicker提供了多種顏色可供選擇,我不需要它。javascript顏色選擇器

你知道與Gmail標籤顏色選擇器類似嗎?

回答

2

Really Simple Color Picker怎麼樣? (Demo

+0

更新演示鏈接的例子:[點擊這裏](http://laktek.github.io/really-simple-color-picker/demo。 HTML) –

0

見我的跨瀏覽器兼容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