Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: dynamiczna zmiana kolorów w jquery w konkretnym przykładzie
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
marcus755
Zrobiłem sobie coś takiego:

http://www.datatex.yoyo.pl/test/calendar/f...o/calendar.html

Po kliknięciu między linie pojawia się nam edytor,
w którym można wpisać:
tytuł, przedział czasowy od - do, oraz są kolory.
I właśnie, co do tego ostatniego mam pytanie, jak zrobić,
żeby przy dodawaniu, czy też edycji można było zmieniać dynamicznie kolor,
w ten sposób, aby ten domyślny szary pasek zmieniał kolor - po kliknięciu w wybrany w button z kolorem i zapisaniu.
Jak to zrobić?

thx:-)
radziopoke
Po kliknięciu w kolor warto by było jakby było to zapisane do zmiennej jaki kolor był ostatni kliknięty(ewentualnie dodać ukryty element input, w którym zostanie zapisany kolor). A przy kliknięciu save dodać by dany element zmienił swój kolor za pomocą atrybutu style, lub nadać mu dodatkową klasę, która będzie miała ten kolor zakodowany.
marcus755
a znasz jakiś przykład?
może jakiś tutorial?
radziopoke
ja ci tylko wytłumaczę krok po kroku co trzeba zrobić. I nie jestem do końca pewien czy ta strona korzysta z JQuery bo ja pokaże to za pomocą tej biblioteki
po pierwsze należy do formularza dodać
  1. <input type="hidden" name="setcolor" id="setColor" value="">

Może być to zaraz za tymi kolorami.

Potem należy wychwycić kliknięcie w div. nie podoba mi się za bardzo pomysł umieszczania w tag A tag DIV
Tag A możesz ze spokojem usunąć.
czyli wyglądało by to tak. Dodatkowo li które mieści te kolory w sobie nadałbym jakieś id np idColor
  1. <li style="float:left;" id="idColor">
  2. <label for="body">Colour: </label>
  3. <div style="width:20px; height:20px; margin-right:3px; background-color:#00d2ff; disply:block; float:left;"></div>
  4. <div style="width:20px; height:20px; margin-right:3px; background-color:#ff0000; disply:block; float:left;"></div>
  5. <div style="width:20px; height:20px; margin-right:3px; background-color:#ffe400; disply:block; float:left;"></div>
  6. <div style="width:20px; height:20px; margin-right:3px; background-color:#0066ff; disply:block; float:left;"></div>
  7. <div style="width:20px; height:20px; margin-right:3px; background-color:#de00ff; disply:block; float:left;"></div>
  8. <div style="width:20px; height:20px; margin-right:3px; background-color:#fd6205; disply:block; float:left;"></div>
  9. <div style="width:20px; height:20px; margin-right:3px; background-color:#6c6c6c; disply:block; float:left;"></div>
  10. <div style="width:20px; height:20px; margin-right:3px; background-color:#002467; disply:block; float:left;"></div>
  11. </li>


Do kolejnego kroku potrzebny jest jquery(w zwykłym javascripcie tez jest to możliwe ale już nie pamiętam jak). Nie jestem pewien czy na pewno strona korzysta z jquery. Najwyżej będziesz musiał poszukać jak pobrać element i zmienić styl elementu za pomocą zwykłego javascript.
To musi być pod tagiem FORM
  1. <script type="text/javascript">
  2. $('#idcolor div').click(function(){ //wychwytujemy kliknięcie w jakiegoś diva
  3. $('#setColor').val($(this).css('background-color')) //przekazujemy kolor diva do ukrytego pola formularza
  4. })


W taki sposób zapamiętujesz ostatni kliknięty color
No a teraz coś czego nie mogłem znaleźć czyli funkcja, która obsługuje wysłanie tego formularza po kliknięciu save. Musisz ją znaleźć i tam musisz nadać kolor (który jest w przesłanym ukrytym polu o nazwie setcolor) dla tego obiektu, który jest nową informacją w tym kalendarzu
Może jakbyś mi powiedział gdzie jest ta funkcja, która odpowiada za dodanie nowego eventu to bym to bardziej zrozumiale zapisał smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.