Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Dynamiczne chodzenie po stronie
Kuba707
post
Post #1





Grupa: Zarejestrowani
Postów: 94
Pomógł: 0
Dołączył: 20.03.2010

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


Witam.
Chcę zrobić stronę bardziej dynamiczną. Dokładniej to chcę by się dynamicznie ładowały podstrony. To znaczy wpisuję link swojej strony, ładuje się cała strona i tam sobie chodzę po menu (odnośniki jakieś typu oferta, kontakt, galeria, itp) i gdy kliknę w ten odnośnik to nie chcę ładować tej samej strony tylko z parametrem GET "?page=galeria", tylko inaczej.
Po kliknięciu w odnośnik, javascript by zmienił link w przeglądarce (żeby użytkownik mógł dać link do danej części strony komuś innemu) a następnie AJAX by ładował treść danej podstrony do divu z treścią. Generalnie wiem jak to zrobić, ale jak to zrobić dobrze? Użyć jQuery do tego aby wywołać AJAXA, załadować treść do konteneru na stronie? Chcę zrobić coś takiego jak ma Youtube gdy się wybiera film z kanału. No i w ogóle się zastanawiam czy to robić. Strona będzie małego projektu, ma to być wizytówka pewnego teamu rowerowego, będą tam pewne informacje, zdjęcia.
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 6)
vokiel
post
Post #2





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

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


Zrób, jak najbardziej, tylko zadbaj o to, aby wszystko działało bez tych bajerów. Czyli np tworzysz link do ?page=galeria, przechwytujesz to w javascript i obsługujesz ajaxem. Jeśli js z jakiegoś powodu nie zadziała, to zwykły link tak.
Go to the top of the page
+Quote Post
Kuba707
post
Post #3





Grupa: Zarejestrowani
Postów: 94
Pomógł: 0
Dołączył: 20.03.2010

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


Hmm, rozumiem ale jak to zrobić? Nie potrafię sobie wyobrazić jak ten kod ma wyglądać. Jeżeli by były gdzieś powiedzmy w stopce albo nad stroną buttony, jeden "Strona statyczna", drugi "Strona dynamiczna" to wiadomo jak zrobić. Ale jak napisać kod który się wykona jeżeli javascript tego nie obsłuży? Jeżeli chodzi o tworzenie szablonów to wiadomo, dajemy kod CSS, mozilla go obsługuje ale IE nie, więc dajemy jeszcze jakiś starszy atrybut który na pewno działa pod IE i... zrobi to co ma zrobić. Ale jak zrobić w tym przypadku?


Edit: Chociaż hmm. Chyba mam pewien pomysł. Gdy AJAX wczytuje stronę to może nie wczytać jej, zwróci pewną wartość, wtedy mogę przekierować na link do którego chcemy iść, ale z jakąś dodatkową wartością. Wtedy gdy zostajemy przekierowani na tą stronę, to skrypt PHP jeśli zobaczy tą dodatkową wartość (a akurat w tym wypadku zobaczy) to od razu wczyta zawartość, nie przy pomocy jQuery + ajaxa. Hmm, ciężko mi to teraz poskładać myśl.. ale coś świta (IMG:style_emoticons/default/tongue.gif) .

Ten post edytował Kuba707 14.01.2011, 21:38:25
Go to the top of the page
+Quote Post
vokiel
post
Post #4





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

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


To skoro już świta to postaram się rozjaśnić (IMG:style_emoticons/default/smile.gif)
Przyjmijmy dla przykładu, że masz po prostu jakiś tekst wyświetlany w głównym oknie. W zależności od podstrony jest pobierany inny tekst.

Masz sobie w php napisany skrypt, który serwuje strony. Skrypt ten pobiera sobie dane, które ma wyświetlić i w zależności od rodzaju żądania: jeśli jest ajax'em, to serwuje sam content, treść tej zmieniającej się części, jeśli nie, to serwuje całość.

Czyli przykładowo, w uproszczeniu
  1. <?php
  2. $sites = array('start','o-nas','kontakt');
  3. if (!empty($_GET['site']) && in_array($_GET['site'],$sites){
  4. $content=$_GET['site'].'.php';
  5. }else{
  6. $content='start.php';
  7. }
  8.  
  9. if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
  10. // druga opcja:
  11. //if (empty($_GET['ajax']) || $_GET['ajax']!='true'){
  12. include 'header.php';
  13. include 'menu.php';
  14. include $content;
  15. include 'footer.php';
  16. }else{
  17. include $content;
  18. }
  19. ?>

Teraz menu generujesz na zasadzie:
  1. <a href="index.php?site=start" rel="start" title="START">START</a>
  2. <a href="index.php?site=o-nas" rel="o-nas" title="O NAS">O NAS</a>
  3. <a href="index.php?site=kontakt" rel="kontakt" title="KONTAKT">KONTAKT</a>

A całość strony
  1. <div id="header"><h1>Header</h1></div>
  2. <div id="wrapper">
  3. <div id="menu"><!-- tutaj te menu --></div>
  4. <div id="content"><!-- tutaj zostanie wklejona zawartość ajaxem --></div>
  5. </div>
  6. <div id="footer">Footer</div>
  7. </body>
  8. </html>

No i na koniec troszeczkę jQuery:
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function(){
  2. $('#menu a').click(function(e){
  3. e.preventDefault();
  4. var href = $(this).attr('href');
  5. $('#content').load(href); /* może być też $.ajax w celu obsłużenia błędów czy przesłania większej ilości parametrów */
  6. /* dla drugiego przykładu w php wywołanie wyglądałoby: */
  7. var sitename = $(this).attr('rel);
  8. $.get('index.php',
  9. { site: sitename, ajax: 'true' },
  10. function(data){
  11. $('#content').html(data);
  12. });
  13. });
  14. });
[JAVASCRIPT] pobierz, plaintext


Wszystko pisane z palca więc mogą być błędy.

Ten post edytował vokiel 14.01.2011, 22:12:51
Go to the top of the page
+Quote Post
Kuba707
post
Post #5





Grupa: Zarejestrowani
Postów: 94
Pomógł: 0
Dołączył: 20.03.2010

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


Hmmm ciekawe rozwiązanie, rozumiem teraz o co chodzi (IMG:style_emoticons/default/smile.gif) Tylko że na http://www.php.net/manual/en/reserved.variables.server.php nie ma 'HTTP_X_REQUESTED_WITH', co z tym?
Go to the top of the page
+Quote Post
vokiel
post
Post #6





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

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


Patrz: druga opcja
Go to the top of the page
+Quote Post
Kuba707
post
Post #7





Grupa: Zarejestrowani
Postów: 94
Pomógł: 0
Dołączył: 20.03.2010

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


No dobra, doskonale rozumiem o co chodzi (IMG:style_emoticons/default/winksmiley.jpg) Poradzę sobie z napisaniem tego kodu od nowa, dzięki (IMG:style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 26.12.2025 - 10:59