Onepage site jQuery + AJAX

Добрый день, уважаемые читатели! В предновогодние дни хочу показать вам как сделать простенький сайт по технологии OnePage, т.е. сайт на jQuery+AJAX, который загружает только ту часть сайта, которую активирует сам пользователь.

Приступим!

Создадим новый сайт с следующей структурой:

/

../images

../js

../pages

../index.php

../loader.php

index.php:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Onepage test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></pre>
<style type="text/css">
 body {
 margin:20px 0 0 0;
 padding:0;
 text-align:center;
 font-family: arial;
 font-size:12px;
 background:#282828;
 }

#wrap {
 width: 600px;
 margin: 0 auto;
 }

#header {
 width: 600px;
 height: 50px;
 border-top: 1px solid #ffffff;
 border-radius: 8px;
 background: #dcdcdc; /* Old browsers */
 background: -moz-linear-gradient(top, #dcdcdc 0%, #696969 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dcdcdc), color-stop(100%,#696969)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #dcdcdc 0%,#696969 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #dcdcdc 0%,#696969 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #dcdcdc 0%,#696969 100%); /* IE10+ */
 background: linear-gradient(to bottom, #dcdcdc 0%,#696969 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#696969',GradientType=0 ); /* IE6-9 */
 -webkit-box-shadow: 0px 5px 13px rgba(0, 0, 0, 1);
 -moz-box-shadow: 0px 5px 13px rgba(0, 0, 0, 1);
 box-shadow: 0px 5px 13px rgba(0, 0, 0, 1);
 margin-bottom: 50px;
 }

#menu {
 width: auto;
 height: 30px;
 margin: 12px 10px 0 0;
 float: right;
 display: none;
 }

#menu ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 }

#menu ul li {
 float: left;
 padding: 5px 10px 5px 10px;
 }

#menu ul li.selected {
 background: #4f4f4f;
 border-radius: 8px;
 }

#menu ul li.selected a {
 color: #ffffff;
 text-shadow: none;
 }

#menu ul li a {
 color: #4f4f4f;
 font-weight: 700;
 text-decoration: none;
 text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.47);
 }

#menu ul li a:hover {
 text-decoration: underline;
 }

#body {
 clear:both;
 display:none;
 width: 560px;
 border-top: 1px solid #ffffff;
 border-radius: 8px;
 background: #dcdcdc; /* Old browsers */
 background: -moz-linear-gradient(top, #dcdcdc 0%, #696969 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dcdcdc), color-stop(100%,#696969)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #dcdcdc 0%,#696969 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #dcdcdc 0%,#696969 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #dcdcdc 0%,#696969 100%); /* IE10+ */
 background: linear-gradient(to bottom, #dcdcdc 0%,#696969 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#696969',GradientType=0 ); /* IE6-9 */
 -webkit-box-shadow: 0px 5px 13px rgba(0, 0, 0, 1);
 -moz-box-shadow: 0px 5px 13px rgba(0, 0, 0, 1);
 box-shadow: 0px 5px 13px rgba(0, 0, 0, 1);
 padding: 20px;
 text-align: justify;
 }

.loading {
 background: url('images/load.gif') no-repeat center center;
 height:48px;
 display:none;
 }
 </style>
<pre>
</head>

<body></pre>
<div id="wrap">
 <div id="header">
 <div id="menu">
 <ul>
 <li><a href="#page1" rel="menu">Главная</a></li>
 <li><a href="#page2" rel="menu">О компании</a></li>
 <li><a href="#page3" rel="menu">Портфолио</a></li>
 <li><a href="#page4" rel="menu">Контакты</a></li>
 </ul>
 </div>
 </div>
 <div id="body">
 <div id="content">
 <!-- AjaxContent -->
 </div>
 </div>
 <div class="loading"></div>
</div>
<pre>
</body>

</html>

Заготовка есть. Теперь нам необходимо подключить jQuery к сайту, для этого  между тэгами <head></head> впишем загрузку с гугла:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

И перед закрывающим тэгом </body> пишем JS код:

</pre>
<script type="text/javascript">
 $(document).ready(function () {

<span style="line-height: 1.5em;">checkURL();</span>

$('a[href=' + window.location.hash +']').closest('li').addClass('selected');

$('a[rel="menu"]').click(function(){
 $('.selected').removeClass('selected');
 $(this).closest('li').addClass('selected');

$('#body').hide();
 $('#content').hide();
 $('.loading').show();

var hash = this.href;
 checkURL(hash);

});

setInterval("checkURL()", 250);
 });

var lastURL = "";

function checkURL(hash) {
 if(!hash) hash = window.location.hash;

if(hash != lastURL) {
 lastURL = hash;
 loadPage(hash);
 }
 }

function loadPage(url) {
 var data = 'page=' + encodeURIComponent(document.location.hash);

$.ajax({
 url: "loader.php",
 type: "GET",
 data: data,
 cache: false,
 success: function (html) {
 $('.loading').hide();
 $('#content').html(html);
 $('#content').show();
 $('#body').fadeIn('slow');
 }
 });
 }
</script>
<pre>

Разберемся что к чему!

Первым делом запускается функция checkURL(); это нужно для того, чтобы сравнивать что есть в адресной строке с тем, на что нажал пользователь. Если хэш адресной строки отличается от последнего запрошенного адреса, то загружаем другую страницу через loadPage().

В функции loadPage загружается обработчик PHP, который и и отдает необходимые нам страницы. Его код:


<?php
$_GET['page'] = isset($_GET['page']) ? str_replace('#', '', $_GET['page']) : '';

if(!empty($_GET['page'])) {

if(file_exists('pages/' . $_GET['page'] . '.php')) {
 $page = file_get_contents('pages/' . $_GET['page'] . '.php');
 echo $page;
 } else {
 echo '<h1>404</h1>' . $_GET['page'];
 }

}

Он проверяет наличие страницы и отдает ее в json.

Формат шаблона загружаемой страницы — обычный HTML с php-вставками

Leave a Reply