Универсальный диалог выбора цвета (colorpicker) на html и javascript

07.07.25

Разработка - Работа с интерфейсом

+2 –

Универсальный диалог выбор цвета (любой браузер с поддержкой javacript и фреймов) на основе Web технологий из 90-х годов, который работает и в последнем chrome.

С выходом платформы 8.5 изменилось в интерфейсах очень многое: для поля ввода и текстовго документа больше не доступны:

Возможность выбрать цвет.
Возможность указать нужный шрифт.
Возможность выбора размера шрифта ограничена несколькими вариантами - большой, средний, маленький. Т.е. конкретных значений нет.

Данный факт был обнаружен в версии 8.5.1 в режиме перехода на интерфейс 8.5. Очень хочется верить, что когда выйдут версии по новее возможности появятся. А пока остается только одна альтернатива - поле HTML документа для этого режима интерфейса (методом проб и ошибок стилей был реализована альтернатива на html и css в другой публикации).

В статье предложен один из вариантов реализации диалога выбора цвета для платформы 1С и с заделом на браузеры разной эпохи: начиная с самых древних - Netscape 2 и заканчивая последними новыми в контексе диалога выбора цвета, а точнее заготовки, на основе которой можно реализовать свой диалог выбора цвета.

Исходный код страницы этой реалиации выглядит так:

<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html>
<html>
<head>
<title>Universal Javascript Color picker</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<script type="text/javascript">
var atg=window.navigator.userAgent.toLowerCase();
var IE_DET=atg.indexOf('msie ') > -1 || atg.indexOf('trident/') > -1;
var ie_magor=parseInt(window.navigator.appVersion,10);
var check_iE_5_5=IE_DET&&(ie_magor==4)&&(atg.indexOf('msie 5.5')!=-1);
var check_iE_5_0=IE_DET&&(ie_magor==4)&&(atg.indexOf('msie 5.0')!=-1);
var check_iE_4_0=IE_DET&&(ie_magor==4)&&(atg.indexOf('msie 5')==-1);
var check_iE_3_0=IE_DET&&(ie_magor<4);
var IE_ONLOAD_NEW=check_iE_5_5 || (!check_iE_5_5 && !check_iE_5_0 && !check_iE_4_0 && !check_iE_3_0) || document.compatMode;
var isGecko = atg.indexOf("gecko") != -1;
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_nav  = ((atg.indexOf('mozilla')!=-1) && (atg.indexOf('spoofer')==-1)
                && (atg.indexOf('compatible') == -1) && (atg.indexOf('opera')==-1)
                && (atg.indexOf('webtv')==-1) && (atg.indexOf('hotjava')==-1));
var is_nav2 = (is_nav && (is_major == 2));
var is_nav3 = (is_nav && (is_major == 3));
var is_nav4 = (is_nav && (is_major == 4));

//fix protez links for Netscape 2: 
if (is_nav2) {var void_link="#";link_color_insude="AA";} else {var void_link="javascript:void(0)";link_color_insude="&nbsp;&nbsp;&nbsp;&nbsp;";}

