палитра цветов javascript - PullRequest
Новая
       9

палитра цветов javascript

0 голосов
/ 02 декабря 2011

Если вы используете Gmail, вы знаете, что можете изменить цвет ярлыков.Вариантов цвета не так уж много, и мне бы хотелось, чтобы что-то подобное было и в моем веб-приложении.Даже <select> с некоторыми цветами будет великолепен.jQuery ColorPicker предлагает на выбор множество цветов, и мне это не нужно.

Знаете ли вы что-то похожее с Gmail для выбора цвета ярлыка?

Ответы [ 4 ]

2 голосов
/ 22 апреля 2013

Я разработал простой инструмент выбора цвета на основе HTML <select>: jquery-simplecolorpicker

Встроенный режим:

inline

Режим выбора:

picker

Демо онлайн: http://plnkr.co/edit/VVclW0?p=preview

2 голосов
/ 02 декабря 2011
1 голос
/ 14 мая 2012

Вы можете проверить это также

палитру цветов и образцы

0 голосов
/ 10 августа 2015

См. Мой совместимый браузер Выбор цвета (выбор цвета).Вы можете использовать мой Color Selector вместоесли вы хотите открыть свою веб-страницу в старом веб-браузере, который не поддерживает HTML5, например IE6. 

<!--<!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>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
<link rel="stylesheet" href="https://rawgit.com/anhr/ColorSelector/master/ColorSelector.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/ColorSelector/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/ColorSelector/master/ColorSelector.js"></script>
	
</head>
<body>
	
	<p>
	Your browser does not supports HTML5 if you do not see the HTML5 color selector here: <input type="color">
	Instead you see a text input field.
	</p>
	<hr>
	My Color Selectors:
	<p>
		<input id="colorSelector1">
		<script>
			colorSelector.Create("black", function(selectedColor){
					consoleLog("selectedColor = " + selectedColor);
					var elementSelectedColor = document.getElementById("SelectedColor1")
					//elementSelectedColor.innerText = selectedColor;//Uncompatible with FireFox
					elementSelectedColor.innerHTML = selectedColor;
					elementSelectedColor.style.background = selectedColor;
					elementSelectedColor.style.color = invertHex(colourNameToHex(selectedColor));
				}
				, "colorSelector1"
			);
		</script>
		Selected color: <span id="SelectedColor1"></span>
	</p>
	<p>
		<input id="colorSelector2">
		<script>
			colorSelector.Create("#ffffff", function(selectedColor){
					consoleLog("selectedColor = " + selectedColor);
					var elementSelectedColor = document.getElementById("SelectedColor2")
					//elementSelectedColor.innerText = selectedColor;//Uncompatible with FireFox
					elementSelectedColor.innerHTML = selectedColor;
					elementSelectedColor.style.background = selectedColor;
					elementSelectedColor.style.color = invertHex(colourNameToHex(selectedColor));
				}
				, "colorSelector2"
			);
		</script>
		Selected color: <span id="SelectedColor2"></span>
	</p>
	<hr>
	Have a job for me? Please read <a href='../AboutMe/' target="_blank">About Me</a>.
</body>
</html>

Также см. Мой пример Выбор цвета

...