MozillaPL.org - polskie centrum Mozilli

Główne menu:

[JS] Zwijanie / rozwijanie fragmentów strony

Jak tworzyć strony WWW zgodnie ze standardami

Moderator: Pomocy?!

[JS] Zwijanie / rozwijanie fragmentów strony

Postautor: trejder » 10 września 2007, 10:51

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Witam serdecznie,

Zachciało mi się zrobić tak, żeby pewien fragment strony można było zwinąć i rozwinąć w zależności od preferencji użytkownika. Na przykład mamy formularz i pod każdym ważniejszym polem jest opis, co należy w to pole wprowadzić (taki idiot-instruction). Domyślnie (przy załadowaniu strony) takie opisy są zwinięte. Ale jeśli ktoś nie wie, o co biega to sobie klika "rozwiń" i ma śliczny opis.

Użyłem takiego kodu JS - przyznam od razu i bez bicia, że zerżnięty skądś:

Kod: Zaznacz cały
function expand_collapse(expand)
{
     if(expand)
     {
     document.getElementById('contents').style.display = 'block';
     document.getElementById('expand').innerHTML='[<a onclick="expand_collapse(false); return false;" href="#">ukryj</a>]';
     }
     else
     {
     document.getElementById('contents').style.display = 'none';
     document.getElementById('expand').innerHTML='[<a onclick="expand_collapse(true); return false;" href="#">pokaż</a>]<br /><br />';
     }     
}


Wszystko gra i buczy, pod obiema przeglądarkami (FF i IE) i chyba nawet jest zgodne ze standardami W3C.

Tylko, że to fajnie działa, gdy ma się tylko jeden obszar do zwijania / rozwijania. Gdybym chciał mieć ich więcej - jak w przykładzie formularza opisywanym we wstępie - to musiałbym dla każdego fragmentu i klawisza "zwiń / rozwiń" definiować inne id (unikalne, np. "info1_contents", "info1_expand", "info2_contents", "info2_expand", itd.). Oraz dla każdego robić osobną funkcję JS.

Aby tego uniknąć chciałem wprowadzić dodatkowy parametr "nazwa", który by mówił funkcji, co do którego id ma dokonywać zmian. W moim zamyśle funkcja taka wyglądałaby tak:

Kod: Zaznacz cały
function expand_collapse(name, expand)
{
     if(expand)
     {
     document.getElementById(name + '_contents').style.display = 'block';
     document.getElementById(name + '_expand').innerHTML='[<a onclick="expand_collapse(\'' + name + '\', false); return false;" href="#">ukryj</a>]';
     }
     else
     {
     document.getElementById(name + '_contents').style.display = 'none';
     document.getElementById(name + '_expand').innerHTML='[<a onclick="expand_collapse(\'' + name + '\', true); return false;" href="#">pokaż</a>]<br /><br />';
     }     
}


Jednakże to nie działa. Dostaję błędy typu, że obiekt "name +'_expand'" nie ma żadnych właściwości.

Nie ukrywam - jestem cienias z JS. Dlatego, gdy wszystkie próby będące w zasięgu mojej wiedzy zawiodły, postanowiłem tu napisać. Być może ktoś będzie wiedział, co robię źle i będzie w stanie mi pomóc?

Z góry dziękuję i pozdrawiam!
trejder
 
Posty: 197
Z nami od: 20 stycznia 2005, 15:31
Lokalizacja: Katowice

Postautor: Grzegorz » 11 września 2007, 09:31

Przeglądarka: Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.8.1.6) Gecko/20070827 Ubuntu/7.10 (gutsy) Firefox/2.0.0.6

Spróbuj czegoś prostszego:

Sposób 1

W sekcję <HEAD> wklejamy:
Kod: Zaznacz cały
<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) :

Kod: Zaznacz cały
<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>


Musisz jeszcze dodać odpowiedni kod w plik stylu (css)
Kod: Zaznacz cały
#lista1, #lista2, #lista3, #lista4, #lista5
{
   display: none;
}


Sposób 2

Drugi sposób:

Do pliku css wklejamy:
Kod: Zaznacz cały
.h { display: none }
.v { display: block }


