Forum PHP.pl

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.

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 
 onmouseover="add_on()" onmouseout="add_off()"
[PHP] pobierz, plaintext 

No i w pliku js funkcje:

[PHP] pobierz, plaintext 
function add_on() {document.getElementById("header_add").style.background='url(img/plus_active.png) left no-repeat';document.getElementById('content_add').style.display='block';}
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 
<script>
$(document).ready(function() {
	$("#header_add").click(function () {
	$('#content_add').slideToggle('normal');
	});
});
</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 
$(document).ready(
	function() {
		$("#header_add").click(
			function () {
				$('#content_add').slideToggle();
				$("#header_add").toggle(
					function() { document.getElementById("header_add").style.background='url(img/plus_active.png) left no-repeat'; }, 
					function() { document.getElementById("header_add").style.background='url(img/plus.png) left no-repeat'; }
				);
			}
		);
 
	}
);
[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.

A tak

[HTML] pobierz, plaintext 
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
<script type="text/javascript">
 
$(document).ready(
function()
{
$("#klik").click(
function()
{
$("#pokaz").toggle();
}).toggle(function() { 
$(this).text('schowaj');
$(this).css("color","blue");
}, function() { 
$(this).text("więcej"); 
$(this).css("color","red");
 
});
});
</script>
 
 
</head>
<body>
<p id="klik"><span style="color:red">Wiecej</span></p>
<div id="pokaz" style="display: none">
test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test
</div>
</body>
</html>
[HTML] pobierz, plaintext 

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 ...

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 
$(document).ready(
	function() {
		$("#header_add").click(
			function () {
				$('#content_add').slideToggle();
			}
		)
 
		.slideToggle(
			function() {
				$("#header_add").css("background","url(\"img/plus_active.png\") left no-repeat");
			}, 
			function() {
				$("#header_add").css("background","url(\"img/plus.png\") left no-repeat");
			}
		);
	}
);
[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.

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 .

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 ?

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

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 
toggle( speed, [callback] )
slideToggle( speed, [callback] ) 
[PHP] pobierz, plaintext 

No i kod funkcji:

[PHP] pobierz, plaintext 
$(document).ready(
	function() {
		$("#header_add").click(
			function () {
				$('#content_add').slideToggle();
			}
		)
 
		.slideToggle(
			function() {
				$("#header_add").css("background","url(\"img/plus_active.png\") left no-repeat");
			}, 
			function() {
				$("#header_add").css("background","url(\"img/plus.png\") left no-repeat");
			}
		);
	}
);
[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?

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.