I use Interface Color Picker a plug-in (jquery). The problem is that I can not connect it for many input. It turns out that it always works only with the first one, but it is necessary that each input has its own color.

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>

Here is the demo of the plugin itself: Color Picker

The index.html structure is almost identical. Only differs in that I have a lot of input, and in the demo it is one.

Maybe as it is necessary to change the classes or differently make initialization of the plugin? Help please, I will be very grateful.

    1 answer 1

    Each input should have a unique ID (the ID should always be unique on the page).

    Next, after input comes a tag that has the attribute rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"

    Let's look at it:

    • objcode=myhexcode is the input ID of the input (we must change it)

    • objshow=myshowcolor is the ID of the following div after a tag - it must also be unique!

    • okfunc=myokfunc - what function to perform after correct execution. you don't seem to need this. You can simply delete.

    What do we get?

     <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>