[JavaScript] Box po naciśnięciu przycisku? Opcje

[Micchaleq]

Witam serdecznie,

Od niedawna zaczynam uczyć się JavyScripta i w sumie jej dzieci czyli AJAX i jQuery.

Moim aktualnym celem jest stworznie menu, które po naciśnięciu będzie otwierało obok jakby dymek ze zlinkowanymi obrazkami.

Ogólnie to co próbowałem w czystej javie to zrobić

[HTML] pobierz, plaintext 
<a href="#" onclick="wykonaj('a')">a</a>
<div id="link_a">
<a href="#" onclick="wykonaj('b')">b</a>
<div id="link_b">
[HTML] pobierz, plaintext 

teraz w js

zapisuje sobie kod

[HTML] pobierz, plaintext 
function menu(gdzie)
{
var pole = document.getElementById('link_' + gdzie);
pole.class = "link_" + gdzie;
}
[HTML] pobierz, plaintext 

// funkcja w js teraz moze być błędnie zapisana bo do konca nie pamietam jak to leciało bo jestem w pracy ale jakoś tak.

Proszę mi powiedzieć, czy takie połączenie wystarczy by nadać div-owi o id link_a klasę link_a
Czy trzeba to zrobić trochę inaczej.

Oczywiście tego, że trzeba by jeszcze zapisywać czy jakiś jest otwarty i go zamykać to wiem chodzi mi jedynie o połączenie tego bo zapisująć tak nie działało mi to .

Ten post edytował strife 9.02.2012, 09:54:53

Powód edycji: [strife]: Dodanie BB Code

[strife]

Hej,

Nie jestem do końca pewien, ale to jest wynik tego co chcesz osiągnąć? http://www.designgala.com/demos/collapse-expand-jquery.html

Druga sprawa to taka, że wszystkie tagi muszą być pozamykane zawsze. I jak mówisz, że używasz jQuery to to rób, kod będziesz miał bardziej przejrzysty i łatwiejszy w dalszym rozwijaniu.

Jeżeli chcesz osiągnąć to co Ci podałem w linku wyżej to tak, wystarczy nadać odpowiednie klasy dla div'ów, które chcemy rozszerzać / chować, wtedy robisz akcję typu onClick na elemencie, który ma to powodować i odpowiednio to obsługujesz np. w jquery wystarczy stworzyć $.click, a w ciele tej funkcji ustawic $.toggle na elementach, które mają się chować, rozwijać.

np. http://api.jquery.com/toggle/

PS. Proszę, abyś używał BBCode do wstawiania kodu źródłowego.

PS2. I nie ładnie tak w pracy chodzić po forum

[Micchaleq]

Przepraszam ze podaje kogoś stronę, ale jest tutaj podobny efekt do tego który chce osiągnąć :

http://www.vert.pl/projektowanie-stron.html

tutaj boxy otwierają się w lewo.

Ja chcę to zrobić podobnie ale aby boxy otwierały się w górę. // ale to to już jest kwestia css-a



PS: Soki za bb, ale zapomniałem bo pisałem z palca.

PS2: wiem o divach ale to tak z rozpędu i PS wyżej

Ten post edytował Micchaleq 9.02.2012, 10:04:43

[strife]

No to tutaj będzie podobnie do tego co napisałem $.toggle(), np.

[HTML] pobierz, plaintext 
$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
  });
});
[HTML] pobierz, plaintext 

gdzie #clickme to element, który użytkownik klika, aby się coś rozwineło i teraz tam gdzie masz #book to jest ten div, który chcesz wyświetlić użytkownikowi i tyle. Zacznij od zaprojektowania prostego schematu w html'u najpierw, a potem się tym pobaw, ale z grubsza tak to będzie wyglądać. Od Ciebie zależy jak to będzie wyglądało, mechanizm działa tak, że po kliknięciu pojawi się div, po kolejnym schowa.

[Micchaleq]

W takim razie dziś sie tym pobawie, aktualnie dziękuje za pomoc jak cos napiszę to pokaże, pewnie będa błędy więc hmmm

Witam, muszę trochę odświeżyć temat, ponieważ mam jedno pytanie.

Zrobiłem juz sobie efekt który chciałem, jednak mam problem z pewnym mankamentem.

Otóż moje menu przylatuje mi z lewej strony ekranu zamiast się rozwijać. Jak temu zaradzić?

oto moje css:

[HTML] pobierz, plaintext 
#win_menu_bot{
	position: absolute;
	margin: -10px 0px 0px 783px;
	background-color: #e0d5c7;
	width: 215px;
	height: 20px;
	display: none;	
}
#win_menu{
	position: absolute;
	top: -510px;
	left: 498px;
	background-color: #e0d5c7;
	width: 500px;
	height: 500px;
	display: none;
	z-index: 1000;
}
[HTML] pobierz, plaintext 

i js

[PHP] pobierz, plaintext 
		$(".seo").click(function() 
			{
				if(menu != "seo"){
					hide();
					$('#seo_menu_bot').toggle('slow', function(){});
					$('#seo_menu').toggle('slow', function(){});
					menu = "seo";
				}else{
					$('#seo_menu_bot').toggle('slow', function(){});
					$('#seo_menu').toggle('slow', function(){});
					menu = "seo";
				}
			}
		);
[PHP] pobierz, plaintext 

Ten post edytował Micchaleq 13.02.2012, 10:55:34