[jQuery] menu z warstwą po kliknięciu na konkretną pozycje, tym razem na prawdę potrzebuje czyjejś pomocy! Opcje

[Fo]

Witam,

Od razu na wstępie chciałem zaznaczyć, że rzeźnikiem w jQuery nie jestem - trochę czytam w momencie kiedy potrzebuje... ale nigdzie nie mogę wyczytać jak poradzić sobie z tym problemem na który obecnie się nadziałem.

Co do założeń: mam listę linków i jak klikam na konkretny link to pokazuje mi się konkretna warstwa a jak zjeżdżam kursorem z tej warstwy to ona sie chowa.

Doszedłem do momentu, że robię prosty switchclass i dzięki temu chowam i pokazuje warstwę ale w momencie kiedy jest więcej kodu to jak kliknę w jeden odnośnik to pokazują mi się wszystkie warstwy a chciałbym by pokazywała się tylko ta konkretna - o konkretnym ID (dla konkretnie klikniętego linka) - ale nie wiem jak właśnie nadać dla konkretnej warstwy konkretne ID i później operować w jquery po konkretnym ID żeby też nie stworzyć jakiegoś niewiadomo jak długiego kodu.

To co mam obecnie to:

[HTML] pobierz, plaintext 
<div id="tabs">
		<ul class="col">
        	<li>
            	<a href="#" class="trigger">This is link</a>
                <span class="layer hideit">
                this is layer
                </span>
            </li>
            <li>
            	<a href="#" class="trigger">This is other link</a>
                <span class="layer hideit">
                this is layer too
                </span>                
            </li>
            <li>
            	<a href="#" class="trigger">This is another link</a>
                <span class="layer hideit">
                and this is another
                </span>                
            </li>
            <li>
            	<a href="#" class="trigger">And another one</a>
                <span class="layer hideit">
                here the same
                </span>                
            </li>
            <li>
            	<a href="#" class="trigger">and so on..</a>
                <span class="layer hideit">
                and here also
                </span>                
            </li>
        </ul>
</div>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
$(document).ready(function(){
		$("#tabs .trigger").click(function(){
			$(".hideit").switchClass('hideit', 'showit', 200);
			$(".showit").switchClass('showit', 'hideit', 0);
			return false;	
		});
});
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
#tabs .col {list-style:none;padding:0px;margin:0px;float:left;width:242px;line-height:20px;}
#tabs .col li {font-size:12px;color:#000;}
#tabs .col li a {color:#000;}
#tabs .layer {display:block;position:absolute;width:500px;height:500px;}
#tabs .hideit {background:blue;display:none;visibility:hidden;height:0px;width:0px;}
#tabs .showit {background:red;display:block;visibility:visible;height:500px;width:500px;}
[HTML] pobierz, plaintext 

Jak sprawić by w momencie kiedy klikam w konkretny link to żeby pokazała mi się tylko ta konkretna warstwa a nie wszystkie ?
Dodatkowo jak to zrobić, żeby w momencie kiedy mam kursor na tej warstwie to ona jest widoczna ale jak z niej zjade kursorem to się chowa?

Byłbym bardzo wdzięczny za odpowiedź, niestety nie potrafię sobie poradzić z tym problemem - nie znam jako tako całego jQuery - sięgam do niego tylko w momencie kiedy na prawdę muszę ale tym razem nie udało mi się znaleźć rozwiązania adekwatnego do moich potrzeb.

Ten post edytował Fo 16.04.2010, 23:14:43

[mortus]

Na przykład tak:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
		$("#tabs .trigger").click(function(){
                        $(this).parent().find(".hideit").switchClass('hideit', 'showit', 200);
                        $(this).parent().find(".showit").switchClass('showit', 'hideit', 0);
			return false;	
		});
});
[JAVASCRIPT] pobierz, plaintext 

[Fo]

@mortus dzięki ale to trochę nie działa tak jak powinno :/

teraz jak klikam np. w link 1 -> to się pokazuje warstwa ale jak klikam zaraz potem w link 2 to się pokazuje również druga warstwa z tym że pierwsza nie ginie.

a chodzi mi konkretnie o to:
1) klikam link 1 -> pokazuje się warstwa 1
2) zjeżdżam kursorem z warstwy 1 i ona znika (czyli chyba onmouseout)
3) klikam link nr. 598 i pokazuje mi się warstwa (span class layer) nr. 598

czyli tak na dobra sprawe to brakuje mi tego onmouseout jeszcze. bo to generalnie jest takie menu, które ma w sobie pozycje. jak klikam na którąś z pozycji to się pokazuje warstwa, jak zjeżdżam z tej warstwy kursorem (no żeby coś innego kliknąć) to wtedy ta którą już otworzyłem (kliknąłem) znika i mam możliwość kliknięcia innej.

Ten post edytował Fo 17.04.2010, 01:59:56

[mortus]

No to uzupełnijmy poprzedni kod:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
                $(".showit").mouseout(function() {
                        $(this).switchClass('showit', 'hideit', 0);
                });
		$("#tabs .trigger").click(function(){
                        $(this).parent().find(".hideit").switchClass('hideit', 'showit', 200);
                        $(this).parent().find(".showit").switchClass('showit', 'hideit', 0);
			return false;	
		});
});
[JAVASCRIPT] pobierz, plaintext 

[Fo]

dalej nie działa :/ efekt jest taki sam jak poprzednio czyli: a) jak klikam w jakiś link to otwiera się warstwa (dotąd jest OK) ale później jak klikam w drugi link to ta pierwsza warstwa się nie chowa i pokazuje się do tego jeszcze druga - ta którą właśnie kliknąłem. no i ten onmouseout nie działa :/

