- Joined
- Jan 17, 2009
- Messages
- 1,212
- Reaction score
- 976
Много хора са ме питали как да направят уеб сайта си като цъкнат на "новини" примерно и без да се зарежда всичко на ново да показва съдааржението, да запазва горе адреса в адрес бара и долу да не показва пътят на линк-а. Ето го и варианта 
В кода по-долу се вижда, че при натискане на някое от менютата се изпраща заявка към
скрипта loads.php и в зависимост от post данните (1,2,3 и т.н.) той inlude-ва различни файлове и връща различен резултат. Този резултат се зарежда в
<div id="mainAreaLoading" class="mainAreaLoading" style="display: none">
Като за начало нека направим един index.html като пример:
след това е нужно да направите и файл loads.php и в него да сложите това нещо и да въведете кои файлове искате да се include от него:
При натискане на меню 1 се зарежда файла file1.php
При натискане на меню 2 се зарежда файла file2.php
При натискане на меню 3 се зарежда файла file3.php
При натискане на меню 4 се зарежда файла file4.php
При натискане на меню 5 се зарежда файла file5.php
При всичко останало се зарежда file4.php
Накратко за да го ползвате в Вашият сайт е нужно да сложите ето това:
style's и div-овете който са посочени горе в index.html
Надявам се да Ви е от ползва това. Долу ще видите и js скриптовете който са Ви необходими.
В кода по-долу се вижда, че при натискане на някое от менютата се изпраща заявка към
скрипта loads.php и в зависимост от post данните (1,2,3 и т.н.) той inlude-ва различни файлове и връща различен резултат. Този резултат се зарежда в
<div id="mainAreaLoading" class="mainAreaLoading" style="display: none">
Като за начало нека направим един index.html като пример:
Code:
<html>
<head>
<title>Извеждане на съдържание с AJAX</title>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251"/>
<script src="js/lib/prototype.js" type="text/javascript"></script>
<script src="js/src/scriptaculous.js" type="text/javascript"></script>
<style>
body {
font-family: Tahoma;
font-size: 12px;
}
.mainAreaInternal
{
width: 500px;
height: 300px;
z-index: 0;
}
.mainAreaLoading
{
width: 500px;
height: 300px;
z-index: 1;
}
</style>
<style type="text/css">
.linka {
cursor: pointer;
cursor: hand;
}
</style>
</head>
<body>
<table>
<tr>
<td valign="top" width="200">
<a class="linka" onclick="javascript:loadContent(1);">Меню 1</a><br/><br/>
<a class="linka" onclick="javascript:loadContent(2);">Меню 2</a> <br/><br/>
<a class="linka" onclick="javascript:loadContent(3);">Меню 3</a> <br/><br/>
<a class="linka" onclick="javascript:loadContent(4);">Меню 4</a> <br/><br/>
<a class="linka" onclick="javascript:loadContent(5);" class="linka">Меню 5</a> <br/><br/>
</td>
<td>
<!-- Navigation End -->
<div id="mainArea">
<div id="mainAreaInternal" class="mainAreaInternal">
Тук поставяте текста или скрипта които искате да показва отначало като зареди страницата Ви.
</div>
</div>
<!-- End Main Area Internal -->
<div id="mainAreaLoading" class="mainAreaLoading" style="display: none">
<span style="position: relative; top: 100px; left: 100px">
</span>
</div>
<!-- End Main Area -->
</td>
</tr>
</table>
</body>
</html>след това е нужно да направите и файл loads.php и в него да сложите това нещо и да въведете кои файлове искате да се include от него:
Code:
<?php
$content = $_POST['content'];
if($content==1)
{
include "file1.php";
}
elseif($content==2)
{
include "file2.php";
}
elseif($content==5)
{
include "file5.php";
}
elseif($content==3)
{
include "file3.php";
}
elseif($content==4)
{
include "file4.php";
}
else
{
include "index.html";
}
?>При натискане на меню 1 се зарежда файла file1.php
При натискане на меню 2 се зарежда файла file2.php
При натискане на меню 3 се зарежда файла file3.php
При натискане на меню 4 се зарежда файла file4.php
При натискане на меню 5 се зарежда файла file5.php
При всичко останало се зарежда file4.php
Накратко за да го ползвате в Вашият сайт е нужно да сложите ето това:
Code:
<script src="js/lib/prototype.js" type="text/javascript"></script>
<script src="js/src/scriptaculous.js" type="text/javascript"></script>style's и div-овете който са посочени горе в index.html
Надявам се да Ви е от ползва това. Долу ще видите и js скриптовете който са Ви необходими.
