Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [php][jQuery] problem z wysuwanymi panelami
Forum PHP.pl > Forum > PHP
kamilo81
13.02.2010, 18:44:51 
[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2. 		$(function(){
  3.  
  4. 			$(".panel").hide();
  5. 			$(".slide_button#1").toggle(function(){
  6. 				$(".panel#p1").show(300);
  7. 				$(this).addClass("zamknij"); 
  8. 				return false;
  9. 			},
  10. 			function(){	
  11. 				$(".panel#p1").hide(300)
  12. 				$(this).removeClass("zamknij"); 
  13. 				return false;
  14. 			});
  15.  
  16. 		});
  17. 	</script>
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. <a href="#" class="slide_button" id="1"></a>
  2.  
  3. <div class="panel" id="p1">
  4. 	Walka sie nie odbyla				
  5. </div>
  6.  
  7. <a href="#" class="slide_button" id="2"></a>
  8.  
  9. <div class="panel" id="p2">
  10. 	Walka sie nie odbyla				
  11. </div>
  12.  
[PHP] pobierz, plaintext



CSS

/*----------panel----------*/
.panel
{
background: #223344;
padding: 10px;
width: 350px;
position: relative;
left: 24.5%;


}


/*---------przycisk panelu--------*/
.slide_button
{
background: url(images/button.png);
display: block;
height: 20px;
//text-indent: -9999px;
width: 120px;
}

.zamknij
{
background-position: 0px -20px;
}



Problem polega na tym, ze chcialbym tak samo zdefiniowanym przyciskiem otwierac rozne Divy(panele).
Jedyny pomysl jaki mam to jakos przekazac zmienna Id z linka od przycisku i Id z Diva do Scryptu, ale nie mam pojecia jak to zrobic. Nie wykluczam ze jest to glupi sposob, ale jestem jeszcze za malo obeznany w tej tematyce, wiec prosze o pomoc.

Pozdrawiam.
erix
13.02.2010, 19:32:11
Dajesz przyciskom jakąś klasę. Potem, selektorem z jQuery (jaki? CSS) podpinasz zdarzenie onclick. Jeśli przerabiałeś tutoriale, to na pewno wiesz. winksmiley.jpg

A jeśli chodzi o pobranie ID, to masz taką metodę, jak attr(). Używasz jej wewnątrz zdarzenia onclick, w kontekście bieżącego elementu, czyli;
[JAVASCRIPT] pobierz, plaintext 
  1. $(this).attr()
[JAVASCRIPT] pobierz, plaintext


Dostałeś wędkę, teraz pora na łowy. winksmiley.jpg
kamilo81
13.02.2010, 20:09:19
chyba potrzebuje troszke jasniej :/

przyciski maja klase(kazdy taka sama) i Id (rozne dla kazdego przycisku)
[PHP] pobierz, plaintext 
  1. <a href="#" class="slide_button" id="1"></a>
[PHP] pobierz, plaintext


onclick mam podpiac w linku do przycisku?
cos w ten desen:

[PHP] pobierz, plaintext 
  1. <a href="#" class="slide_button" id="1" onclick=" "></a>
[PHP] pobierz, plaintext

Ale w jakim celu ma tego uzyc?


probowalem zrobic cos takiego: var zm= $("a").attr("id"); wewnatrz kodu jQuery

jestem chociaz blisko ;p? O czym mam poczytac zeby dojsc do rozwiazania?
erix
13.02.2010, 20:24:48
ID nie może być wyłącznie liczbą!

Co poczytać? http://api.jquery.com/click/ - wszystko Ci się rozjaśni.
kamilo81
13.02.2010, 21:24:16 
[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2. 		$(function(){
  3.  
  4. 			$(".panel").hide();
  5. 			$('.slide_button#'+zm).toggle(function(){
  6. 				$('.panel#'+zm).show(300);
  7.  
  8. 				$(this).addClass("zamknij"); 
  9. 				return false;
  10. 			},
  11. 			function(){	
  12.  
  13.  
  14. 				$('.panel#'+zm).hide(300)
  15. 				$(this).removeClass("zamknij"); 
  16. 				return false;
  17. 			});
  18.  
  19. 		});
  20. </script>
  21.  
  22. <a href="#" class="slide_button" id="p1" onClick="$(this).attr('id')"></a>
  23.  
  24. <script>
  25. 	var zm=($("a").attr("onClick"));
  26. </script>
[PHP] pobierz, plaintext


cos ciagle nie moge tej zmiennej pobrac... to udalo mi sie napisac ale nie smiga sad.gif
probuje dalej...
erix
13.02.2010, 21:48:23
A przejrzałeś przykłady w dokumentacji? Chyba nie.
kamilo81
13.02.2010, 22:53:17
Wszystko działa:)


[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  4. <script type="text/javascript">
  5. var zm=' '
  6. 		$(function(){
  7. 			$(".panel").hide();
  8. 			$('.slide_button#'+zm).toggle(function(){
  9. 				$('.panel#'+zm).show(300);
  10. 				$(this).addClass("zamknij"); 
  11. 				return false;
  12. 			},
  13. 			function(){	
  14. 				$('.panel#'+zm).hide(300)
  15. 				$(this).removeClass("zamknij"); 
  16. 				return false;
  17. 			});
  18.  
  19. 		});
  20. 	</script>
  21. </head>
  22.  
  23. <body>
  24. <a href="#" class="slide_button" id="p1"></a>
  25.  
  26. <div class="panel" id="p1">
  27.  
  28. 	Walka sie nie odbyla	
  29.  
  30. </div>
  31.  
  32. <a href="#"  class="slide_button" id="p2"></a>
  33.  
  34.  
  35. <div class="panel" id="p2">
  36.  
  37. 	Walka sie nie odbyla jeszcze	
  38.  
  39. </div>
  40.  
  41. <script>
  42.     $("a").click(function () { 
  43.       zm=$(this).attr("id");
  44.     });
  45. </script>
  46. </body>
  47. </html>
[PHP] pobierz, plaintext


A teraz pytanko? Da sie to zrobic inaczej? Prosciej?
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.