Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dynamiczna strona,przesyłanie parametru do funkcji w jQuery
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
skoranoskorano
29.06.2011, 09:48:31
Hej,

grzebię się od dłuższego czasu z napisaniem skryptu podmieniającego zawartość diva na stronie, bez przeładowywania jej.

Mam index.htm gdzie jest menu oraz div id="content" do którego chcę wrzucać fragmenty kodu html
plik content.js gdzie mam kod jQuery
oraz fragmenty kodów do podmiany umieszczone w katalogu content.

teraz tak, fragmenty kodu

na stronie index.htm:
[HTML] pobierz, plaintext 
  1. <div class="menu_element" id="men_witamy">
  2. <a href="#" onClick="loader('witamy');">Witamy!</a>
  3. </div>
  4. <div class="menu_element" id="men_onas">
  5. <a href="#" onClick="loader('onas');">O nas</a>
  6. </div>
  7. <div class="menu_element" id="men_oferta">
  8. <a href="#" onClick="loader('oferta')">Oferta</a>
  9. </div>
  10. <div class="menu_element" id="men_portfolio">
  11. <a href="#" onClick="loader('portfolio')">Portfolio</a>
  12. </div>
[HTML] pobierz, plaintext

i trochę niżej w tym samym dokumencie to:
[HTML] pobierz, plaintext 
  1. <div id="content"><br/>
  2.     Ten tekst zostanie zamieniony    
  3.     </div>
[HTML] pobierz, plaintext



plik content.js:
[JAVASCRIPT] pobierz, plaintext 
  1. function loader(strona) {
  2.  
  3.     switch(strona) { 
  4.         case "witamy": 
  5.         {$('#content').load('content/witamy.html');
  6.         $('#men_witamy').removeClass('menu_element');
  7.         $('#men_witamy').addClass('menu_element_aktywny'); break;
  8.          } 
  9.         case "onas": 
  10.         {$('#content').load('content/onas.html');
  11.         $('#men_onas').removeClass('menu_element');
  12.         $('#men_onas').addClass('menu_element_aktywny'); break;
  13.            } 
  14.         case "oferta": 
  15.         {$('#content').load('content/oferta.html');
  16.         $('#men_oferta').removeClass('menu_element');
  17.         $('#men_oferta').addClass('menu_element_aktywny'); break;
  18.            } 
  19.         case "portfolio": 
  20.         {$('#content').load('content/portfolio.html');
  21.         $('#men_portfolio').removeClass('menu_element');
  22.         $('#men_portfolio').addClass('menu_element_aktywny'); break;
  23.          } 
  24.         default: 
  25.         { $('#content').load('content/witamy.html');
  26.          $('#men_witamy').removeClass('menu_element');
  27.         $('#men_witamy').addClass('menu_element_aktywny');
  28.  
  29.         } 
  30.     }
[JAVASCRIPT] pobierz, plaintext



w jaki sposób to działa: http://tonika132.home.pl/krzychu/web
coś mi się kopie, nie wiem w czym leży problem


nie działa najwyraźniej przesyłanie parametru do funkcji,

zastanawiam się też, jaki kod dodać do jQ aby po wybraniu innego elementu menu, klasy poprzednio wybranych elementów wracały do normy.

Proszę o pomoc smile.gif
Theqos
29.06.2011, 10:31:14
a słyszał kolega o
Kod
break
w switchu i co to robi?

PS. tutaj może masz z breaki, ale w content.js ich nima wink.gif
skoranoskorano
29.06.2011, 10:35:38
Dzięki, grzebałem w tym kodzie i bez sensu powywalałem break;

A jakiś pomysł, jak zgrabnie napisać kod, aby przywracać klasy poprzednie w momencie wybrania nowego elementu?
Tak aby nie dopisywać w każdym case wszystkich przypadków
Theqos
29.06.2011, 10:54:56
Zapisz sobie aktywny element w jakiejs zmiennej to po kliknieciu będziesz wiedział co przestanie być aktywne wink.gif
skoranoskorano
29.06.2011, 14:09:44
zmieniłem kod na takie coś:

w index.htm:
[HTML] pobierz, plaintext 
  1. <body onLoad="start_loader()">
[HTML] pobierz, plaintext


i niżej:
[HTML] pobierz, plaintext 
  1. <div class="menu_element" id="witamy"><a href="#" onClick="loader('witamy');">Witamy!</a></div>
  2. 	<div class="menu_element" id="onas"><a href="#" onClick="loader('onas');">O nas</a></div>
  3. 	<div class="menu_element" id="technologie"><a href="#" onClick="loader('technologie');">Technologie</a></div>
  4. 	<div class="menu_element" id="oferta"><a href="#" onClick="loader('oferta')">Oferta</a></div>
  5. 	<div class="menu_element" id="portfolio"><a href="#" onClick="loader('portfolio')">Portfolio</a></div>
  6. 	<div class="menu_element" id="elementy"><a href="#" onClick="loader('elementy')">Elementy</a></div>
  7. 	<div class="menu_element" id="kontakt"><a href="#" onClick="loader('kontakt')">Kontakt</a></div>
  8.  
[HTML] pobierz, plaintext




natomiast w pliku js:
[JAVASCRIPT] pobierz, plaintext 
  1. var strona_old ="";
  2. function start_loader(){
  3. 	$('#content').load('content/witamy.html');
  4. 	$('#witamy').removeClass('menu_element');
  5. 	$('#witamy').addClass('menu_element_aktywny');
  6. 	strona_old = '#witamy';
  7. 	return strona_old;
  8.  
  9. 	}
  10.  
  11.  
  12. function loader(strona) {
  13.  
  14. $('#content').load('content/' + strona + '.html');
  15. $('#'+strona).removeClass('menu_element');
  16. $('#'+strona).addClass('menu_element_aktywny');
  17. $('#'+strona_old).removeClass('menu_element_aktywny');
  18. $('#'+strona_old).addClass('menu_element');
  19.  
  20. strona_old = strona;
  21. return strona_old;
  22. }
[JAVASCRIPT] pobierz, plaintext



działa to następująco: http://tonika132.home.pl/krzychu/web/

tak jakby nie działało return strona_old w 2 funkcji
bo nie reaguje ('#'+strona_old).addClass i removeClass

Czy dobrze przypisałem strona_old = strona; questionmark.gif?
A może return źle zapisany,

szukałem w sieci, na poradnikach, kursach książkach, nic nie znalazłem
Theqos
30.06.2011, 06:49:17
Hmm, akurat te returny są niepotrzebne. Nie za bardzo wiem o co ci chodzi, bo przecież nigdzie nie używasz wartości zwracanej przez te funkcje. Pozatym u mnie stronka działa jak należy.
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.