Skromne przemyślenia…

Kolega prosił mnie żebym mu napisał prosty scrypcik który odkrywa pozycje menu i pokazuje w zależności od akcji klienta który ogląda daną stronkę . No więc zaczynamy

No więc na początku napiszmy prostą funkcje w JavaScript oto ona:

1
2
3
4
5
6
7
8
9
10
11
12

function changeDisplay(id) {
var element = document.getElementById(id);
var display_block_value = 'block';
var display_none_value = 'none';
if (element != null) {
if(element.style.display == display_block_value) {
element.style.display = display_none_value;
} else {
element.style.display = display_block_value;
}
}
}

Ok prawie już jesteśmy w domku teraz kawałek XHTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div style="cursor:pointer;" onclick="changeDisplay('child_kat_gl_1');">Kat GL 1</div>
<div id="child_kat_gl_1" style="border: 1px solid green; width: 80px; display: none;">
<div>LINK 1</div>
<div>LINK 2</div>
<div>LINK 3</div>
<div>LINK 4</div>
</div>
<div style="cursor:pointer;" onclick="changeDisplay('child_kat_gl_2');">Kat GL 2</div>
<div id="child_kat_gl_2" style="border: 1px solid blue; width: 80px; display: block;">
<div>LINK 1</div>
<div>LINK 2</div>
<div>LINK 3</div>
<div>LINK 4</div>
</div>

I to wszystko ??? Wydaje mi się ze tak teraz kwestia wytłumaczenia co się dzieje i jak to zaimplementować tak żeby to działa dobrze

W funkcja “changeDisplay” w atrybucje podajemy id elementu (obiektu DOM) któremu chcemy zmienić właściwość odpowiedzialną za wyświetlenie (ukrywanie i pokazywanie).

Co jest ważne przy implementacji kodu to to żeby te elementy które chcemy pokazywać lub chować muszą mieć zdefiniowanego styla display na block lub none to w zależności czy mają być elementy po załadowaniu strony widoczne czy też ukryte. Jeżeli chcemy żeby elementy były widoczne po załadowaniu strony to definiujemy im display:block; a jeżeli chcemy żeby były ukryte to definiujemy im display:none;

Ok bardzo fajnie wszystko ale myśl następna która się nasuwa to ok menu mi działa. Mamy menu które elementy głównych kategorii są ukryte dopiero po kliknięciu na nie pokazują się. Ok klikamy w jakiś odkryty element i strona się od nowa się generuje i co to powoduje, ze menu nam się generuje ale z ukrytymi elementami kategorii głównych. Co robimy w takiej sytuacji musimy przy danej stronie która się wygeneruje uruchomić funkcje “changeDisplay” z atrybutem (w naszym przypadku z nazwą głównej kategorii -> rodzica danej strony).

Do pobrania Pozycje Menu -> Ukrywanie i Pokazywanie