Встановлюємо jquery плагін colorpicker
Нічого складного в установці і настройці цього плагіна для JQuery немає. Для роботи нам знадобиться бібліотека JQuery. власне сам плагін Colorpicker.js і купа картинок робочої області самого Colorpickera. Всі ці фали ви зможете знайти в кінці цієї статті.
Підключаємо бібліотеку, файл стилів і сам плагін до вашої сторінці (найкраще це робити в розділі HEAD).
Далі будемо розбирати по конкретних прикладів.
Приклад №1 - colorPicker розташовується безпосередньо на сторінці.
Розміщуємо елемент div, який буде виступати в ролі контейнера для Colorpicker'а:
Як бачите, нічого складного. В результаті ми отримаємо блок з Colorpicker'ом на своїй сторінці, який буде виглядати так:
Приклад №2 - colorPicker змінює атрибут value у елемента input.
HTML код так-же дуже простий, на цей раз ми прив'язуємо Colorpicker до елементу input:
Тепер трохи роз'ясню що ж ми такого зробили. Colorpicker у нас тепер прив'язаний до елементу input і після натискання на останній, виконується подія keyup. функція якого, встановить колір, з яким відкриється Colorpicker. Далі виконується функція onBeforeShow. яка робить те ж саме (що і видно за змістом). Коли колір обраний, викликається функція onSubmit яка записує значення кольору в шістнадцятковому вигляді в атрибут value елемента input.
Ось що з цього вийшло:
Приклад №3 - при натисканні на кнопку відкривається colorPicker і змінює колір Div'а.
Зробимо кнопку для виклику Colorpicker і елемент div, у якого власне і будемо міняти колір:
І отримаємо зручну форму для зміни кольору елементів:
Пройдемося по коду. Цього разу ми прив'язали виклик Colorpicker'а до елементу з id = selectcolor. Опція color вказує колір за замовчуванням, з яким відкриється Colorpicker. Опції onShow і onHide викликають функції відкриття і закриття Colorpicker, при цьому роблячи це плавно (регулюється параметром fadeId і fadeOut). Опція onChange викликає функцію, яка міняє колір нашого div'а, змінюючи його властивість backgroundColor.
А якщо ми хочемо кілька елементів на сторінці та можливість змінювати колір не onSubmit подією, а onChange - просто рухом мишки за шкалою, то тут довелося попотіти.
Треба в самому файлі colorpicker.js рядок
А у виклику пікера додати метод onChange:
Тепер на одній сторінці може бути хоч 100 пікером і інпут, які до них відносяться мінятимуть свої значення навіть при русі мишки за шкалою, а при натисканні на кружечок - закриватися.
Підкажіть будь ласка, у мене пікер инициализируется в попап вікні, інпут туди потрапляють ajax-му, при необхідності. скрін.
При першому натисканні з'являється попап-вікно і інціалізіруется пікер, який спрацьовує як потрібно, на інпут з скрін. Але, коли я закриваю попап і відкриваю його заново -> пікер не працює.
Вважаю, що це пов'язано з ajax завантаженням даних (тому що в DOM ще немає елементів з попап). Хоча такого в принципі бути не повинно, тому що кожен раз при завантаженні попап йде ініціалізація пікера (інклуд файл, в якому прописана інціалізація).
Може через те, що я кілька разів не започатковано пікер (це через те, що у мене не вийшло повісити ініціалізацію на .on ( 'click'). Тому тут 100% -е відсутність в DOM потрібних елементів) .
При повторному виклику не спрацьовує навіть alert всередині ініціалізації пікера.
Підкажіть, може можна якось
$ ( '. ColorPickerMain'). ColorPicker - цю ініціалізацію переробити під $ (document) .on ().
Заздалегідь дякую
А скиньте ссилочку на приклад, гляну
На жаль посилання кинути не можу, тому що цей сайт запаролено, а клієнт дуже злий :)
Але проблему вже вирішив, якщо кому раптом цікаво:
у мене в див засовувати файл, в якому була ініціалізація пікера використовуючи код $ (selector) .html (ajax-data);
Я перед записом інформації зробив $ (selector) .empty (); і записав інформацію через $ (selector) .append (ajax-data);
Не знаю, як я до цього дійшов. Просто перебирав купу різних варіантів, а множинна ініціалізація пікера не давала мені спокою.