Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] Zakładki w zakladkach
Forum PHP.pl > Forum > Po stronie przeglądarki
daggerski
3.08.2011, 22:10:50
Witam mam problem otóż muszę zrobić bardzo obszerne menu na stronie. Polega to na tym że mam lewe główne menu w którym mam 7 buttonów. Za pomocą jquery a dokładnie takiego skryptu 

[HTML] pobierz, plaintext 
  1.  <div id="menuleft">
  2.               <ul id="bookmarks">
  3.                   <li> jeden <a href="#"><img class="kliczek" src="images/klik.png" alt="klik" /></a></li>
  4.  
  5.                   <li dwa<a href="#"><img src="images/klik.png" alt="klik" /></a></li>
  6.  
  7.                   <li>trzy<a href="#"><img src="images/klik.png" alt="klik" /></a></li>
  8.  
  9.                   <li>cztery<a href="#"><img src="images/klik.png" alt="klik" /></a></li>
  10.  
  11.                   <li> piec<a href="#"><img src="images/klik.png" alt="klik" /></a></li>
  12.  
  13.                   <li>szesc <a href="#"><img src="images/klik.png" alt="klik" /></a></li>
  14.  
  15.                   <li>siedem <a href="#"><img src="images/klik.png" alt="klik" /></a></li>
  16.               </ul>
  17.               </div>
[HTML] pobierz, plaintext 





