Инсталирайте плъгин JQuery colorpicker на


Инсталирайте плъгин JQuery colorpicker на
Този път ви разкажа за една интересна и полезна приставка за избор на цвят - ColorPicker. Ако я добавите към вашия сайт, можете да предоставите на потребителите си да използват цветовата палитра за избор на цвят и сравнение, както и да се променят в движение появата на елементи на вашия сайт. За да започнете, мисля, че е най-добре да се даде пример как всичко работи.

Нищо сложно да се инсталира и конфигурира този плъгин за JQuery не. За работа, ние се нуждаем от JQuery библиотеката. към самия плъгин Colorpicker.js и много на работната площ на снимките Colorpickera. Всички тези въжетата могат да бъдат намерени в края на тази статия.

Свързване файла с стил библиотека и плъгина на страницата си (това е най-добре в секцията HEAD).

След това ще анализира конкретни примери.

Пример №1 - colorPicker е разположен директно на страницата.

Поставете елемент DIV, който ще действа като контейнер за Colorpicker'a:

Както можете да видите, нищо сложно. Резултатът е единица с Colorpicker'om на страницата ви, което ще изглежда така:

Пример №2 - colorPicker променя стойност атрибут на входния елемент.

HTML код, така същият е много проста, но този път ние вратовръзка Colorpicker към входния елемент:

Сега, малко ще ви обясни какво сме направили. Colorpicker сега са обвързани към входния елемент и натиснете последната извършена keyup събитието. функцията на която ще бъде определен цвят, който се отваря Colorpicker. Продължи да служи като onBeforeShow. който прави същото нещо (както се вижда от съдържанието). Когато е избран цвят, функция се извиква, че пише onSubmit стойност цвят в шестнадесетичен стойност на атрибут вход елемент.

Това е, което излезе от него:

Пример №3 - с натискане на бутона се отваря colorPicker и променя цвета на DIV.

Ние правим един бутон да се обадя Colorpicker и DIV елемент, който действително ще промени цвета:

И ние се получи удобна форма за промяна на цвета на елемент:

Ние проверете кода. Този път оспори Colorpicker'a свързана с елемент с идентификатор = selectcolor. Цвят опция се задава цвета по подразбиране, който се отваря Colorpicker. onShow и onHide вариант причинява отваряне и затваряне функцията Colorpicker, по този начин е гладка (регулируем параметър fadeId и fadeOut). onChange опция нарича функция, която променя цвета на нашата Разделение, промяна на backgroundColor собственост.

И ако ние искаме повече елементи на страницата и възможност за промяна на цвета не е onSubmit събитие и onChange - просто движение по скалата на мишката, което трябва да работим усилено, за тук.

Тя трябва да е в линията на файл colorpicker.js

И за да добавите метод наричаме Picker onChange:

Сега на същата страница може да бъде най-малко 100 берачи и INPUT, че те са третирани ще променят своите стойности, дори когато движението за мащаба на мишката, и когато щракнете върху един кръг - в близост.

Кажете ми, моля, имам берач се инициализира в изскачащия прозорец за въвеждане на есен Аякс ома, ако е необходимо. екран.
Първият път, когато кликнете появява изскачащ прозорец и intsializiruetsya берач, който работи както трябва, до входа на Scrin. Но когато затворите изскачащия прозорец и да го отворите отново -> берач не работи.
Аз вярвам, че това се дължи на Аякс зареждане на данни (DOM, тъй като при никакви още материали от изскачащи прозорци). Въпреки, че това не трябва да се очаква, тъй като всеки път, когато се стартира изскачащ инициализиране Picker (inkluda файл, който е регистриран инициализиране).
Може би се дължи на факта, че няколко пъти съм се инициализира берач (това се дължи на факта, че не можех да се закача за инициализиране на .От (с щракване). От тогава 100% при липса на необходимите елементи на DOM) ,

Когато припомняйки сигналът не се включва дори и в инструмента за избор на инициализиране.
Кажете ми, може ли по някакъв начин може да
$ ( ". ColorPickerMain") ColorPicker -. Тази инициализация променя под $ (документ) .От ().
благодаря предварително

А хвърлей разстояние препратка към един пример, погледнете

За съжаление, тази връзка не може да се хвърли, защото Това възстановяване сайт запис, и на клиента е много ядосан :)
Но проблемът вече е взето решение, ако някой изведнъж се чудех:
Аз баста в диви файл, който е с помощта на инструмента за избор на инициализация код $ (селектор) .html (Аякс-данни);
Аз съм пред записването на информацията, $ (селектор) .empty (); и записва информация чрез $ (селектор) .append (Аякс-данни);
Аз не знам как се стигна до това. Просто премина през един куп различни възможности и множество инициализация Picker не ми позволиха почивка.