Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] jQuery i "warstwy" przy kliknięciu
Forum PHP.pl > Forum > Przedszkole
lukasamd
Witam,
mam 3 warstwy-divy:
- container
- effect (dla efektów, zaciemniania itp, poza tym stanowi niejako "kontener" dla komunikatów)
- newsletter (tu przedstawiony div-komunikat)

No i taki kod:

  1.  
  2. $("a.newsletter").toggle(function()
  3. {
  4. $("#container").animate({
  5. opacity: 0.3
  6. }, 750 );
  7. $("#effect").fadeIn("medium");
  8.  
  9. $("#effect").live('click', function()
  10. {
  11. $("#effect").fadeOut("medium");
  12. $("#container").animate({
  13. opacity: 1.0
  14. }, 750 );
  15. });
  16. },function()
  17. {
  18. $("#effect").fadeOut("medium");
  19. $("#container").animate({
  20. opacity: 1.0
  21. }, 750 );
  22. });



Po kliknięciu wszystko jest ok, strona przyciemniona, pokazuje się okienko.
Gdy klikam gdziekolwiek, zgodnie z założeniami wszystko "wraca do normy". Niestety, również kliknięcie na coś w div#newsletter powoduje taką akcję - zupełnie jakby wyższy priorytet miał div#effect (w sumie logiczne, jest wyżej w DOM).

Jak zrobić, aby reagowało na klik tylko poza div#newsletter, a jego zostawiło w spokoju?
Poza tym, jak widać, powtarza się kod dla toogle i dla tego kliknięcia gdziekolwiek. Da się to jakoś sensownie zrobić "w imię zasady" DRY? smile.gif

Myślałem nawet o zaprzęgnięciu jQuery UI, ale taki kombajn nie jest mi potrzebny do 1 komunikatu na stronie, a poza tym lepiej jak człowiek napisze i sam się czegoś nauczy smile.gif
kamil4u
Najlepiej by było gdybyś umieścił ten kod live - bo nie wiem czy dobrze zrozumiałem smile.gif

Prawdopodobnie chodzi o: event.stopPropagation i cancelBubble: Taki kod wywołany na zdarzeniu powinien pomóc:
Kod
function stopBubbling(e){
    e=e||event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}


Co do powtarzania się kodu, mógłbyś:
1. napisać funkcję, która robiła by powtarzające się elementy
2. wywołać zdarzenia z danego elementu:
Kod
el.onclick();


Wszystkie kodu podałem Ci jak kod w czystym JS, gdyż nie znam jQuery, ale podejrzewam, że ta biblioteka udostępnia swoje odpowiedniki.
lukasamd
Już sobie poradziłem - div#newsletter był wewnątrz div#effect, wyrzuciłem na zewnątrz i poprawiłem w CSS aby nadal robił to co ma robić.
No i teraz działa już tak jak chciałem.
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.