Hash-навигация /#!/ аля Твиттер при помощи AJAX

14 Мар
2012

Я хочу показать вам свой способ создания hash-навигации. Он простой и работает если у пользователя поддерживается Javascript.


Основная страница сайта, например, index.php
Я сделаю простой пример, просто с блоком, в который мы будем подгружать другие страницы, ну и с парой ссылок:
<!DOCTYPE html>
Заголовок страницы




Главная Профиль







all.js
function loader(link) {
$.post("/ajax.php", { section: "page", act: "load", name: link }, function(html){
location.hash = '!/'+link+'';
$("#body").attr("data-page", link);
$('#container').empty();
$("#container").html(html);
} );
}


loader.js
$().ready(function(){
setInterval("checkHash()", 300);
});

function checkHash() {
page = $("#body").attr('data-page');
hash = document.location.hash;
link = hash.replace("#!/", "");
if (hash) {
if (link != page) { loader(link); }
}
else { location.hash = '!/home'; }
}


ajax.php
<?php

$section = $_POST['section'];
$action = $_POST['act'];

if ($section == 'page' && $action == 'load') {
$page_name = $_POST['name'];
if (empty($page_name)) { $page_name = 'home'; }
require_once ('pages/'.$page_name.'.php');
}

?>


ну и, например, pages/home.php
содержание главной страницы


Если возникнут какие-нибудь вопросы, то спрашивайте. Я с удовольствием отвечу.

P.S: Как-нибудь в другой раз расскажу вам как я еще и заголовки страницы меняю в этом же скрипте.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх