Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> dynamiczna zmiana kolorów w jquery w konkretnym przykładzie
marcus755
post
Post #1





Grupa: Zarejestrowani
Postów: 158
Pomógł: 1
Dołączył: 6.12.2012

Ostrzeżenie: (0%)
-----


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:-)
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
radziopoke
post
Post #2





Grupa: Zarejestrowani
Postów: 125
Pomógł: 14
Dołączył: 2.06.2010

Ostrzeżenie: (0%)
-----


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ł (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 27.12.2025 - 23:35