Как правильно подключить Interface Color Picker?
Использую Interface Color Picker плагин (jquery). Проблема заключается в том, что я не могу подключить его для многих input. Получается что всегда работает только с первым, а нужно чтобы для каждого input ставился свой цвет.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/jquery/ifx.js" type="text/javascript"></script>
<script src="js/jquery/idrop.js" type="text/javascript"></script>
<script src="js/jquery/idrag.js" type="text/javascript"></script>
<script src="js/jquery/iutil.js" type="text/javascript"></script>
<script src="js/jquery/islider.js" type="text/javascript"></script>
<script src="js/jquery/color_picker/color_picker.js" type="text/javascript"></script>
<link href="js/jquery/color_picker/color_picker.css" rel="stylesheet" type="text/css">
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<link rel="stylesheet" href="js/jquery/color_picker/color_picker-ie6.css" type="text/css">
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" href="js/jquery/color_picker/color_picker-ie7.css" type="text/css">
<![endif]-->
<style>
form > ul > li > a > div {
display: inline-block;
width: 19px;
height: 19px;
border-top: 1px solid #A9A9A9;
border-right: 1px solid #A9A9A9;
border-bottom: 1px solid #A9A9A9;
margin-bottom: -6px;
}
input {
margin-bottom: 10px;
}
</style>
<script>
$(document).ready (
function() {
$.ColorPicker.init();
}
);
</script>
</head>
<body>
<form action="form_action.php" method="post">
<ul>
<li>Строка 11 - Ссылки a - <input type="text" id="myhexcode" value=""><a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"><div id="myshowcolor"></div></a></li>
<li>Строка 14 - Заголовки h - <input type="text" id="myhexcode" value=""><a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"><div id="myshowcolor"></div></a></li>
<li>Строка 35 - Основа левого меню - <input type="text" id="myhexcode" value=""><a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"><div id="myshowcolor"></div></a></li>
<li>Строка 48 - Второй внутреннего левого меню - <input type="text" id="myhexcode" value=""><a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"><div id="myshowcolor"></div></a></li>
<li>Строка 51 - Второй левого меню - <input type="text" id="myhexcode" value=""><a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"><div id="myshowcolor"></div></a></li>
<li>Строка 60 - Полоски сайта - <input type="text" id="myhexcode" value=""><a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"><div id="myshowcolor"></div></a></li>
<li>Строка 70 - Цвет главного меню - <input type="text" id="myhexcode" value=""><a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"><div id="myshowcolor"></div></a></li>
<li>Строка 75 - Цвет нижней линии - <input type="text" id="myhexcode" value=""><a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"><div id="myshowcolor"></div></a></li>
<li>Строка 76 - Цвет выпадающего списка - <input type="text" id="myhexcode" value=""><a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"><div id="myshowcolor"></div></a></li>
<li>Строка 79 - Второй главного меню - <input type="text" id="myhexcode" value=""><a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"><div id="myshowcolor"></div></a></li>
</ul>
</form>
</body>
</html>Вот демо самого плагина: Color Picker
Структура index.html практически идентична. Только отличается тем, что у меня много input, а в демо он один.
Может как то классы менять нужно или по другому сделать инициализацию плагина? Помогите пожалуйста, буду очень признателен.
У каждого input должен быть уникальный ID (ID вообще всегда должен быть уникальным на странице).
Далее после input идет тег a, у которого есть атрибут rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"
Давайте его рассмотрим:
objcode=myhexcode- это ID у input (мы его должны поменять)objshow=myshowcolor- это ID у следующего после a тега div - он тоже должен быть уникальным!okfunc=myokfunc- какую функцию выполнить после корректного выполнения. вам это, вроде как, не нужно. Можно просто удалить.
Что мы получаем?
<ul>
<li>Строка 11 - Ссылки a - <input type="text" id="myhexcode1" value="">
<a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode1&objshow=myshowcolor1&showrgb=1">
<div id="myshowcolor1"></div>
</a>
</li>
<li>Строка 14 - Заголовки h - <input type="text" id="myhexcode2" value="">
<a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode2&objshow=myshowcolor2&showrgb=1">
<div id="myshowcolor2"></div>
</a>
</li>
...
</ul>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
- Почему SERVER_ADDR имеет не тот IP 47906 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30567 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23895 visits
- Как через css изменить цвет png изображения? 10396 visits
- Blob video url download 10004 visits
- Php curl запрос через прокси с авторизацией 9274 visits
- Работа с captcha vk api 8146 visits
© "hostciti.net" 23.3.2025 | 16:59