Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Wysuwany panel i zmiana klasy
Forum PHP.pl > Forum > XML, AJAX
oomaster
16.04.2010, 21:20:33
Witam,

Kompletnie nie mogę zaradzić problemu który mi się pojawił. Otóz mam kod

[HTML] pobierz, plaintext 
  1. <a href="#" id="link"><div id="hide"></div></a>
  2.  
  3. <p id="more" style="display: none;">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
[HTML] pobierz, plaintext

Mało poprawny ale jest winksmiley.jpg
[JAVASCRIPT] pobierz, plaintext 
  1. <script type="text/javascript">
  2. 	$(document).ready(
  3. 	function()
  4. 	{	
  5. 		$("#link").click(
  6. 		function()
  7. 		{
  8. 			$("#more").toggle("normal");
  9. 		}).toggle(function() { $(this).html("<div id=hide></div>"); }, function() { $(this).html("<div id=hideou></div>"); });
  10. 	});
  11. </script>
[JAVASCRIPT] pobierz, plaintext

Chodzi o to aby po kliknięciu w ahrefa link wyświetliła się treść more i zmieniła klasa i w odwrotnie. Czy w ogóle istnieje takie coś w jQuery jak .html ? Jak to zrealizować ?
230005
16.04.2010, 21:29:57 
[JAVASCRIPT] pobierz, plaintext 
  1.  
  2. $('#link').toggle(function() {
  3.   $('#more').show('slow').attr('class', 'nowa_nazwa');
  4. }, function() {
  5.   $('#more').hide('slow').attr('class', 'stara_nazwa');
  6. }
  7.  
[JAVASCRIPT] pobierz, plaintext
oomaster
16.04.2010, 21:45:13
Być może źle się zrozumieliśmy smile.gif Klasa div id=hide ma zmieniać się na div id=hideou. Reszta klas zostaje bez zmian jakichkolwiek
erix
16.04.2010, 22:57:32
Cytat
Chodzi o to aby po kliknięciu w ahrefa link wyświetliła się treść more i zmieniła klasa i w odwrotnie. Czy w ogóle istnieje takie coś w jQuery jak .html ? Jak to zrealizować ?

Owszem, istnieje. Wystarczy sprawdzić w dokumentacji.

Cytat
Klasa div id=hide ma zmieniać się na div id=hideou. Reszta klas zostaje bez zmian jakichkolwiek

[JAVASCRIPT] pobierz, plaintext 
  1. $().removeClass('hide').addClass('hideou');
[JAVASCRIPT] pobierz, plaintext


To jest KLASA, a nie identyfikator - uściślij, czego chcesz używać. Domniemam, że klasy. winksmiley.jpg
oomaster
17.04.2010, 10:20:22
Dzięki wielkie już teraz wszystko elegancko chodzi.

Ale jak można zmienić sposób wyłaniania panelu ? Bo aktualnie wyjawia się z lewej strony buduje w prawą i w dół a jak zrobić aby równą szerokością pojawiał się ? Mam nadzieje ,że wiecie o jaki efekt chodzi smile.gif
vokiel
17.04.2010, 10:45:16
To co chcesz zrealizować, możesz zrobić na wiele, wiele sposobów.

Rozumiem, że chcesz mieć przycisk, który pokaże jakiś akapit poniżej i sam się zmieni, że został rozwinięty (np ma napis pokaż i chcesz go zamienić na ukryj)
[HTML] pobierz, plaintext 
  1. <a href="#" id="link">obrazkowy rozwiń</a>
  2. <p  id="more">bla bla bla</p>
[HTML] pobierz, plaintext

Po kliknięciu w ten obrazek rozwiń zmieniasz jego klasę na zwiń, a paragraf rozwijasz w dół, bądź zwijasz. Czyli
[JAVASCRIPT] pobierz, plaintext 
  1. $(document).ready(function(){
  2.     $('#link').click(function(){
  3.         $(this).toggleClass('hide'); // możesz ostylować element w stanie rozwiń, a klasa hide zmieni go w drugi stan    
  4.         $('#more').slideToggle();
  5.     });
  6. });
[JAVASCRIPT] pobierz, plaintext

Możesz też użyć toggle na link
[JAVASCRIPT] pobierz, plaintext 
  1. $('#link').toggle(function() {
  2.     $(this).removeClass('hide');
  3.     $('#more').slideDown();
  4. }, function() {
  5.     $(this).addClass('hide');
  6.     $('#more').slideUp();
  7. }
[JAVASCRIPT] pobierz, plaintext
oomaster
17.04.2010, 12:07:20
Wszystko działa sama funkcja .slideToggle() rozwiązała problem smile.gif
meteopata
1.08.2012, 10:12:04
Witam,
dołączę się do tematu ze względu na pokrewieństwo.
Cytat
Mam tabele generowaną w php o zmiennej ilości wierszy w zależności od wybranego dokumentu który przedstawia ów tabela.
Każdy z wierszy posiada ukryty wiersz poniżej w którym są informacje szczegółowe dotyczące wiersza jawnego.
Moim celem jest odkrycie tylko jednego wiersza ukrytego należącego do wiersza "macierzystego" poprzez kliknięcie w zawartość wiersza odkrytego.

Chciałem również zrobić to w taki sposób, że kiedy kliknie się w inny jawny wiersz, otworzy się ukryta zawartość, a schowa się zawartość wiersza poprzednio odkrytego.


-- wiersz jawny --
- > wiersz ukryty --
-- wiersz jawny --
- > wiersz ukryty --
itd

Chciałem użyć zmiany class z .zamkniety na .otwarty gdzie

Klasy css
[CSS] pobierz, plaintext 
  1. .zamkniety { display: none; }
  2. .otwarty {  }
[CSS] pobierz, plaintext



Skrypt wywołujący zmianę klasy wiersza
[JAVA] pobierz, plaintext 
  1. <script type= "text/javascript">
  2. function rozwinwiersz(otwarty, zamkniety) {
  3. var el = document.getElementById(zamkniety);
  4. el.className = otwarty;
  5. }
  6. </script>
[JAVA] pobierz, plaintext




Link aktywujący zmianę
[HTML] pobierz, plaintext 
  1. <a href="java script:void(rozwinwiersz('otwarty', 'zamkniety'))">Zmień klasę</a>
[HTML] pobierz, plaintext


Skrpyt działa, ale odkrywa tylko pierwszy ukryty wiersz w tabeli i nic poza tym.

Wiem, że istnieje sposób natomiast nie wiem jaki, gdyż nie jestem biegłym programistą. Czy mogę prosić o wskazówki?


________________________________________
Witam ponownie,

zrobiłem pewien postęp gdyż żadna z metod nie była skuteczna.
Zagłębiłem się w prezentowane tutaj przykłady i co następuje.

W tabeli są 4 wiersze, widoczne są parzyste czyli wiersz 0 i 2, nieparzyste są ukryte display: none.

Wiersze są zbudowane tak samo żeby mogły wyzwolić funkcję odkrywającą ukryty pod sobą wiersz, jednak ten skrypt odkrywa tylko pierwszy ukryty wiersz, chowając macierzysty.

Jak zrobić tak by każda następna para działała według zasady odkryj wiersz ze szegółami, ukryj poprzedni odkyty, nie zaś macierzysty?

Z góry dziękuję i pozdrawiam

[HTML] pobierz, plaintext 
  1.  
  2. <HTML>
  3. <HEAD>
  4. 	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  5. 	<style type="text/css" media="all">
  6.  
  7. 		.ukryty { display: none; }
  8. 		.widoczny {  }
  9. 	</style>
  10.  
  11. </HEAD>
  12. <BODY>
  13.  
  14. <script type="text/javascript">
  15.  
  16. $(document).ready(function(){
  17.     $('#rozwin').click(function(){
  18.         $(this).toggleClass('ukryty'); // jeśli usunę klasę 'ukryty', wiersz macierzysty pozostanie widoczny tu nie ma problemu ale nie wiem jak to wykorzystać do przełączania widoczności wierszy dzieci
  19.         $('#ukryty').slideToggle();
  20.     });
  21. });
  22.  
  23. </script>
  24.  
  25. <TABLE border='1'>
  26. 	<TR id="rozwin">     <!-- pierwszy wiersz macierzysty, klikając gdziekolwiek na nim, odkryje się wiersz dziecko -->
  27. 		<TD>
  28. 			rozwiń 1
  29. 		</TD>
  30. 		<TD> dane1  dane</TD>
  31. 		<TD>dane dane</TD>
  32. 		<TD>dane 6 dane</TD>
  33. 		<TD>go</TD>
  34. 	</TR>
  35.  
  36. 	<TR id="ukryty" style="display: none;"> <!-- wiersz dziecko, rozwija się bez problemu -->
  37. 		<TD>szczegoly</TD>                       <!-- właściwie to jest jeden problem, wyświetla tabelę jako display: block, jak to wyświetlić jako display'' bez block -->
  38. 		<TD>itd3123</TD>
  39. 		<TD>itd</TD>
  40. 		<TD>itd3123</TD>
  41. 		<TD>itd</TD>
  42. 	</TR>
  43.  
  44. 	<TR id="rozwin"> <!-- wiersz macierzysty drugi, nie działa nawet jak spróbuję odpalić go jako pierwszy, nie działa również, na wiersz ukryty wyżej -->
  45. 		<TD>           <!-- wierszy będzie zmienna ilość od jednego, przez 3 aż po sto ileś -->
  46. 			rozwiń 2 
  47. 		</TD>
  48. 		<TD> dane 4 dane</TD>
  49. 		<TD>dane 5 dane</TD>
  50. 		<TD>dane4  dane</TD>
  51. 		<TD>go</TD>
  52. 	</TR>
  53.  
  54. 	<TR id="ukryty" style="display: none;"> <!-- siłą rzeczy ten wiersz jest ukryty cały czas
  55. 		<TD>szczegoly 2 </TD>
  56. 		<TD>itd 1</TD>
  57. 		<TD>itd</TD>
  58. 		<TD>itd</TD>
  59. 		<TD>itd 12312</TD>
  60. 	</TR>
  61.  
  62. </TABLE>
  63.  
  64. </BODY>
  65. </HTML>
  66.  
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.