edit: dobra poprawiłem i działa.

źle była część odnośnie mouseout, poprawnie jest tak:

[JAVASCRIPT] pobierz, plaintext 
$(".hideit").mouseout(function() {
						$(this).switchClass('showit', 'hideit', 0);
				});
[JAVASCRIPT] pobierz, plaintext 

dzięki CI bardzo mortus!!

Ten post edytował Fo 17.04.2010, 13:53:52

[mortus]

Spróbuj jeszcze tak:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
                $(".showit").live("mouseout", function() {
                        $(this).switchClass('showit', 'hideit', 0);
                });
		$("#tabs .trigger").click(function(){
                        $(this).parent().find(".hideit").switchClass('hideit', 'showit', 200);
                        $(this).parent().find(".showit").switchClass('showit', 'hideit', 0);
			return false;	
		});
});
[JAVASCRIPT] pobierz, plaintext 

i pokaż aktualny kod.

EDIT:
Ehh. Pewnie onmoseout wpisałeś?

Ten post edytował mortus 17.04.2010, 13:56:28

[Fo]

no właśnie zamiast .hideit dałeś .showit w pierwszej linii i przez to było źle.

teraz mam tylko ostry zgryz z z-indexami, bo mi pod ie6 i ie7 jakby linki nie giną w momencie jak sie warstwa pokazuje, która to warstwa nachodzi na te linki ale to już chyba inne forum.

aktualny kod jest taki tego przełączania:

[JAVASCRIPT] pobierz, plaintext 
 
$(document).ready(function(){
 
		$("#tabs .trigger").click(function(){
                        $(this).parent().find(".hideit").switchClass('hideit', 'showit', 200);
			return false;	
		});
                $(".hideit").mouseout(function() {
                        $(this).switchClass('showit', 'hideit', 0);
                });
 
});
[JAVASCRIPT] pobierz, plaintext 

a jeszcze jedno może ktoś wie.

w tej warstwie mam inne linki i elementy typu ul, li a, h3, h4 i jak najade na któryś z tych elementów to mi ta warstwa znika :/ a ma zniknąć dopiero jak zjade z warstwy a nie najade na jakiś element w niej.

kawałek kodu odpowiedzialny za to to:

[JAVASCRIPT] pobierz, plaintext 
$("#tabs .hideit").mouseout(function() {
		$(this).switchClass('showit', 'hideit', 0);
});
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował Fo 17.04.2010, 19:39:10

[zegarek84]

a jeszcze jedno może ktoś wie.

w tej warstwie mam inne linki i elementy typu ul, li a, h3, h4 i jak najade na któryś z tych elementów to mi ta warstwa znika :/ a ma zniknąć dopiero jak zjade z warstwy a nie najade na jakiś element w niej.

kawałek kodu odpowiedzialny za to to:

[JAVASCRIPT] pobierz, plaintext 
$("#tabs .hideit").mouseout(function() {
		$(this).switchClass('showit', 'hideit', 0);
});
[JAVASCRIPT] pobierz, plaintext 

skoro masz kilka elementów więc działa poprawnie gdyż przechodząc do innego elementu mimowolnie jest przekazywana akcja .mouseout

rozwiązaniem w jQuery jest .mouseleave() (choć w przykładzie na dole powinni dać 2 zmienne coby osobno te warstwy zliczać ;p)...

teraz mam tylko ostry zgryz z z-indexami, bo mi pod ie6 i ie7 jakby linki nie giną w momencie jak sie warstwa pokazuje, która to warstwa nachodzi na te linki ale to już chyba inne forum.

to forum jest odpowiednie - w sumie na problem nie trafiłem od razu choć sam zawsze wykorzystywałem pewną własność i prawie nigdy nie pisałem z-index... i teraz zanim zacytuję napiszę, iż nawet jeśli nie nadasz z-index to jest on relatywny względem rodzica w kolejności występowania elementów... i dalej w tych nowszych przeglądarkach jak się nadaje z-index to podobnie jak z pozycjonowaniem powinien być dla potomków ustanawiany względem rodzica któremu nadało się z-index -> no niestety w IE6/7 tak nie jest

A teraz wyjaśnienia. Internet Explorer ustawia kolejność elementów z pozycjonowaniem absolutnym względem pola nadrzędnego. Czyli dwa pola blokowe z pozycjonowaniem relatywnym (a w nich pola absolutne) są liczone od 0! Im niżej w kodzie html znajduje się pole tym wyżej będzie w IE

choć nie do końca jest jak to co zacytowałem powyżej ;p - bardziej tak jakby rodzic był pozycjonowany tą samą wartością z-index (choć Ty go nie pozycjonujesz z-index) i tak jakby choć się nie ustawia po przecinku to raczej bardziej obrazuje, że w przeglądarce jest jeszcze coś dodawane lub drugi licznik którego się nie ustawia

rozwiązanie?? - nadaj z-index dla pola listy <li> od ostatniego elementu 1 do pierwszego max (przelecisz to skryptem od tyłu)...

i a propo uwagi co pisałem -> więc nie potrzebujesz ustawiać z-index na tych linkach i na .showit

albo inne rozwiązanie to zrobić menu od końca ;p - czyli pierwszy element jako ostatni itd. - czyli nie float: left a right (i sam dom odpowiednio wtedy nada z-index a Ty nic nie będziesz musiał robić)

Ten post edytował zegarek84 17.04.2010, 22:57:46