Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]Onclick - pojawianie się i znikanie div'a
Forum PHP.pl > Forum > Przedszkole
qqwwq
14.09.2009, 03:24:52
Witam,

Bawię się z nową stroną, chciał bym aby jak najwięcej opcji było tam dostępnych bez odświeżania strony, a najłatwiej to chyba osiągnąć za pomocą onmouseover, onclick oraz display: none > display: block. Do pewnego czasu to działało, po najechaniu czy po kliknięciu na dany przycisk itp, pojawiał się kolejny div w którym można było coś wpisać czy coś zobaczyć, wykombinowałem sobie nawet przy niektórych takie fajne X, które ponownie nadawały danemu div'owi atrybut display: none. Jednakże teraz muszę zrobić coś takiego, że po kliknięciu na jakiś przycisk, pokazuje się dany div, po ponownym kliknięciu na ten sam przycisk - ten div znowu znika. Po prostu potrzebuję mieć jeden przycisk zarówno do wyświetlania i chowania jakiegoś diva - jednakże nie wiem jak to oskryptować.

Problem pewnie popularny, jednakże nie mogę nigdzie znaleźć poprawnego rozwiązania - google pewnie je zna, ale nie mogę trafić frazy dzięki której mi je poda.


Z góry dziękuję za pomoc, pozdrawiam.
f1xer
14.09.2009, 04:36:51
Wystarczy że w onclick dasz funkcję która sprawdzi czy element ma display:block jeżeli tak to ustawi display:none jeżeli nie to ustawi display:block
kefirek
14.09.2009, 09:00:37 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  4. <script>
  5. $(document).ready(function() {
  6. $("#klik").click(function () { 
  7. $('#pokaz').slideToggle('normal');
  8. });
  9. });
  10. </script>
  11.  
  12. </head>
  13. <body>
  14. <p id="klik">Kliknij</p>
  15. <div id="pokaz" style="display: none">test test</div>
  16. </body>
  17. </html>
[HTML] pobierz, plaintext
qqwwq
15.09.2009, 00:32:40
Niestety ale nie mam pojęcia jak zrobić taką funkcję, która z danego diva o danym id pobierze wartość atrybutu display, jak bym to już miał to później z if'em dał bym sobie chyba radę. No ale wykorzystałem już drugi sposób z jquery. Bardzo fajna sprawa - tylko miał bym kilka pytań.

1. Poprzednio działało to na zasadzie dwóch div'ów - header_add oraz content_add. W tym pierwszym był w tle ustawiony obrazek plusa, oraz przy użyciu onmouseover i onmouseout, po najechaniu na tego diva podmienił się obrazek tła na 'aktywnego' plusa. Po zjechaniu tło z powrotem się zmieniało na normalne - chyba że się najechało na diva content_add który się pojawiał dzięki najechaniu na header_add. Pewnie nikt tego bełkotu nie zrozumie, dlatego pokażę kod jakim to osiągnąłem:

W obu divach był taki kod:
[PHP] pobierz, plaintext 
  1.  onmouseover="add_on()" onmouseout="add_off()"
[PHP] pobierz, plaintext


No i w pliku js funkcje:
[PHP] pobierz, plaintext 
  1. function add_on() {document.getElementById("header_add").style.background='url(img/plus_active.png) left no-repeat';document.getElementById('content_add').style.display='block';}
  2. function add_off() {document.getElementById("header_add").style.background='url(img/plus.png) left no-repeat';document.getElementById('content_add').style.display='none';}
[PHP] pobierz, plaintext


Teraz moje pierwsze pytanie, czy, i jak, mogę połączyć powyższe funkcje, powyższą funkcjonalność, z już przerobionym kodem na:
[PHP] pobierz, plaintext 
  1. <script>
  2. $(document).ready(function() {
  3. 	$("#header_add").click(function () {
  4. 	$('#content_add').slideToggle('normal');
  5. 	});
  6. });
  7. </script>
[PHP] pobierz, plaintext


