0

Использую 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, а в демо он один.

Может как то классы менять нужно или по другому сделать инициализацию плагина? Помогите пожалуйста, буду очень признателен.

1 ответ 1

1

У каждого 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.