Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [php][jQuery] problem z wysuwanymi panelami
kamilo81
post
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 12.02.2010

Ostrzeżenie: (0%)
----- 

[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.
Go to the top of the page
+Quote Post
erix
post
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Dajesz przyciskom jakąś klasę. Potem, selektorem z jQuery (jaki? CSS) podpinasz zdarzenie onclick. Jeśli przerabiałeś tutoriale, to na pewno wiesz. (IMG:style_emoticons/default/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. (IMG:style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post
kamilo81
post
Post #3





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 12.02.2010

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
erix
post
Post #4





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
ID nie może być wyłącznie liczbą!

Co poczytać? http://api.jquery.com/click/ - wszystko Ci się rozjaśni.
Go to the top of the page
+Quote Post
kamilo81
post
Post #5





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 12.02.2010

Ostrzeżenie: (0%)
----- 

[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 (IMG:style_emoticons/default/sad.gif)
probuje dalej...

Ten post edytował kamilo81 13.02.2010, 21:24:51
Go to the top of the page
+Quote Post
erix
post
Post #6





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
A przejrzałeś przykłady w dokumentacji? Chyba nie.
Go to the top of the page
+Quote Post
kamilo81
post
Post #7





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 12.02.2010

Ostrzeżenie: (0%)
-----

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?

Ten post edytował kamilo81 14.02.2010, 10:25:45
Go to the top of the page
+Quote Post
« Następny starszy · PHP · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 02:14
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn