Instalați colorpicker plugin jquery
Nimic complicat pentru a instala și configura acest plug pentru JQuery nu. Pentru munca, avem nevoie de biblioteca JQuery. plugin-ul în sine Colorpicker.js și o mulțime de zona de lucru a imaginilor Colorpickera. Toate aceste funiile pot fi găsite la sfârșitul acestui articol.
Conectarea fișierul bibliotecă în stil și plugin-ul la pagina dvs. (acest lucru se face cel mai bine în secțiunea HEAD).
În continuare vom analiza exemple specifice.
Exemplul №1 - colorpicker este situat direct pe pagină.
Se pune div elementul, care va acționa ca un container pentru Colorpicker'a:
După cum puteți vedea, nimic complicat. Rezultatul este o unitate cu Colorpicker'om pe pagina dvs., care va arata astfel:
Exemplul №2 - colorpicker modifică atributul valoarea elementului de intrare.
Codul HTML astfel încât același lucru este foarte simplu, de data aceasta ne lega colorpicker la elementul de intrare:
Acum, un pic va explica ceea ce am făcut. Colorpicker acum suntem legați la elementul de intrare și apăsând acest din urmă caz efectuat keyup. a cărei funcție va seta culoarea, care se deschide colorpicker. Continua pentru a servi ca onBeforeShow. care face același lucru (așa cum se vede pe conținut). Când este selectat culoarea, o funcție este invocată care scrie o valoare de culoare onSubmit în elementul de intrare valoarea atributului hexazecimal.
Asta a ieșit din ea:
Exemplul №3 - prin apăsarea butonului se deschide colorpicker și schimbă culoarea div.
Facem un buton pentru a apela colorpicker și div elementul, care de fapt se va schimba culoarea:
Și obținem formă convenabilă pentru a schimba culoarea unui element:
Trecem prin codul. De data aceasta ne-provocare Colorpicker'a legat de elementul cu id = selectcolor. Opțiunea de culoare specifică culoarea implicită, care se deschide colorpicker. OnShow și opțiunea onHide determină deschiderea și închiderea funcției colorpicker, făcând astfel o suprafață netedă (parametru reglabil fadeId și fadeOut). onChange opțiune solicită o funcție care își schimbă culoarea de div, schimbarea proprietății sale backgroundColor.
Și dacă vrem mai multe elemente de pe pagina și capacitatea de a schimba culoarea nu este un eveniment onSubmit și onChange - doar mișcare pe scara mouse-ului, va trebui să muncească din greu aici.
Ar trebui să fie în linia de fișier colorpicker.js
Și pentru a adăuga o metodă de a apela Picker onChange:
Acum, pe aceeași pagină poate fi de cel puțin 100 de culegători și de intrare pe care acestea sunt tratate vor schimba valorile lor chiar și atunci când mișcarea de mouse-ului la scară, și atunci când faceți clic pe un cerc - aproape.
Spune-mi te rog, am un selector este inițializat în fereastra de tip pop-up pentru a introduce toamna ajax-ohm, dacă este necesar. ecran.
Prima dată când faceți clic apare fereastra pop-up și selectorul de intsializiruetsya care funcționează așa cum ar trebui, la intrarea Scrin. Dar când am închide fereastra pop-up și deschideți-l din nou -> picker nu funcționează.
Eu cred că acest lucru se datorează date de încărcare (DOM ajax, deoarece în nici un mai multe elemente din pop-up). Cu toate că acest lucru nu ar trebui să se presupune, din moment ce de fiecare dată când porniți pop-up inițializarea Picker (fișier inkluda care este înregistrată de initializare).
Poate din cauza faptului că de mai multe ori am inițializa cursă lungă (acest lucru se datorează faptului că nu am putut prinde de inițializare a .Pe ( „clic“). De atunci, 100% în absența elementelor necesare ale DOM) .
La rechemarea alerta nu se declanșează chiar și în Selectorul de inițializare.
Spune-mi, poate poți cumva
$ ( 'ColorPickerMain') ColorPicker -. Această inițializare modifică în conformitate cu $ (Document) .ON ().
multumesc anticipat
O arunca de pe o referire la un exemplu, uita-te
Din păcate, link-ul nu poate arunca, deoarece Această înregistrare de recuperare a site-ului, iar clientul este foarte supărat :)
Dar problema este deja decis, dacă cineva întreabă brusc:
Am învelesc în fișierul divele care a fost folosind codul de inițializare $ Picker (Selector) .html (ajax-date);
Sunt în fața înregistrării informațiilor puse la $ (selector) .empty (); înregistrate și alte informații prin intermediul $ (selector) .append (ajax-date);
Nu știu cum am ajuns la asta. Doar a trecut printr-o mulțime de diferite opțiuni și de inițializare multiplă Picker nu ar lăsa să mă odihnesc.