Pokaz Ukryj: Różnice pomiędzy wersjami

Z JoggerWiki
Skocz do: nawigacji, wyszukiwania
m
m (Literówka.)
 
(Nie pokazano 6 wersji utworzonych przez 4 użytkowników)
Linia 1: Linia 1:
 +
==Pierwszy sposób==
 
Na początku przyjmijmy iż zmienne <em>lista1 lista2 etc.</em> mogą być definiowane w dowolny sposób, lecz nie mogą się różnić tj. Jeśli w sekcji <b>a href</b> użyjemy <b>lista1</b> to poniżej w sekcji <b>div</b> musi także być <b>lista1</b>.  
 
Na początku przyjmijmy iż zmienne <em>lista1 lista2 etc.</em> mogą być definiowane w dowolny sposób, lecz nie mogą się różnić tj. Jeśli w sekcji <b>a href</b> użyjemy <b>lista1</b> to poniżej w sekcji <b>div</b> musi także być <b>lista1</b>.  
 
Przy każdej nowej liście musi być określony nowy znacznik (np. jeśli użyliśmy już lista1, to możemy użyć lista2).
 
Przy każdej nowej liście musi być określony nowy znacznik (np. jeśli użyliśmy już lista1, to możemy użyć lista2).
Linia 40: Linia 41:
 
<b>Uwaga: W przypadku braku obsługi JavaScript w przeglądarce odwiedzającego ukrywane listy nie będą widoczne.</b>
 
<b>Uwaga: W przypadku braku obsługi JavaScript w przeglądarce odwiedzającego ukrywane listy nie będą widoczne.</b>
  
'''Drugi sposób:''<br />
+
==Drugi sposób:==
 
Do pliku css wklejamy:
 
Do pliku css wklejamy:
 
<pre>.h { display: none }
 
<pre>.h { display: none }
 
.v { display: block }</pre>
 
.v { display: block }</pre>
 
Do kodu strony w sekcji &lt;BODY&gt;:
 
Do kodu strony w sekcji &lt;BODY&gt;:
<pre>&lt;!--
+
<pre><script language="javascript" type="text/javascript">
 
   function rozwin(co){
 
   function rozwin(co){
 
with(document.getElementById(co)){className=className=='h'?'v':'h';}
 
with(document.getElementById(co)){className=className=='h'?'v':'h';}
 
   }
 
   }
// End --&gt;</pre>
+
</script></pre>
 
I, również do &lt;BODY&gt;
 
I, również do &lt;BODY&gt;
<pre><a style="cursor: pointer" onclick="rozwin('INDENTYFIKATOR')">ELEMENT KLIKALNY</a>
+
<pre><a style="cursor: pointer" onclick="rozwin('IDENTYFIKATOR')">ELEMENT KLIKALNY</a>
<div cl=ass="h" id"INDENTYFIKATOR">TREŚĆ POJAWIAJĄCA SIĘ</div></pre>
+
<div class="h" id="IDENTYFIKATOR">TREŚĆ POJAWIAJĄCA SIĘ</div></pre>
Różni się tym od poprzedniego sposobu, że nie trzeba każdego ID do CSS'a dodawać :P
+
Różni się tym od poprzedniego sposobu, że nie trzeba każdego ID do CSS'a dodawać.
 +
 
 +
[[Kategoria:Pomoc]]

Aktualna wersja na dzień 15:43, 12 sie 2006

Pierwszy sposób

Na początku przyjmijmy iż zmienne lista1 lista2 etc. mogą być definiowane w dowolny sposób, lecz nie mogą się różnić tj. Jeśli w sekcji a href użyjemy lista1 to poniżej w sekcji div musi także być lista1. Przy każdej nowej liście musi być określony nowy znacznik (np. jeśli użyliśmy już lista1, to możemy użyć lista2). Warto pamiętać iż każdy ze znaczników (lista1, lista2, etc.) musi mieć swoje odwołanie w kodzie CSS.

W sekcję <HEAD> wklejamy:

<script type="text/javascript">
<!--
function pokazAlboUkryj(co) { 
     var obiekt = document.getElementById(co); 
     if (obiekt.style.display == 'block') { 
          obiekt.style.display = 'none'; 
     } else { 
          obiekt.style.display = 'block'; 
     } 
}
-->
</script>

W sekcję <BODY> (czyli tam gdzie ma być rozwijana lista) :

<a href="#lista1" onclick="pokazAlboUkryj('lista1'); return false;">tekst</a> 
<div id="lista1">
//tu umieszczamy nasz tekst, który ma się ukazać po kliknięciu//
</div>

Zapamiętaj! Zmienna lista1 w a onclick i identyfikator div muszą być takie same

Jeszcze wystarczy dodać kod w plik stylu (css)

#lista1, #lista2, #lista3, #lista4, #lista5
{
	display: none;
} 

// Identyfikatory lista1, lista2, lista3 itp. są użyte przykładowo.

Uwaga: W przypadku braku obsługi JavaScript w przeglądarce odwiedzającego ukrywane listy nie będą widoczne.

Drugi sposób:

Do pliku css wklejamy:

.h { display: none }
.v { display: block }

Do kodu strony w sekcji <BODY>:

<script language="javascript" type="text/javascript">
   function rozwin(co){
with(document.getElementById(co)){className=className=='h'?'v':'h';}
   }
</script>

I, również do <BODY>

<a style="cursor: pointer" onclick="rozwin('IDENTYFIKATOR')">ELEMENT KLIKALNY</a>
<div class="h" id="IDENTYFIKATOR">TREŚĆ POJAWIAJĄCA SIĘ</div>

Różni się tym od poprzedniego sposobu, że nie trzeba każdego ID do CSS'a dodawać.