[Release] Извеждане на съдържание с AJAX

Backo

Well-Known Member
Joined
Jan 17, 2009
Messages
1,212
Reaction score
975
Много хора са ме питали как да направят уеб сайта си като цъкнат на "новини" примерно и без да се зарежда всичко на ново да показва съдааржението, да запазва горе адреса в адрес бара и долу да не показва пътят на линк-а. Ето го и варианта ;)

В кода по-долу се вижда, че при натискане на някое от менютата се изпраща заявка към
скрипта 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 скриптовете който са Ви необходими.
 

Attachments

  • js.rar
    46.7 KB · Views: 72