Ajax переходы v1
Думаю многие хотели бы реализовать на сайте аякс переходы как в контакте или на flash сайтах, так вот реализованный скрипт. Конечно эта версия не доработана, но это исправлю со временем.
Что тут есть:
1. Переход аякс
2. Смена url
3. Надпись загрузки
Чего нет, но будет:
1. Смена title
2. Улучшенный вид загрузки
3. Эффект появления
Ну и конечно же сам скрипт:
Создаем div, и ставим его между <body> </body>
В этом div'e будут ссылки ajax, самое главное, это вид ссылок!
Первая ссылка должна выглядеть так:
А последующие так:
Теперь установим сам скрипт отвечающий за переходы:
Ну и последний штрих...
На странице, то что нужно загружать при клике на ссылку берём в div:
на этом установка закончена.
Что тут есть:
1. Переход аякс
2. Смена url
3. Надпись загрузки
Чего нет, но будет:
1. Смена title
2. Улучшенный вид загрузки
3. Эффект появления
Ну и конечно же сам скрипт:
Создаем div, и ставим его между <body> </body>
Code
<div id="menu"> </div>
В этом div'e будут ссылки ajax, самое главное, это вид ссылок!
Первая ссылка должна выглядеть так:
Code
<a href='/ssylka2' data-pjax='#contsod'>Ссылка 1</a>
А последующие так:
Code
<a href='/ssilka1' >Ссылка 2</a>
Теперь установим сам скрипт отвечающий за переходы:
Code
<script>
$(function($){
$('#menu a').attr('onclick','return false;').click(function(){
var href = $(this).attr('href');
$('.conteiner').text('Загрузка...');
$('.conteiner').load(href+' .conteiner', function(){
history.pushState(null, null, href);
});
});
});
</script>
$(function($){
$('#menu a').attr('onclick','return false;').click(function(){
var href = $(this).attr('href');
$('.conteiner').text('Загрузка...');
$('.conteiner').load(href+' .conteiner', function(){
history.pushState(null, null, href);
});
});
});
</script>
Ну и последний штрих...
На странице, то что нужно загружать при клике на ссылку берём в div:
Code
<div class="conteiner"> </div>
на этом установка закончена.
О материале:
Дата добавления: 25.09.2012 в 14:28
Материал просмотрен: 528 раз
Категория: Скрипты и модификации для uCoz
Оставлены: 0 комментария
Рейтинг материала
По мнению пользователей
5.0
Поделиться
Комментарии
0 комментариев
Навигация
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Онлайн никого нет