[XML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. 		$().ready(function()
  3.  
  4.     {
  5.  
  6.       $("ul#bookmarks li a").click(function()
  7. 			{
  8.  
  9.         $("ul#bookmarks .active").removeClass("active");
  10. 				$(this).parent().addClass("active");
  11.  
  12. 				var element_index = $("#bookmarks a").index(this);
  13.  
  14. 				$("#oferta div:visible").hide();
  15. 				$("#oferta div").eq(element_index).show();
  16.  
  17. 				return false;
  18. 			});
  19. 		});
  20.  
  21.  </script>
[XML] pobierz, plaintext



content strony zmienia się jak w normalnych zakładkach. Z ta różnicą ze content jest generowany przez pętle w php wyciągając rekordy z bazy danych: 

[PHP] pobierz, plaintext 
  1.  
  2.  
  3.          <div id="jednoroczne" style="overflow: scroll;">
  4. <?php
  5. $zapytanie1 = "SELECT * FROM `jednoroczne` " ;
  6. 			$info1 = mysql_query($zapytanie1);
  7. 			while ($ro=mysql_fetch_array($info1)) { 
  8.  
  9.  
  10.                          echo '<ul>';
  11.  
  12.         echo '<li class="nazwa">'.$ro[1].'</li>'."\n";
  13.        echo '<li class="ilosc">'.$ro[2].'</li>'."\n";
  14.        echo '<li class="klik"><a href="#"><img src="images/klik.png" alt="klik" /></a></li>'  ;
  15.        echo '</ul>' ;
  16.                }
  17.  
  18.     ?>
  19.         </div>
  20.  
  21.  
  22.  
  23.          <div id="dwuletnie" style="overflow: scroll;">
  24.         		<?php
  25.             $zapytanie1 = "SELECT * FROM `dwuletnie` " ;
  26. 			$info1 = mysql_query($zapytanie1);
  27. 			while ($row=mysql_fetch_array($info1)) { 
  28.  
  29.  
  30.                          echo '<ul>';
  31.  
  32.         echo '<li class="nazwa">'.$row[1].'</li>'."\n";
  33.        echo '<li class="ilosc">'.$row[2].'</li>'."\n";
  34.        echo '<li class="klik"><a href="#"><img src="images/klik.png" alt="klik" /></a></li>'  ;
  35.        echo '</ul>' ;
  36.  
  37.               }       ?>
  38.           </div>
  39.  
  40. ....
[PHP] pobierz, plaintext
i tak dla każdego bowiem dla każdej podstrony generowany content jest z osobnej pętli.

I problem tkwi w tym że generują mi się tam następne buttony, które też muszę przełączać zakładkami i każdy button ma generować odpowiedni obrazek i odpowiedni opis do obrazka, one także są wyciągane z bazy danych pętlą. 

[PHP] pobierz, plaintext 
  1. <div id="opis">
  2.                      <div id="jednoroczne">
  3.                 <?php
  4.  
  5.                 $zapytanie1 = "SELECT * FROM `jednoroczne` " ;
  6. 			$info1 = mysql_query($zapytanie1);
  7. 			while ($ro=mysql_fetch_array($info1)) { 
  8. 												$licznik = $licznik + 1;           
  9.                         echo '<div style="display: none;width:301px;height:200px;margin: 0 auto;" id="opis'.$licznik.'">'."\n";
  10.                         echo ''.$ro[3].''."\n";  
  11.                         echo '</div>';
  12.                }
  13.                ?>
  14.  
  15.  
  16.  
  17.  
  18.                       </div>
  19.                               <div id="dwuletnie">
  20.                 <?php
  21.  
  22.                 $zapytanie1 = "SELECT * FROM `dwuletnie` " ;
  23. 			$info1 = mysql_query($zapytanie1);
  24. 			while ($ro=mysql_fetch_array($info1)) { 
  25. 												$licznik2 = $licznik2 + 1;           
  26.                         echo '<div style="display: none;width:301px;height:200px;margin: 0 auto;" id="opis'.$licznik2.'">'."\n";
  27.                         echo ''.$ro[3].''."\n";  
  28.                         echo '</div>';
  29.                }
  30.                ?>
  31.  
  32.  
  33.  
  34.  
  35.                       </div>
  36. ....
  37.  
[PHP] pobierz, plaintext


no i znowu tak dla każdego podmenu osobna pętla generuje. i teraz nie bardzo wiem jak za pomocą jquery generować dla każdego podmenu odpowiedni obrazek i opis. Wiem że to zawiłe, najlepiej to zobrazuje ten przykład:


[HTML] pobierz, plaintext 
  1. <html>
  2. <body>
  3. 	<div id="container">
  4. 		<ul id="bookmarks"><li class="active"><a href="#">Bar #1</a></li><li><a href="#">Bar #2</a></li><li><a href="#">Bar #3</a></li></ul>
  5.  
  6.     <div id="content">
  7. 			<div id="bar1"> 
  8.       <ul id="jednoroczne">
  9.             <li><a href="#" alt="lala">buton1</a></li>
  10.             <li><a href="#" alt="lala">buton2</a></li>
  11.             <li><a href="#" alt="lala">buton3</a></li>
  12.       </ul>
  13.       </div>
  14.  
  15.  
  16.       <div id="bar2">      
  17.       <ul id="dwuletnie">
  18.             <li><a href="#" alt="lala">buton4</a></li>
  19.             <li><a href="#" alt="lala">buton5</a></li>
  20.             <li><a href="#" alt="lala">buton6</a></li>
  21.       </ul>
  22.       </div>
  23.  
  24.       <div id="bar3">      
  25.       <ul id="drzewka">
  26.             <li><a href="#" alt="lala">buton7</a></li>
  27.             <li><a href="#" alt="lala">buton8</a></li>
  28.             <li><a href="#" alt="lala">buton9</a></li>
  29.       </ul>
  30.       </div>
  31. 	     </div>
  32.  
  33.        <div id="opis" >
  34.             <div id="jednoroczne">
  35.                 <div id="opis1" style="display: none;width:301px;height:200px;margin: 0 auto;">TO jest opis1</div>
  36.                 <div id="opis1" style="display: none;width:301px;height:200px;margin: 0 auto;">TO jest opis2</div>
  37.                 <div id="opis1" style="display: none;width:301px;height:200px;margin: 0 auto;">TO jest opis3</div>
  38.             </div>
  39.  
  40.             <div id="dwuletnie">
  41.                 <div id="opis1" style="display: none;width:301px;height:200px;margin: 0 auto;">TO jest opis4</div>
  42.                 <div id="opis1" style="display: none;width:301px;height:200px;margin: 0 auto;">TO jest opis5</div>
  43.                 <div id="opis1" style="display: none;width:301px;height:200px;margin: 0 auto;">TO jest opis6</div>
  44.             </div>
  45.  
  46.             <div id="drzewka">
  47.                 <div id="opis1" style="display: none;width:301px;height:200px;margin: 0 auto;">TO jest opis7</div>
  48.                 <div id="opis1" style="display: none;width:301px;height:200px;margin: 0 auto;">TO jest opis8</div>
  49.                 <div id="opis1" style="display: none;width:301px;height:200px;margin: 0 auto;">TO jest opis9</div>
  50.             </div>
  51.  
  52.  
  53.        </div>
  54.  
  55.  	</div>
  56. </body>
  57. </html>
[HTML] pobierz, plaintext


Chodzi o to aby button z <ul id="jednoroczne"> generowały tylko opisy z <div id="jednoroczne"> a butony z <ul id="dwuletnie"> generowały tylko opisy z <div id="dwuletnie"> i tak dalej. No i jeśli ktoś dalej nie załapał to <div id="bar1"> <div id="bar2"> <div id="bar3"> są to trzy zakładki otwierane za pomocą jquery i w ich wnętrzu są te menu.



Jeszcze dorzuce obrazek który powinien to zobrazować najlepiej:

Przepraszam mniej zawile chyba nie umiałem smile.gif Pozdrawiam
buliq
3.08.2011, 22:23:51
Ja bym to zrobił tak.

układ dokumentu:
[html]
<div id="menu_1">menu1 czyli jednoroczne ...</div>
<div id="menu_2">menu2 czyli tytuły ...</div>
<div id="menu_3">menu3 czyli opisy ...</div>
[html]
W menu_2 tworzysz linki a każdemu przypisujesz id np: menu_2_xxx
W js wykrywasz to id najechanego elementu.
W menu_3 tworzysz opisy a każdemu przypisujesz id takie jak wyżej tylko dodajesz coś na końcu np menu_2_xxx_opis

[JAVASCRIPT] pobierz, plaintext 
  1.  
  2. $("#menu_2 a").click(function()  {
  3.  
  4. //kryjemy poprzednie opisy
  5. $("menu_3 div").hide();
  6. //id kliknietego
  7. var id=$(this).attr("id");
  8. //pokazujemy opis
  9. $("#"+id+"_opis").show();
  10. });
[JAVASCRIPT] pobierz, plaintext


Oczywiście z palca smile.gif nie testowane ale powinno działać. Zamiast click daj sobie mouseover czy co ci tam pasuje
daggerski
3.08.2011, 23:42:34
niestety 
[HTML] pobierz, plaintext 
  1. <div id="jednoroczne">        
  2.  <ul><li class="nazwa">Przyklad 1</li>
  3. <li class="ilosc">2</li>
  4. <li class="klik"><a id="1" href="#"><img src="images/klik.png" alt="klik" /></a></li></ul><ul><li class="nazwa">Przyklad 2</li>
  5. <li class="ilosc">2</li>
  6. <li class="klik"><a id="2" href="#"><img src="images/klik.png" alt="klik" /></a></li></ul>        </div>
  7.  
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div id="opisrosliny">
  2.                 <div style="display:none;width:301px;height:200px;margin: 0 auto;" id="1_opis">
  3. "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  4. </div><div style="display:none;width:301px;height:200px;margin: 0 auto;" id="2_opis">
  5.  
  6. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia volupt
  7. </div>                          
  8.  
  9.  
  10.                       </div>
[HTML] pobierz, plaintext 


[XML] pobierz, plaintext 
  1. <script type="text/javascript">    
  2. $("#jednoroczne li a").click(function() {
  3.  
  4.  
  5.  
  6. //kryjemy poprzednie opisy
  7.  
  8. $("div#opisrosliny").hide();
  9.  
  10. //id kliknietego
  11.  
  12. var id=$(this).attr("id");
  13.  
  14. //pokazujemy opis
  15.  
  16. $("#"+id+"_opis").show();
  17.  
  18. });
  19. </script>      
  20.  
[XML] pobierz, plaintext



Nie działa :/
buliq
3.08.2011, 23:57:38
hmm ja nie widzę abyś dostosował się do moich wskazówek smile.gif

[HTML] pobierz, plaintext 
  1. <div id="jednoroczne">        
  2. 	<ul>
  3. 		<li class="nazwa">Przyklad 1</li>
  4. 		<li class="ilosc">2</li>
  5. 		<li class="klik"><a id="jedno_1" href="#"><img src="images/klik.png" alt="klik" /></a></li>
  6. 	</ul>
  7. 	<ul>
  8. 		<li class="nazwa">Przyklad 2</li>
  9. 		<li class="ilosc">2</li>
  10. 		<li class="klik"><a id="jedno_2" href="#"><img src="images/klik.png" alt="klik" /></a></li>
  11. 	</ul>
  12. </div>
  13.  
  14.  
  15. <div id="opisrosliny">
  16. 	<div class="opisy" style="display:none;width:301px;height:200px;margin: 0 auto;" id="jedno_1_opis">
  17. 		"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  18. 	</div>
  19. 	<div class="opisy" style="display:none;width:301px;height:200px;margin: 0 auto;" id="jedno_2_opis">
  20. 		"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia volupt
  21. 	</div>                          
  22. </div>
  23.  
  24. <script type="text/javascript">    
  25. 	$("#jednoroczne li a").click(function() {
  26. 		//kryjemy poprzednie opisy
  27. 		$(".opisy").hide();
  28. 		//id kliknietego
  29. 		var id=$(this).attr("id");
  30. 		//pokazujemy opis
  31. 		$("#"+id+"_opis").show();
  32. 	});
  33. </script>  
[HTML] pobierz, plaintext


Oczywiście dodajesz do strony skrypt jquery tak?

A tu dowód że działa smile.gif

Jeszcze zmodyfikuj skrypt js:

[JAVASCRIPT] pobierz, plaintext 
  1.  
  2. $(document).ready(function() {
  3. 	$("#jednoroczne ul li a img").click(function() {
  4. 		//kryjemy poprzednie opisy
  5. 		$(".opisy").hide();
  6. 		//id kliknietego
  7. 		var id=$(this).parent().attr("id");
  8. 		//pokazujemy opis
  9. 		$("#"+id+"_opis").show();
  10. 	});
  11. });
[JAVASCRIPT] 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.