Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Doczytywanie strony
Forum PHP.pl > Forum > Po stronie przeglądarki
northwest
9.01.2008, 12:00:14
Witam,
mam taką stronkę:
[HTML] pobierz, plaintext 
  1. <html>
  2.    <head>
  3.       <meta http-equiv=Content-Type content="text/html; charset=ISO-8859-2">
  4.       <meta name="robots" content="index, follow" >
  5.       <meta http-equiv=Pragma content=no-cache >
  6.       <meta http-equiv=Cache-Control content=no-cache >
  7.       <link rel="stylesheet" type="text/css" href="custom.css">
  8.       <script type="text/javascript" src="tabs.js"></script> 
  9.        </head>
  10.        <div id="demo" class="demolayout">
  11. <ul id="demo-nav" class="demolayout">
  12. <li><a href="#tab1">a</a></li>
  13. <li><a href="#tab2">b</a></li>
  14. <li><a href="#tab3">c</a></li>
  15. <li><a href="#tab4">d</a></li>
  16. <li><a href="#tab5">e</a></li>
  17. <li><a href="#tab6">f</a></li>
  18. <li><a href="#tab7">g</a></li>
  19. </ul>
  20. <div class="tabs-container">
  21. <div class="tab" id="tab1">
  22. <? //test.php"
  23. ?>
  24. </div>	
  25. <div class="tab" id="tab2">
  26. blablabla
  27. </div>	
  28. <div class="tab" id="tab3">
  29. <? //includec.php"
  30. ?>
  31. </div>	
  32. <div class="tab" id="tab4">
  33. blablabla
  34. </div>
  35. <div class="tab" id="tab5">
  36. <? //include"a.php";
  37. ?>
  38. </div>
  39. <div class="tab" id="tab6">
  40. <? //include"c.php";
  41. ?>
  42. </div>
  43. <div class="tab" id="tab7">
  44. blablabla
  45. </div>
  46. </div></div>
  47. <script type="text/javascript">
  48. var tabber1 = new Yetii({
  49. id: 'demo'
  50. });
  51. </script>
  52. <?
  53.       if ($_GET[id]=="test"){
  54.       echo"<script>
  55.       tabber1.show(5);
  56.       </script>";
  57.       }          ?>
  58.       <?
[HTML] pobierz, plaintext


i chce teraz zrobić coś takiego, ażeby po kliknięciu na daną zakładkę te podstrony (php) się odczytywały
w locie, a nie tak jak jest teraz że wszystko jest wczytywane od razu... Wiecie może jak to zrobić??

Stronka aktualnie znajduje się tutaj: http://trif.superhost.pl/tabs/

powycinałem zbędny kod, żeby było łatwiej coś zrobić winksmiley.jpg


Z góry dzięki za pomoc,
pozdrawiam Northwest
AxZx
9.01.2008, 12:07:55
poszukaj tutaj
http://www.google.pl/search?hl=pl&q=jq...+Google&lr=

ten skrypt jest dosyc fajny:
http://stilbuero.de/jquery/tabs_3/

jest tam opcja z AJAX
northwest
9.01.2008, 12:16:02
jest prawie super smile.gif
zrobiłem coś takiego: http://trif.superhost.pl/tabs/
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="en">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <meta http-equiv="Content-Style-Type" content="text/css">
  6.         <meta http-equiv="Content-Script-Type" content="text/javascript">
  7.         <title>jQuery UI Tabs / Tabs 3</title>
  8.         <link rel="stylesheet" href="ui.tabs.css" type="text/css" media="print, projection, screen">
  9.         <style type="text/css" media="screen, projection">
  10.             /* Not required for Tabs, just to make this demo look better... */
  11.             body, h1, h2 {
  12.                 font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
  13.             }
  14.             h1 {
  15.                 margin: 1em 0 1.5em;
  16.                 font-size: 18px;
  17.             }
  18.             h2 {
  19.                 margin: 2em 0 1.5em;
  20.                 font-size: 16px;
  21.             }
  22.             p {
  23.                 margin: 0;
  24.             }
  25.             pre, pre+p, p+p {
  26.                 margin: 1em 0 0;
  27.             }
  28.             code {
  29.                 font-family: "Courier New", Courier, monospace;
  30.             }
  31.         </style>
  32.  
  33.         <script src="jquery-1.2.1.pack.js" type="text/javascript"></script>
  34.         <script src="ui.tabs.js" type="text/javascript"></script>
  35.        <script type="text/javascript">
  36.             $(function() {
  37.                 $('#container-8 ul').tabs({ cache: false });
  38.                 $('<p><a href="#">Click third tab<\/a><\/p>').prependTo('#fragment-12').find('a').click(function() {
  39.                     $('#container-8 ul').tabsClick(3);
  40.                     return false;
  41.                 });
  42.             });
  43.         </script>
  44.     </head>
  45.     <body>
  46.  
  47.         <h2>Ajax tabs</h2>
  48.  
  49.         <div id="container-8">
  50.  
  51.             <ul>
  52.                 <li><a href="ahah_1.html" title="Tab one"><span>One</span></a></li>
  53.                 <li><a href="ahah_2.html" title="Tab two"><span>Two</span></a></li>
  54.                 <li><a href="ahah_3.html"><span>Three</span></a></li>
  55.             </ul>
  56.             <div id="fragment-12">
  57.  
  58.                 <pre><code>$('#container').tabsClick(3); // simulate click on 3rd tab
  59.                  </code></pre>
  60.  
  61.         </div>
  62.     </body>
  63. </html>
[HTML] pobierz, plaintext

teraz do pełni szczęścia brakuje mi tylko czegoś, to na podstawie np. zmiennej "id"
spowoduje przy wczytywaniu strony od razu zaznaczenie zakładki 3... Wiesz może jak to
zrobić??

Dzięki WIELKIE za pomoc:)
AxZx
9.01.2008, 13:00:17
moze tak:

Kod
$('#container-8 ul').tabs(3, { cache: false });

ta trojka to numer zakladki ktora ma byc wyswietlona.
ale nie wiem jak zrobic zeby wczytac zakladke po jej ID.
northwest
9.01.2008, 13:02:37
tzn inaczej.
chce w php zrobić coś takiego że jak ktoś wpisze np: http://trif.superhost.pl/tabs/index.php?id=3
to po wczytaniu będzie widoczna strona z zaznaczoną zakładką nr 3:) (to co po kliku na nią)
AxZx
9.01.2008, 13:07:31
no to tak jak napisalem

[PHP] pobierz, plaintext 
  1. <?php
  2. echo "$('#container-8 ul').tabs(".intval($_GET['id']).", { cache: false });"
  3. ?>
[PHP] pobierz, plaintext
northwest
9.01.2008, 13:10:33
<?php
echo "$('#container-8 ul').tabs(".intval($_GET['id']).", { cache: false });"
?>

a w którym miejscu to wkleić??winksmiley.jpg
AxZx
9.01.2008, 14:54:19
dry.gif

w to
Kod
<script type="text/javascript">
            $(function() {
                $('#container-8 ul').tabs({ cache: false });   // <--- tutaj, zamiast tej linii
                $('<p><a href="#">Click third tab<\/a><\/p>').prependTo('#fragment-12').find('a').click(function() {
                    $('#container-8 ul').tabsClick(3);
                    return false;
                });
            });
        </script>
northwest
9.01.2008, 15:11:48
super, działa biggrin.gif dzięki WIELKIE smile.gif))


ps. dlaczego jak w tych stronach otwieranych przez zakładki nie działają linki?? :|
dodałem odnośnik: <a href="ahah_1.html">ahah_1.html</a> i zamiast
otworzyć go w tym polu, w którym był poprzednik otwiera mi się nowa strona....:/
formularze (post i get) będą w tym działały normalnie??
AxZx
9.01.2008, 15:30:53
bo tam po prostu wstawiasz tresc, tzn jakis HTML.
to nie jest zadna ramka.
northwest
9.01.2008, 15:46:28
a jak chce zrobić formularze to normalnie trzeba przeładować stronę (czyt. normalny, html'owy formularz się robi,
z normalnym POST/GET'em)questionmark.gifsmile.gif

linków w ogóle się nie da zrobić w tym Ajaxie??
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.