//Navigator 4 and 3 fix to viisible to modern DHTML browser controll!!!
if (is_nav4 || is_nav3)
{
	style_link="";
	link_size_color = "19";
	link_color_insude='<img src="javascript:void(0)" width="'+link_size_color+'" height="'+link_size_color+'" border="0">';	
}
else
{
	style_link='style="text-decoration:none;"';	
	link_size_color = "19";
}

	//Table bases color:
	var TABLE_ARR = new initArray(
	new initArray("#FFFFCC","#FFFF99","#FFFF66","#FFFF33","#FFFF00","#CCCC00","#FFCC66","#FFCC00","#FFCC33","#CC9900","#CC9933","#996600","#FF9900","#FF9933","#CC9966","#CC6600","#996633","#663300"),
	new initArray("#FFCC99","#FF9966","#FF6600","#CC6633","#993300","#660000","#FF6633","#CC3300","#FF3300","#FF0000","#CC0000","#990000","#FFCCCC","#FF9999","#FF6666","#FF3333","#FF0033","#CC0033"),
	new initArray("#CC9999","#CC6666","#CC3333","#993333","#990033","#330000","#FF6699","#FF3366","#FF0066","#CC3366","#996666","#663333","#FF99CC","#FF3399","#FF0099","#CC0066","#993366","#660033"),
	new initArray("#FF66CC","#FF00CC","#FF33CC","#CC6699","#CC0099","#990066","#FFCCFF","#FF99FF","#FF66FF","#FF33FF","#FF00FF","#CC3399","#CC99CC","#CC66CC","#CC00CC","#CC33CC","#990099","#993399"),
	new initArray("#CC66FF","#CC33FF","#CC00FF","#9900CC","#996699","#660066","#CC99FF","#9933CC","#9933FF","#9900FF","#660099","#663366","#9966CC","#9966FF","#6600CC","#6633CC","#663399","#330033"),
	new initArray("#CCCCFF","#9999FF","#6633FF","#6600FF","#330099","#330066","#9999CC","#6666FF","#6666CC","#666699","#333399","#333366","#3333FF","#3300FF","#3300CC","#3333CC","#000099","#000066"),
	new initArray("#6699FF","#3366FF","#0000FF","#0000CC","#0033CC","#000033","#0066FF","#0066CC","#3366CC","#0033FF","#003399","#003366","#99CCFF","#3399FF","#0099FF","#6699CC","#336699","#006699"),
	new initArray("#66CCFF","#33CCFF","#00CCFF","#3399CC","#0099CC","#003333","#99CCCC","#66CCCC","#339999","#669999","#006666","#336666","#CCFFFF","#99FFFF","#66FFFF","#33FFFF","#00FFFF","#00CCCC"),
	new initArray("#99FFCC","#66FFCC","#33FFCC","#00FFCC","#33CCCC","#009999","#66CC99","#33CC99","#00CC99","#339966","#009966","#006633","#66FF99","#33FF99","#00FF99","#33CC66","#00CC66","#009933"),
	new initArray("#99FF99","#66FF66","#33FF66","#00FF66","#339933","#006600","#CCFFCC","#99CC99","#66CC66","#669966","#336633","#003300","#33FF33","#00FF33","#00FF00","#00CC00","#33CC33","#00CC33"),
	new initArray("#66FF00","#66FF33","#33FF00","#33CC00","#339900","#009900","#CCFF99","#99FF66","#66CC00","#66CC33","#669933","#336600","#99FF00","#99FF33","#99CC66","#99CC00","#99CC33","#669900"),
	new initArray("#CCFF66","#CCFF00","#CCFF33","#CCCC99","#666633","#333300","#CCCC66","#CCCC33","#999966","#999933","#999900","#666600","#FFFFFF","#CCCCCC","#999999","#666666","#333333","#000000"));

	var RGB_FORM = '<td bgColor="white" rowspan="'+TABLE_ARR.length+'"><b><font size="4"><i>Safe Palette<br>Browser</i><br><br>RGB Controls</font></b><br>';
    RGB_FORM = RGB_FORM+'Red:<input value="0" size="3" name="Red" type="text"><br>';
    RGB_FORM = RGB_FORM+'Green:<input value="0" size="3" name="Green" type="text"><br>';
    RGB_FORM = RGB_FORM+'Blue:<input value="0" size="3" name="Blue" type="text"><br>';	
    RGB_FORM = RGB_FORM+'<input value="Color RGB " type="button"><br><br>';
    RGB_FORM = RGB_FORM+'HTML:<input value="0" size="7" name="html_pole" type="text"><br>';
	RGB_FORM = RGB_FORM+'<input value="Color HTML" type="button"><br>';
	RGB_FORM = RGB_FORM+'</td>';

	
//
//GetColorData
//
function CallBackData(value1)
{
	Form_color=parent.controls.document.forms[0];
	Form_color.html_pole.value = value1;
	parent.frames["preview"].document.bgColor = value1;	
	//
	//Inversion selection color:
	//	
	hex=replaceString("#","",value1);	
	var r = parseInt(hex.substring(0, 2), 16);
    var g = parseInt(hex.substring(2, 4), 16);
    var b = parseInt(hex.substring(4, 6), 16);  
	//Set color:
	Form_color.Red.value = r;
	Form_color.Blue.value = b;
	Form_color.Green.value = g;
	//Set invertion color:
    r = toHex(255 - r);
    g = toHex(255 - g);
    b = toHex(255 - b);	
	value2=GetColor(r,g,b);		
	// Заполнение нижнего фрейма (превью)
	SetColorFrame(value1,value2);
	return false;
}	

