Include dynamický

Azuritko · Napísal **Azuritko**: 30.01.2012 12:25

Zdravím, snažím sa vytvoriť stránku podľa toho čo som si zaumienil, ale narazil som na problém, ako zabezpečiť načítavanie stránok po kliknutí na odkaz a pritom uchovať rovnakú funkčnosť stránky.
V základe funguje stránka takto: index.php zobrazí toto

Include dynamický

Ak kliknem na tlačidlá na boku, tak sa mi plynule vysunie tablet

Include dynamický

pričom mám tri rôzne talbety, pretože dva tablety ešte obsahujú osobitne tlačidlá pre ďalšie podkategórie. Mám to urobené tak, že tablet môžem spodným tlačidlom vypnutia zavrieť/zasunúť, ak kliknem na odkaz kde je tablet iný (s tlačidlami alebo bez), tak sa najprv aktuálny schová a v zápätí sa ukáže nový, ak kliknem na tlačidlo, kde je tablet rovnaký ako aktuálny, tak sa s aktuálnym neudeje nič (zmeniť by sa mal iba obsah v bielom priestore).
A čo chcem dosiahnuť? Text, obrázky... čiže obsah stránky sa má zobrazovať v bielom priestore tabletu po kliknutí na jednotlivé tlačidlá (v kóde oblasť <div id="pozadie"> pre konkrétny tablet). Ako to urobiť tak, aby mi index.php ostal načítaný bezozmeny, čiže aby sa všetko dialo tak ako má a pritom aby sa do bieleho priestoru načítal obsah požadovanej stránky? Našiel som nejaký návod na include, niečo takéto:

Kód:

<?php
   $page = $_GET['page'];
   $pages = array('page1', 'page2', 'page3');
   if (!empty($page)) {
      if(in_array($page,$pages)) {
         $page .= '.php';
         include($page);
      }
      else {
      echo 'Page not found. Return to
      <a href="index.php">index</a>';
      }
   }
   else {
      include('page1.php');
   }
?>

ale ak som to dobre pochopil, vždy to nanovo načíta aj samotný index.php, takže tablet zmizne.
No akosi sa mi nepodarilo to rozbehať ani s jednoduchou stránkou a neviem čo má obsahovať napr. page1.php. Iba kód typu <p>nieco</p> alebo aj <head> a <body>?

Tu je kód mojej stránky:

Kód:

<html>
<head>
<title>Naše profily</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js" type="text/javascript" ></script>
<script src="jquery-ui.min.js" type="text/javascript" ></script>

</head>
<body>

<div id="zaklad">


<div id="tlacidlo">
<a href="#" class="fotky"></a>
<a href="#" class="video"></a>
<a href="#" class="diskusia"></a>
<a href="#" class="onas"></a>
<a href="#" class="zbrane"></a>
<a href="#" class="akcie"></a>
</div>

<div class="tabletc">
<div class="vypinac"></div>
<div id="pozadie">      

</div>
</div>

<div class="tabletb">
<div class="vypinac"></div>
<div id="tabtlac"><a href="#" class="tabburk"></a><a href="#" class="tabhil"></a><a href="#" class="tablest"></a></div>
<div id="pozadie">      

</div>      
</div>

<div class="tablet">
<div class="vypinac"></div>
<div id="tabtlac"><a href="#" class="tabroz"></a><a href="#" class="tabburk"></a><a href="#" class="tabhil"></a><a href="#" class="tablest"></a></div>
<div id="pozadie">      

</div>
</div>
</div>

<script>
var x
var y
var z

$(document).ready(function() {
$('.video,.diskusia,.onas,.zbrane').click(function () {
     if (x) $('.tabletb').hide("slide", { direction: "up" }, 1000);
     if (y) $('.tablet').hide("slide", { direction: "up" }, 1000),
     x = true;
          
     if (x) $('.tabletc').delay(1000).show("slide", { direction: "up" }, 1000),
     x = false, y = false, z = true;
     if (z);
  else 
  $('.tabletc').show("slide", { direction: "up" }, 1000),
  z = true;
   });
  });

$(document).ready(function() {
$('.fotky').click(function () {
     if (x) $('.tabletb').hide("slide", { direction: "up" }, 1000);
     if (z) $('.tabletc').hide("slide", { direction: "up" }, 1000),
     x = true;
          
     if (x) $('.tablet').delay(1000).show("slide", { direction: "up" }, 1000),
     x = false, z = false, y = true;
     if (y);
  else 
  $('.tablet').show("slide", { direction: "up" }, 1000),
  y = true;
   });
  });
  
$(document).ready(function() {  
$('.akcie').click(function () {
     if (y) $('.tablet').hide("slide", { direction: "up" }, 1000);
     if (z) $('.tabletc').hide("slide", { direction: "up" }, 1000),
     y = true;
     
     if (y) $('.tabletb').delay(1000).show("slide", { direction: "up" }, 1000),
     y = false, z = false, x = true;
     if (x);
   else 
   $('.tabletb').show("slide", { direction: "up" }, 1000),
   x = true;
    });
   });
   
$(document).ready(function() {
$('.vypinac').click(function () {
     if (y) $('.tablet').hide("slide", { direction: "up" }, 1000),
     y = false;
     if (x) $('.tabletb').hide("slide", { direction: "up" }, 1000),
     x = false;
     if (z) $('.tabletc').hide("slide", { direction: "up" }, 1000),
     z = false;
   });
  });

   $(document).ready(function() {
      $('.fotky,.video,.diskusia,.onas,.zbrane,.akcie,.tabroz,.tabburk,.tabhil,.tablest').append('<span class="hover"></span>').each(function () {
           var $span = $('> span.hover', this).css('opacity', 0);
           $(this).hover(function () {
             $span.stop().fadeTo(1000, 1);
          }, function () {
         $span.stop().fadeTo(1000, 0);
            });
      });
   });

</script>
</body>
</html>

shaggy · Napísal **shaggy**: 30.01.2012 18:38

tl;dr
Ak máš problém, skús ho spísať pár vetami + daj odkaz na ukážku. Nikto sa nebude prehrabávať x riadkami kódu (ktorý si nemôže ani vyskúšať).
K tomu, čo som pochopil z tvojho chaotického popisu ti môžem poradiť len jednu vec - ajax. Naštuduj si, čo to je a ako sa to používa.

Azuritko · Napísal autor témy **Azuritko**: 30.01.2012 23:21

Najjednoduchšie ako to viem povedať je že:

Potrebujem v stránke index.php vložiť v kóde

Kód:

<div class="tablet">
<div class="vypinac"></div>
<div id="tabtlac"><a href="#" class="tabroz"></a><a href="#" class="tabburk"></a><a href="#" class="tabhil"></a><a href="#" class="tablest"></a></div>
<div id="pozadie">      

</div>
</div>
</div>

do oblasti <div id="pozadie"> text, obrázky a podobne bez toho, aby sa index.php načítavalo nanovo.

Ajax si pozriem keď bude čas ale z toho čo som zatiaľ pozrel hovorí táto veta zrejme presne o tom čo budem potrebovať: "AJAX is about updating parts of a web page, without reloading the whole page".

// pridané po 3 hodinách 58 minútach od posledného príspevku

Tak som naštudoval ajax ale potom som našiel dokonca funkciu .load pre jquery. http://api.jquery.com/load/ A s touto je to ešte jednoduchšie a po pár testoch to vyzerá tak, že to funguje presne tak ako som potreboval. Každopádne díky shaggy, veci sa pohli po tvojej rade.

shaggy · Napísal **shaggy**: 31.01.2012 1:23

.load v jquery je ajax

Include dynamický

Podobné témy