Rozwijane teksty na stronie


(Ciukis123ster) #1

Cześć mam problem.

Potrzebuję zrobić rozwijany tekst na stronie, coś w stylu:

Pkt 1 [rozwiń] //po kliknięciu rozwija się tekst, czy wygląda to mniej więcej tak:

Pkt1 [zwiń]

tekst lalala

I potrzebuje tak 3 punkty, czyli:

Pkt1 [zwiń]

tekst lalala

Pkt2 [zwiń]

tekst lalala

Pkt3 [zwiń]

tekst lalala

Znalazłem skrypt, który wykonuje jeden: http://forum.programosy.pl/rozwijany-te ... 25271.html <- ten z kolei powoduje, że po kliknięciu 'Read more' chowa to i rozwija całą stronę.

A ja, jak już wspomniałem potrzebuje czegoś takiego x3.

Wspomógłby ktoś skryptem?


(mario@) #2

http://api.jquery.com/category/effects/

i w zastosowaniu

http://api.jquery.com/slideToggle/

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

http://ferrante.pl/2007/08/07/jquery-to-latwe-3/

http://ferrante.pl/2007/08/03/jquery-to-latwe-2/

Jeżeli nie chcesz używać jquery to css+js.


(Ciukis123ster) #3

Wszystko fajnie, ale po skopiowaniu obojętnie jakiego kodu w celu sprawdzenia, przeglądarka i tak go nie obsługuje.

Czy trzeba coś dopisać, żeby wszystko trybiło, czy jak?

Ostrzegam, że nie znam języka javy i potrzebuje zwykłego prostego rozwiązania, którego mogę użyć.

Z góry dziękuj za pomoc


(mario@) #4

Nie javy tylko js. Tak potrzebujesz do tego bibliotekę jquery.

Masz tutaj coś na szybko napisane (wystarczy przekopiować i będzie działać - powinno :))

Info

asd

Info1

asd

Info2

asd
[/code]


(Ciukis123ster) #5

:slight_smile: Dzięki! !!


(mario@) #6

Mała poprawka, to

obiekty[i].getElementsByTagName('h2')[0].setAttribute("onclick","zwin(this)");

zastąp tym

obiekty[i].getElementsByTagName('h2')[0].onclick = function() {zwin(this)};

i powinno zacząć działać pod IE.


(Ciukis123ster) #7

Ok. A mam jeszcze pytanie, bo ogólnie jak zmieniam czcionkę, wielkość itd (nazwy info) to coś zaczyna szwankować, a plusy robią się strasznie duże.

Da radę coś z tym zrobić?:slight_smile:


(mario@) #8

Do tych plusów/minusów odwołujesz się tak (jeżeli nie ustawisz im stylów to będą one automatycznie dziedziczyły od h2)

.zwin h2 span {}

dla reszty z osobna możesz ponadawać klasy class="", bądź style ustawić dla wszystkich

.zwin h2 {}

.zwin p{}

oba sposoby można też połączyć. Główny div może mieć tylko jedną klasę - zwin.


(Ciukis123ster) #9

Nie rozumiem tego bo tak jak wcześnie już wspomniałem nie znam wcale tego języka, a tak z ciekawości się spytam:

ile uczyłeś się tego języka ?


(mario@) #10

Chyba wszystkie możliwości

Info

asd

Info1

asd

Info2

asd
[/code]

Usytuuj to analogicznie jak w powyższym skrypcie.

Jeszcze nie skończyłem :stuck_out_tongue:


(Ciukis123ster) #11

:slight_smile: teraz wszystko działa :))

tez mam zamiar się uczyć js i jestem ciekawy z czego najlepiej się uczyć może jakiś tytuł dobrej książki albo coś xD

jeszcze raz wielki dzięki :stuck_out_tongue:


(mario@) #12

http://www.w3schools.com/js/default.asp

http://www.howtocreate.co.uk/tutorials/javascript/

///////////////////////////////////////

Na prośbę jednego z użytkowników przerobiona wersja skryptu (daję tutaj bo może się komuś kiedyś przyda)


Tytul 1

jakas tam tresc

Tytul 2

jakas tam tresc

Tytul 3

jakas tam tresc

ser



Tytul 4

jakas tam tresc

tresc

Tytul 1

jakas tam tresc

Tytul 2

jakas tam tresc

Tytul 3

jakas tam tresc

Tytul 4

jakas tam tresc

[/code]


(1q2w3e4r) #13

Witam,

Dzięki za skrypt, mam tylko problem z nim w momencie gdy jest dużo zwiniętej treści. Zwija wszystkie elementy dopiero po całkowitym załadowaniu strony. Czy jest możliwość aby zwijało tekst od razu?


(Grzelix) #14

Jeśli chcesz zaraz po załadowaniu strony zwinąć wszystkie teksty to nie lepiej wczytać stronę która już ma je zwinięte ??


(1q2w3e4r) #15

Aby wczytać stronę, która ma je już zwinięte to musiało by nie być tego tekstu, który się rozwija. A więc pobieranie go dopiero wtedy gdy sie rozwija.

Jak zrobić aby nie czekało na załadowanie strony tylko żeby od razu uruchamiało skrypt i zwijało.


(Grzelix) #16

Chyba nie do końca rozumiesz jak działa ten skrypt. Tekst jest w pobranej stronie tylko jest niewidoczny. Ma ustawione display na none. Rozwijając zmieniasz właściwość display na block i wtedy się pojawia. Ale fizycznie cały czas jest. Js działa po stronie klienta więc zmiana tego parametru przez js musi pociągać ze sobą to że wszystkie niezbędne informacje są już po stronie klienta.

Owszem można by było zrobić taki trik że dopiero w momencie kliknięcia rozwiń wysyłał by żądanie do serwera o ten kawałek strony, ale to już nieco wyższy poziom.