function updateColor()
{
	Form_color=parent.controls.document.forms[0];
	var r = parseInt(Form_color.Red.value);
    var g = parseInt(Form_color.Green.value);
    var b = parseInt(Form_color.Blue.value); 
	value1=Form_color.html_pole.value;
	//Checked correct value;
	if (_isNaN(r)) { alert("Not correct input value Red"); CallBackData(value1); return;}
	if (_isNaN(b)) { alert("Not correct input value Blue"); CallBackData(value1);return;}
	if (_isNaN(g)) { alert("Not correct input value Green"); CallBackData(value1); return;}
	if (r>255) { alert("Not correct input value Red. Max value 255"); CallBackData(value1); return;}
	if (g>255) { alert("Not correct input value Green. Max value 255"); CallBackData(value1); return;}
	if (b>255) { alert("Not correct input value Blue. Max value 255"); CallBackData(value1); return;}	
	//Set color generate:
    r1 = toHex(r);
    g1 = toHex(g);
    b1 = toHex(b);	
	value1=GetColor(r1,g1,b1);	
	Form_color.html_pole.value = value1;
	//Set invertion color:
   	r = toHex(255 - r);
	g = toHex(255 - g);
	b = toHex(255 - b);	
	value2=GetColor(r,g,b);	
	SetColorFrame(value1,value2);
}

function SetColorFrame(bgcolor,header)
{
    prevDoc = frames['preview'].document;
	prevDoc.open();
	prevDoc.write('<html><head></head><body marginheight="0" marginwidth="0" topmargin="0" rightmargin="0" leftmargin="0" bottommargin="0" bgcolor="'+bgcolor+'"><h2><font color="'+header+'">Color Preview</font></h2></body></html>');
	prevDoc.close();
}
	
function initFrames() 
{
   // Заполнение верхнего фрейма (управление)
   var ctrlDoc = frames['controls'].document;
   //ctrlDoc.open();
   ctrlDoc.write('<html><head><title>Controls</title></head><body bgcolor="white" marginheight="0" marginwidth="0" topmargin="0" rightmargin="0" leftmargin="0" bottommargin="0">');
   ctrlDoc.write('<form method="POST" action="--WEBBOT-SELF--"><table cellpadding="0" cellspacing="1" border="1"><tbody>');
   for (var j=1; j<=TABLE_ARR.length; j++)
    {
        ctrlDoc.write('<tr>');
        for (var i=1; i<=TABLE_ARR[j].length; i++)
        {			
			ctrlDoc.write('<td bgcolor='+"'"+TABLE_ARR[j][i]+"'"+' width="'+link_size_color+'" height="'+link_size_color+'">');						
			ctrlDoc.write('<a '+style_link+' href='+void_link+'>');		   		   
			if (is_nav4 || is_nav3) { } else { ctrlDoc.write('<font size="3" color="'+TABLE_ARR[j][i]+'">'); }
			ctrlDoc.write(link_color_insude);
			if (is_nav4 || is_nav3) { } else { ctrlDoc.write('</font>'); }			   
			ctrlDoc.write('<a></td>');
        }
		
		if (j==1) { ctrlDoc.write(RGB_FORM); }
        ctrlDoc.write('</tr>');
    }
   
   ctrlDoc.write('</tbody></table></form></body></html>');
   ctrlDoc.close();
   // Заполнение нижнего фрейма (превью) 
   SetColorFrame("white","black");  
}
	
//	
//Capability NN 2.0 and IE 3.0 object and functions for JavaScript 1.0 versions.
//
function initArray() {
  this.length = initArray.arguments.length
  for (var i = 0; i < this.length; i++)   
    this[i+1] = initArray.arguments[i]
}

function toHex(n) {
  var hexChars = "0123456789ABCDEF";
  if (n < 0) n = 0;
  if (n > 255) n = 255;
  return hexChars.charAt(n >> 4) + hexChars.charAt(n & 15);
}

function GetColor(r,g,b) { return "#" + padZero(r) + padZero(g) + padZero(b); }
function padZero(str) { return str.length == 1 ? "0" + str : str;   }
function _isNaN(value) { return value != value; }

// Replaces oldS with newS in the string fullS  
function replaceString(oldS,newS,fullS) {
   for (var i=0; i<fullS.length; i++) {
      if (fullS.substring(i,i+oldS.length) == oldS) {
         fullS = fullS.substring(0,i)+newS+fullS.substring(i+oldS.length,fullS.length)
      }
   }
   return fullS
}
	 			
