На днях сделал скрипт Ajax переходы V2, по сравнению с прошлой версией, все работает адекватнее и быстрее...
В основном исправил и доделал следующие функции:
1. Убрана загрузка, теперь контент, ну точнее загружаемая часть появляется только при полной загрузке
2. Добавлена поддержка переключения (←)назад и вперед(→), теперь все проще
3. Смена url происходит так же при переключении и загрузки страницы
4. Смена title при возврате назад, к сожалению не работает, но при загрузке контента при клике все работает, исправлю в следующей версии.
К сожалению подгрузка скриптов работать не будет(как и в прошлой версии), так что загружайте в глобальный блок все скрипты и ставьте на каждую страницу...
Для полного понимания, посмотрите Демо(указано ниже)
Ну вступление завершено, перейдем к установке:
1. Сам код, устанавливаем между body
Код
<script>
$(function($){
$('.ajax').attr('onclick','return false;').click(function(){
var title = $(this).attr('title');
var href = $(this).attr('href');
$('title').html(title);
$('#content').load(href+' #content', function(){
history.pushState(null, null, href);
});
});
});
window.onpopstate = function( e ) {
var returnLocation = history.location || document.location;
var returnTitle = history.propertyName || document.title;
// тут можете вызвать подгруздку данных и т.п.
$('title').html(returnLocation.title)
$('#content').load(returnLocation.href+ ' #content', function(){
history.pushState(null, null, href);
});
}
</script>
2. Div, в который нужно поместить весь изменяемый контент (который будет меняться при переходах)
Код
<div id="content">ваш код</div>
3. Ну и вид ссылки, для ajax перехода:
Код
<a href='ссылка на страницу' title='название для смены title' class='ajax' >Сама ссылка</a>
Хочу уточнить, что на каждой странице с ajax переходами должны стоять первые 2 кода обязательно!
)
