Ajax переходы v2 by doc74


Ajax переходы v2 by doc74

7554
8.4 из 10
Проголосовало: 10





На днях сделал скрипт 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 кода обязательно!
Если нужна помощь в установке, обращаться в skype: joni25361
Автор публикации: Загрузка
Загрузка
doc74, это его n материал
Источник: http://doc74.ru
  • Всего комментариев: 15

VZ
0
VZ написал: Написано 19 Октября 2013 в 07:10
Комментарий №15
А можно чтобы автоматически прописывался <Title>?

VZ
0
VZ написал: Написано 19 Октября 2013 в 07:08
Комментарий №14
Не работает,
работает только один раз при загрузке страницы, а затем я нажимаю он загружает Ajax, а затем как обычную страницу

VZ
0
VZ написал: Написано 08 Сентября 2013 в 05:57
Комментарий №13
Я переделал скрипт для моих потребностей Мне просто нужно, чтобы получить названия автоматически и значок загрузки как на ВКонтакте

VZ
0
VZ написал: Написано 05 Сентября 2013 в 10:25
Комментарий №12
Demo poshalysta

Pomidor4ick
0
Pomidor4ick написал: Написано 13 Июня 2013 в 10:15
Комментарий №10
А можно чтобы автоматически прописывался скрипт ко всем ссылкам? Чтобы не указывать класс.

VZ
0
VZ написал: Написано 05 Сентября 2013 в 10:24
Комментарий №11
Код

<script>
  $(function($){
  
  $('a').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>

Pomidor4ick
0
Pomidor4ick написал: Написано 12 Июня 2013 в 13:06
Комментарий №6
Подскажите как можно в этот скрипт добавить подзагрузку данных?

Nexus
+1
Nexus написал: Написано 12 Июня 2013 в 13:13
Комментарий №7
Подгрузку каких данных?
Этот скрипт и так подгружает контент с другой страницы.

Вовчик
0
Вовчик написал: Написано 12 Июня 2013 в 13:47
Комментарий №8
подгрузку js скриптов наверно

Pomidor4ick
0
Pomidor4ick написал: Написано 12 Июня 2013 в 18:07
Комментарий №9
Ааа, все, разобрался.

k43
0
k43 написал: Написано 27 Февраля 2013 в 19:28
Комментарий №3
как сделать чтоб этот скрипт автоматически прописывался ко всем ссылкам на форуме?

Вовчик
+1
Вовчик написал: Написано 03 Марта 2013 в 23:01
Комментарий №4
никак)

Goodmind
0
Goodmind написал: Написано 14 Марта 2013 в 08:00
Комментарий №5
Код
$('.forumContent a').addClass('ajax');

nick
0
nick написал: Написано 05 Февраля 2013 в 09:24
Комментарий №2
Думаю такими спростенькими скриптами, не сделать нормальных aJax переходов на ucoz(((

pasha
0
pasha написал: Написано 04 Февраля 2013 в 19:00
Комментарий №1
Давно ждал

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2109
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • На наш фактически play list smile
  • na3uTuB4uk94 написал:
  • Ну а в целом кстати ниче так получилось, очень даже хорошо)
  • na3uTuB4uk94 написал:
  • Ну музыка на демо конечно не для слушателей которым не 18+ да и просто не очень музыка если честно)
  • Вовчик написал:
  • Ничего себе, а я всего 8 лет на uCoz happy
  • Fox написал:
  • Спасибо, я 11-ый год на uCoz и Ваша форма добавления мне очень понравилась =)
    Последние темы
    Опрос
    421
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 4
    Пользователей: 1
    Топ пользователей: