| Autor | Správa |
|---|
Azuritko
Užívateľ
Založený: 08.07.2009
Príspevky: 10
 |  Zaslal: Po 30.01.12 13: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
Ak kliknem na tlačidlá na boku, tak sa mi plynule vysunie tablet
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
Moderátor
Založený: 21.02.2006
Príspevky: 4627
Bydlisko: Bratislava
| | Zaslal: Po 30.01.12 19: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. |
_________________
Neradím a nekomunikujem cez SS, ak niečo potrebujete, máte iné možnosti: Ak vám zmizla téma, alebo sa vám niečo nepáči. Ak potrebujete nahlásiť príspevok/človeka, reportujte ho. Ak máte s niečim problém, riešte to v danej téme. | |
  |
|
Azuritko
Užívateľ
Založený: 08.07.2009
Príspevky: 10
|
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
Moderátor
Založený: 21.02.2006
Príspevky: 4627
Bydlisko: Bratislava
|
.load v jquery je ajax  |
_________________
Neradím a nekomunikujem cez SS, ak niečo potrebujete, máte iné možnosti: Ak vám zmizla téma, alebo sa vám niečo nepáči. Ak potrebujete nahlásiť príspevok/človeka, reportujte ho. Ak máte s niečim problém, riešte to v danej téme. | |
|
|
|
Nemôžete pridávať nové témy do tohto fóra.
Nemôžete odpovedať na témy v tomto fóre.
Nemôžete upravovať svoje príspevky v tomto fóre.
Nemôžete mazať svoje príspevky v tomto fóre.
Nemôžete hlasovať v tomto fóre.
|
|
