dynamiczna zmiana kolorów w jquery w konkretnym przykładzie Opcje

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

Ten post edytował marcus755 7.12.2012, 20:58:34

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

[HTML] pobierz, plaintext 
<input type="hidden" name="setcolor" id="setColor" value="">
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<li style="float:left;" id="idColor">
    <label for="body">Colour: </label>
	<div style="width:20px; height:20px; margin-right:3px; background-color:#00d2ff; disply:block; float:left;"></div>
	<div style="width:20px; height:20px; margin-right:3px; background-color:#ff0000; disply:block; float:left;"></div>
	<div style="width:20px; height:20px; margin-right:3px; background-color:#ffe400; disply:block; float:left;"></div>
	<div style="width:20px; height:20px; margin-right:3px; background-color:#0066ff; disply:block; float:left;"></div>
	<div style="width:20px; height:20px; margin-right:3px; background-color:#de00ff; disply:block; float:left;"></div>
	<div style="width:20px; height:20px; margin-right:3px; background-color:#fd6205; disply:block; float:left;"></div>
	<div style="width:20px; height:20px; margin-right:3px; background-color:#6c6c6c; disply:block; float:left;"></div>
	<div style="width:20px; height:20px; margin-right:3px; background-color:#002467; disply:block; float:left;"></div>
</li>
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<script type="text/javascript">
  $('#idcolor div').click(function(){  //wychwytujemy kliknięcie w jakiegoś diva
    $('#setColor').val($(this).css('background-color')) //przekazujemy kolor diva do ukrytego pola formularza
  })
</script>
[HTML] pobierz, plaintext 

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ł (IMG:style_emoticons/default/smile.gif)