Próbowałem te kody wciskać w różne miejsca, ale jedynie co mi się udało, to przy kliknięciu dodać także tło 'aktywnego' plusa ( no i oczywiście wysuwanie/chowanie div'a - to działa ), tylko że niezbyt rozumiem działanie tych funkcji z jquery, dlatego też nie mam pojęcia co zrobić aby na kliknięcie powrotne, wraz ze zwijaniem, tło także wracało do zwykłej postaci.

2. Z tym jquery i rozwijaniem to bardzo fajny efekt, jak się domyślam to zasługa funkcji slideToggle. Czy oprócz niej w tym pliku są jeszcze jakieś inne metody pojawiania się czy rozwijania różnych rzeczy?

Częściowo sobie poradziłem dzięki temu wpisowi, dokładnie w taki sposób:
[PHP] pobierz, plaintext 
  1. $(document).ready(
  2. 	function() {
  3. 		$("#header_add").click(
  4. 			function () {
  5. 				$('#content_add').slideToggle();
  6. 				$("#header_add").toggle(
  7. 					function() { document.getElementById("header_add").style.background='url(img/plus_active.png) left no-repeat'; }, 
  8. 					function() { document.getElementById("header_add").style.background='url(img/plus.png) left no-repeat'; }
  9. 				);
  10. 			}
  11. 		);
  12.  
  13. 	}
  14. );
[PHP] pobierz, plaintext


Jednakże 'prawie' to działa. Efekt jest dokładnie taki, że klikając w div'a header_add - div content_add się zwija i rozwija na przemian.
Natomiast dalej tak jak miało być, czyli również na przemian zmiana tła z aktywnym i nie aktywnym, działa - ale z częstotliwością chyba zmniejszoną o połowę.
To znaczy, po kliknięciu dwa razy w div'a header_add, zmienia się w nim tło, po kolejnych dwóch kliknięciach znowu zmienia się w nim tło, tylko że podczas jednego 'okresu' zmiany tła, div content_add zdąży się już wysunąć i schować dwa razy ... próbowałem już rozdzielać czy inaczej łączyć te funkcje, ale w większości przypadków to nie działało, albo działało ale nadal nie tak jak powinno.
kefirek
15.09.2009, 10:05:47
A tak
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  4.  
  5. <script type="text/javascript">
  6.  
  7. $(document).ready(
  8. function()
  9. {
  10. $("#klik").click(
  11. function()
  12. {
  13. $("#pokaz").toggle();
  14. }).toggle(function() { 
  15. $(this).text('schowaj');
  16. $(this).css("color","blue");
  17. }, function() { 
  18. $(this).text("więcej"); 
  19. $(this).css("color","red");
  20.  
  21. });
  22. });
  23. </script>
  24.  
  25.  
  26. </head>
  27. <body>
  28. <p id="klik"><span style="color:red">Wiecej</span></p>
  29. <div id="pokaz" style="display: none">
  30. test test test test test test test test test test test test test test test
  31. test test test test test test test test test test test test test test test
  32. test test test test test test test test test test test test test test test
  33. test test test test test test test test test test test test test test test
  34. </div>
  35. </body>
  36. </html>
[HTML] pobierz, plaintext
CyberDuck_
15.09.2009, 11:52:09
Czy chodzi Ci o cos takiego ?
http://www.bluelan.pl/przyklad_gd/zawartosc.php
To jest tylko przyklad, ale mozna klikjac
w link zmienic zawartosc dowolnego fragmentu strony
bez jej odswierzania ...
qqwwq
15.09.2009, 13:42:33
kefirek > Twój kod działa, faktycznie po kliknięciu zmienia się kolor i pokazują napisy, ale próbowałem to zaadoptować do mojego kodu, z slideToggle a nie toggle, no i niestety cały czas nie działa. Wygląda to dokładnie tak, że po odświeżeniu strony, div header_add - ten który jest przyciskiem do rozwijania div'a, sam się automatycznie zwija do góry, i znika. Jak się zdąży na niego kliknąć przed zwinięciem, to się roziwja poprawnie ten drugi div z treścią - content_add, ale dalej nic nie można zrobić.

[PHP] pobierz, plaintext 
  1. $(document).ready(
  2. 	function() {
  3. 		$("#header_add").click(
  4. 			function () {
  5. 				$('#content_add').slideToggle();
  6. 			}
  7. 		)
  8.  
  9. 		.slideToggle(
  10. 			function() {
  11. 				$("#header_add").css("background","url(\"img/plus_active.png\") left no-repeat");
  12. 			}, 
  13. 			function() {
  14. 				$("#header_add").css("background","url(\"img/plus.png\") left no-repeat");
  15. 			}
  16. 		);
  17. 	}
  18. );
[PHP] pobierz, plaintext


Czy w wypadku slideToggle to nie będzie działać? Dodam, że jak podmienię oba slideToggle na toggle - to działa, tyle że bez rozwijania, o z natychmiastowym wyświetleniem się.


CyberDuck_ > nie do końca o to mi chodzi, ja bym chciał aby po kliknięciu w jakiś link, przycisk, ten przycisk zmieniał swoje tło, oraz dodatkowo rozwijał się jakiś fragment strony, który już jest wczytany ale ma wartość display: none; ... niczego zawartości zmieniać nie chcę, jedynie zmieniać jakieś atrybuty w danej klasie poprzez kliknięcie - tak w skrócie.
CyberDuck_
15.09.2009, 15:34:58
No ok, ale ja wczesniej napisalem ze mozna podmienic
dowolny fragment strony, a nie rozwijac juz cos co jest
na stronie tylko schowane. No ale mniejsza o to .
qqwwq
16.09.2009, 00:19:06
Myślisz że Twoje rozwiązanie mi pomoże? Może chociaż w jakiś sposób wytłumacz jak to działa - dopiero po kliknięciu w jakiś link, jest pobierana treść? Tak samo będzie to działać, jeśli bym chciał aby dopiero po kliknięciu zostały wysyłane zapytania do bazy i zwracane dane? ... czy to się jakoś cache'uje, w sensie że przy każdym kliknięciu od nowa są pobierane dane/wysyłane zapytania itp ?
CyberDuck_
16.09.2009, 01:14:56
Moze zle zrozumialem. Jesli tak to przepraszam, ale wydaje mi sie, ze
dla wiekszych zastosowan to jest idealne rozwiazanie bo mozna umieszczac
w dowolnym miejscu dowolna tresc formowana w skrypcie php.
Opisane to masz tutaj :
http://forum.php.pl/index.php?showtopic=13...rt=#entry660878
qqwwq
18.09.2009, 14:26:35
Ciekawy sposób, ale niestety u mnie się on nie sprawdzi. W zasadzie już zrobiłem to co chciałem, ale wiadomo wraz z jedzeniem apetyt rośnie, i teraz chciał bym aby także przy slideToggle działało mi poprawnie klikanie - bez efektów ubocznych, a tak niestety nie jest. W manualu jest podane że budowa obu tych funkcji w zasadzie jest identyczna - poprawiam tylko nazwę funkcji, i się pierniczy.

[PHP] pobierz, plaintext 
  1. toggle( speed, [callback] )
  2. slideToggle( speed, [callback] ) 
[PHP] pobierz, plaintext


No i kod funkcji:
[PHP] pobierz, plaintext 
  1. $(document).ready(
  2. 	function() {
  3. 		$("#header_add").click(
  4. 			function () {
  5. 				$('#content_add').slideToggle();
  6. 			}
  7. 		)
  8.  
  9. 		.slideToggle(
  10. 			function() {
  11. 				$("#header_add").css("background","url(\"img/plus_active.png\") left no-repeat");
  12. 			}, 
  13. 			function() {
  14. 				$("#header_add").css("background","url(\"img/plus.png\") left no-repeat");
  15. 			}
  16. 		);
  17. 	}
  18. );
[PHP] pobierz, plaintext


Czy ktoś jest w stanie mi powiedzieć co jeszcze jest źle, albo chociaż czy to w ogóle może działać - czy po prostu nie mam się co bawić, bo to niemożliwe?
CyberDuck_
18.09.2009, 17:29:44
W tej chwili co prawda zablokowalem swoja strone
na czas nie okreslony wiec nie moge podac przykladow, ale
mysle, ze jestes w bledzie, ze Ci sie to nie przyda.
Nie bede Cie jednak zmuszac przeciez.
Na swojej stronie uzywam tego w bardzo wielu jej czesciach :
1. tabeleczka najnowszych pozycji gdzie sa wyswietlane
pozycje wedlug dni i mozna sobie ja posortowac wedlug
kategorii lub wyswietlajac powiedzmy 5 odtatnich dni, ale
w danej chwili jest widoczny dany dzien.
2. Szpieg informujacy mnie kto jest na stronie, w jakiej
jego czesci z podzialem na gossci i na zalogowanych.
3. administracja obrazkami, ich dodawanie i wyswietlanie
pozycji.

No i pare mniej znaczacych i wszystko bez przeladowywania.
W kazdym razie nie namawiam.
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.