Do kodu strony w sekcji <BODY>:
Kod: Zaznacz cały
<script language="javascript" type="text/javascript">
   function rozwin(co){
with(document.getElementById(co)){className=className=='h'?'v':'h';}
   }
</script>


I, również do <BODY>
Kod: Zaznacz cały
<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ć.

Źródło: http://wiki.jogger.pl/wiki/Pokaz_Ukryj
GnuPG. Podpisuję własne wypowiedzi. | TrueCrypt. Ufam kryptografii, nie państwu. | Tor. Dbam o swoją prywatność. | OTR. Moje rozmowy nie są podsłuchiwane.

Załóż konto lub kup domenę WWW z linka polecającego: http://www.hekko.pl/?ref=34295
Grzegorz
Moderator
 
Posty: 7486
Z nami od: 15 kwietnia 2007, 12:33

Postautor: trejder » 11 września 2007, 13:51

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Witam!

Dzięki za odpowiedź. To rzeczywiście dużo prostszy sposób. Ale zauważ, że rozwiązuje on problem (czy też - naśladuje moje rozwiązanie) tylko połowicznie. Albowiem nie ma w nim nic do zmieniania zawartości klawisza (odnośnika) wywołującego pokazywanie / chowanie.

To w wielu przypadkach może być rzeczą ważną i to robi moje rozwiązanie. Czasem sprawa tyczy się tylko zwykłej podmiany "+" na "-", czy "pokaż" na "ukryj" - w zależności od stanu. Dla jednych to jest istotne, dla innych nie. Ja należę do tej pierwszej grupy.

Czasem jednak musisz dodać parę elementów HTML w jednym przypadku a w drugim nie. Np. ja mam taką sytuację, że pokazywana / ukrywana zawartość jest listą numerowaną (ol). Jak wiadomo - przeglądarki przed takimi listami dodają linię odstępu. Ale gdy ol (czy zawierający ją div) jest schowana, to już tego odstępu nie ma i następujący po ukrytej liście tekst brzydko przykleja się mi do tytułu.

W moim przypadku rozwiązaniem było dodawanie po klawiszu "zwiń / rozwiń" dodatkowego br, w sytuacji, gdy lista jest zwinięta. Ale może Wy znacie jakieś lepsze rozwiązanie.
trejder
 
Posty: 197
Z nami od: 20 stycznia 2005, 15:31
Lokalizacja: Katowice

Postautor: Grzegorz » 13 września 2007, 21:03

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.2; pl; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Dodatkowy padding lub marginesy dla DIVa, który jest ukrywany/pokazywany powinny załatwić sprawę z "brzydkim" brakim lub nadmiarem odstępu.
GnuPG. Podpisuję własne wypowiedzi. | TrueCrypt. Ufam kryptografii, nie państwu. | Tor. Dbam o swoją prywatność. | OTR. Moje rozmowy nie są podsłuchiwane.

Załóż konto lub kup domenę WWW z linka polecającego: http://www.hekko.pl/?ref=34295
Grzegorz
Moderator
 
Posty: 7486
Z nami od: 15 kwietnia 2007, 12:33

Postautor: Miśka » 07 października 2007, 18:16

Przeglądarka: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Neostrada TP 6.1; .NET CLR 1.1.4322)

Hej, Wykorzystałam pierwszy kod podany przez GrzegorzaJZD, wszystko jest okej, ale ja jestem ciemna i zupełnie nie mam pojęcia jaki kod wpisać żeby strona startowała od razu ze zwiniętym Menu. Da sie to w ogóle zrobić w tym kodzie? Prosze o pomoc ;)
Miśka
 

odp na pyt Miski

Postautor: goscinnieWW » 24 lutego 2009, 01:19

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Miśka pisze:Hej, Wykorzystałam pierwszy kod podany przez GrzegorzaJZD, wszystko jest okej, ale ja jestem ciemna i zupełnie nie mam pojęcia jaki kod wpisać żeby strona startowała od razu ze zwiniętym Menu. Da sie to w ogóle zrobić w tym kodzie? Prosze o pomoc ;)


Trzeba dodac to co jest w stylach, czyli {display: none}.
goscinnieWW
 

Postautor: Gość » 29 marca 2009, 12:06

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8 (.NET CLR 3.5.30729)

Witam serdecznie!

Czy do sposobu Grzegorza jest możliwe dopisanie skryptu odpowiadającego za zapisywanie w cookies - czy lista jest rozwinięta, czy też zwinięta?

Mowa o tym sposobie:

Kod: Zaznacz cały
Sposób 2

Drugi sposób:

Do pliku css wklejamy:
Kod:
.h { display: none }
.v { display: block }


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


I, również do <BODY>
Kod:
<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ć.
Gość
 

Odp: [JS] Zwijanie / rozwijanie fragmentów strony

Postautor: davebowman » 02 czerwca 2010, 22:33

Przeglądarka: Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.5.24 Version/10.53

Witam! Wykorzystałem pięknie działający "sposób 1" by GrzegorzJZD, zastanawiam się teraz co i gdzie dopisać, żeby kiedy rozwinie się jeden element, pozostałe automatycznie się chowały? Z góry dzięki za pomoc, pozdrawiam!
davebowman
 

Odp: [JS] Zwijanie / rozwijanie fragmentów strony

Postautor: Maciek S. » 27 lutego 2011, 11:42

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13

To w wielu przypadkach może być rzeczą ważną i to robi moje rozwiązanie. Czasem sprawa tyczy się tylko zwykłej podmiany "+" na "-", czy "pokaż" na "ukryj" - w zależności od stanu. Dla jednych to jest istotne, dla innych nie. Ja należę do tej pierwszej grupy.


Ten problem można chyba rozwiązać w dość prosty sposób, wprowadzając modyfikację:

Kod: Zaznacz cały
<script language="javascript" type="text/javascript">
   function rozwin(co,co2,co3){
with(document.getElementById(co)){className=className=='h'?'v':'h';}
with(document.getElementById(co2)){className=className=='h'?'v':'h';}
with(document.getElementById(co3)){className=className=='h'?'v':'h';}
   }
</script>


i następnie:

Kod: Zaznacz cały

<div class="tresc">
tu cos jest napisane
<div class="h" id="pokaz">to sie pokaze </div>
<a style="cursor: pointer; font-weight:bold;" onclick="rozwin('pokaz','rozwin1','zwin1')" id="rozwin1">Rozwiń...</a>
<a style="cursor: pointer; font-weight:bold;" onclick="rozwin('pokaz','rozwin1','zwin1')" id="zwin1" class="h">Zwiń...</a>
</div>

Maciek S.
 

Odp: [JS] Zwijanie / rozwijanie fragmentów strony

Postautor: seismics » 17 marca 2011, 16:35

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.11) Gecko/20100701 Firefox/3.5.11 ( .NET CLR 3.5.30729; .NET4.0C)

Przydało się Grzegorz. Dobra sprawa.
seismics
 

Odp: [JS] Zwijanie / rozwijanie fragmentów strony

Postautor: Styszma » 31 marca 2011, 09:29

Przeglądarka: Opera/9.80 (Windows NT 6.1; U; en) Presto/2.7.62 Version/11.01

Witam,

Mam pytanie dotyczące tego typu listy, a dopiero zaczynam swoją przygodę z JS. Potrzebuję stworzyć cennik tego typu:

I rodzaj produktów (zwiń/rozwiń):
- produkt 1 - [ ilość do wpisania] - cena za szt.
- produkt 2 - [ ilość do wpisania] - cena za szt.
- produkt 3 - [ ilość do wpisania] - cena za szt.
- produkt 4 - [ ilość do wpisania] - cena za szt.
II rodzaj produktów (zwiń/rozwiń):
- produkt 5 - [ ilość do wpisania] - cena za szt.
- produkt 6 - [ ilość do wpisania] - cena za szt.
- produkt 7 - [ ilość do wpisania] - cena za szt.
III rodzaj produktów (zwiń/rozwiń:
- produkt 1 - [ ilość do wpisania] - cena za szt.
- produkt 1 - [ ilość do wpisania] - cena za szt.
- produkt 1 - [ ilość do wpisania] - cena za szt.
etc. do 8-9 rodzajów usług
razem - {zsumowany wynik cen wszystkiego, co powyżej wpisał użytkownik] zł.

Czy ktoś z użytkowników miałby jakiś pomysł bądź rozwiązanie? Byłbym niewymownie wdzięczny :)
Styszma
 