</script>
</head>

<frameset rows="90%,10%"
  <frame name="controls" src="about:blank">
  <frame name="preview" src="about:blank">
</frameset>
</html>

Требования к работе данного кода: включенный javascript и поддержка фреймов. Скриншоты работы данного компонента приведены ниже. Начну с версий старше:

Netscape 2.02:

Netscape 3 - 16 bit:

Navigator 4 - первая версия с DHTML:

Netscape 7:

Opera 9:

Safari 3:

Internet Explorer 8:

Mozilla 52:

И напоследок - supermium версии 132(fork chrome):

Вступайте в нашу телеграмм-группу Инфостарт

Универсальный диалог выбор цвета

+2 –

См. также

Инфоборды

Работа с интерфейсом Анализ учета Мониторинг 1С v8.3 8.3.14 1C:Бухгалтерия 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 Платные (руб)

Создайте свой функциональный интерфейс в любой конфигурации 1С с помощью подсистемы "Инфоборды". Настраивайте панели виджетов с метриками, индикаторами и показателями на начальном экране. Подсистема реализована в форме расширения 1С.

21600 руб.

27.03.2025 6955 16 13

Условное оформление формы в пользовательском режиме 1С (управление видимостью и доступностью элементов форм)

Работа с интерфейсом 1С v8.3 Платные (руб)

Подсистема условного оформления элементов форм (далее подсистема) предназначена для настройки оформления элементов форм (видимость, доступность, цвет фона, цвет текста и прочее) в пользовательском режиме 1С. Также подсистему возможно использовать для ограничения доступа к реквизитам формы для определенных пользователей (или групп пользователей).

6000 руб.

18.01.2022 11261 2 2

Универсальный редактор картинок 1С, хранимых в базе, с возможностью рисования

Работа с интерфейсом Рабочее место 1С v8.3 Управляемые формы 1C:Бухгалтерия Платные (руб)

Универсальный редактор картинок 1С предназначен для обработки изображений в режиме «Предприятие», с возможностью рисовать на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015 65416 45 60

Управление дашбордами

Работа с интерфейсом Программист 1С v8.3 1C:Бухгалтерия 1С:ERP Управление предприятием 2 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020 21150 30 6

Дизайн Гайд для создания форм на 1С. Когда и как использовать различные элементы, примеры и антипримеры по использованию

Работа с интерфейсом Программист Стажер 1С v8.3 Бесплатно (free)

Это инструкция по дизайну форм в среде 1С. Гайд охватывает рекомендации и стандарты для оптимизации пользовательского интерфейса. В гайде содержатся указания по использованию элементов интерфейса, включая как основные, так и продвинутые аспекты. Предоставляются также примеры и антипримеры для наглядного понимания принципов дизайна

20.08.2024 33582 mrXoxot 44

135

Прогресс-бар в поле динамического списка

Работа с интерфейсом Программист 1С v8.3 Бесплатно (free)

Пример простого и симпатичного прогресс-бара в динамическом списке, без картинок, используя редактирование запроса.

27.05.2024 19287 smielka 37

106

Новогоднее оформление для 1С

Работа с интерфейсом 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023 20403 1268 elcoan 53

128

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Программист 1С v8.3 1C:Бухгалтерия Абонемент ($m)

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

3 стартмани

10.04.2023 14373 174 acces969 31

131

Подписаться на ответы Инфостарт бот

Свернуть все

Оставьте свое сообщение

E-mail:

Автор:

Дмитрий Приходько (user1206119)

Рейтинг: 115

Для получения уведомлений о новых публикациях автора подключите телеграм бот: Инфостарт бот

Публикация:

№ 2425768

Создание 07.07.25 09:30

Обновление 07.07.25 09:30

Статистика:

Просмотры 498

Загрузки 0

Рейтинг 2

Комментарии 0

Характеристики:

Код открыт Да

Рубрики Работа с интерфейсом

Кому Программист

Тип файла Нет файла

Платформа Не имеет значения

Конфигурация Универсальные

Операционная система Не имеет значения

Страна Не имеет значения

Отрасль Не имеет значения

Налоги Не имеет значения

Вид учета Не имеет значения

Доступ к файлу Бесплатно (free)