Odp: odp na pyt Miski

Postautor: Gość » 04 listopada 2012, 09:50

Przeglądarka: Mozilla/5.0 (Windows NT 5.1; rv:14.0) Gecko/20100101 Firefox/14.0.1

goscinnieWW pisze:
Miśka pisze:Hej, Wykorzystałam pierwszy kod podany przez GrzegorzaJZD, wszystko jest okej, ale ja jestem ciemna i zupełnie nie mam pojęcia jaki kod wpisać żeby strona startowała od razu ze zwiniętym Menu. Da sie to w ogóle zrobić w tym kodzie? Prosze o pomoc ;)


Trzeba dodac to co jest w stylach, czyli {display: none}.



gdzie trzeba dodac te {display: none}?
Gość
 

Odp: [JS] Zwijanie / rozwijanie fragmentów strony

Postautor: Kayylen » 12 grudnia 2012, 23:49

Przeglądarka: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; MASMJS)

Maciek S. pisze:
Kod: Zaznacz cały
<script language="javascript" type="text/javascript">
   function rozwin(co,co2,co3){
with(document.getElementById(co)){className=className=='h'?'v':'h';}
with(document.getElementById(co2)){className=className=='h'?'v':'h';}
with(document.getElementById(co3)){className=className=='h'?'v':'h';}
   }
</script>

i następnie:
Kod: Zaznacz cały
<div class="tresc">
tu cos jest napisane
<div class="h" id="pokaz">to sie pokaze </div>
<a style="cursor: pointer; font-weight:bold;" onclick="rozwin('pokaz','rozwin1','zwin1')" id="rozwin1">Rozwiń...</a>
<a style="cursor: pointer; font-weight:bold;" onclick="rozwin('pokaz','rozwin1','zwin1')" id="zwin1" class="h">Zwiń...</a>
</div>


Z jednym elementem który ma się zwijać/rozwijać działa świetnie.

Jednak jak dodaje drugi element, który chce żeby się zwijał/rozwijał, (tzn skopiowałam to co było w div) i klikam przy tym drugim elemencie na rozwiń, to rozwija się pierwszy a nie drugi.

Co by trzeba było zrobić, żeby można mieć kilka takich elementów do zwinięcia/rozwinięcia?

Tu by trzeba było coś zmienić? Bo właśnie tak dałam, i czy klikałam przy pierwszym tekście czy przy drugim na rozwiń, to rozwijał się tylko pierwszy.
(1 element)
<div class="tresc">
TEKST1
<div class="h" id="pokaz">POJAWIA SIĘ JAKIŚ TEKST </div>
<a style="cursor: pointer; font-weight:bold;" onclick="rozwin('pokaz','rozwin1','zwin1')" id="rozwin1">Rozwiń...</a>
<a style="cursor: pointer; font-weight:bold;" onclick="rozwin('pokaz','rozwin1','zwin1')" id="zwin1" class="h">Zwiń...</a>
</div>

(2 element)
<div class="tresc">
TEKST2
<div class="h" id="pokaz">POJAWIA SIĘ JAKIŚ INNY TEKST </div>
<a style="cursor: pointer; font-weight:bold;" onclick="rozwin('pokaz','rozwin1','zwin1')" id="rozwin1">Rozwiń...</a>
<a style="cursor: pointer; font-weight:bold;" onclick="rozwin('pokaz','rozwin1','zwin1')" id="zwin1" class="h">Zwiń...</a>
</div>
Kayylen
 
Posty: 1
Z nami od: 12 grudnia 2012, 23:06

Odp: [JS] Zwijanie / rozwijanie fragmentów strony

Postautor: trafio » 21 kwietnia 2013, 14:16

Przeglądarka: Mozilla/5.0 (Windows NT 5.1; rv:20.0) Gecko/20100101 Firefox/20.0

Jaka byłaby różnica, gdyby to samo wykonać z użyciem pseudoklas?
trafio
 


Wróć do Tworzenie stron WWW

Kto jest online

Zarejestrowani użytkownicy: dexter

Przejdź do powiązanej strony

Nawigacja:

Stopka: