Сайт ищет нового владельца по разумной цене :) По всем вопросам: promonik1@ya.ru, skype: nik-luck007, https://vk.com/promonik
2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии
Ajax переходы v2 для uCoz

Ajax переходы v2 для uCoz

Скрипты для uCoz 2017-Мар-30 Mihail 351 3

Много кто мечтает на uCoz об адекватной AJAX навигации. К сожалению, полноценно её организовать не получится, но все же возможность есть. Если кто не знает, что такое AJAX, то вкратце: AJAX служит для загрузки контента без обновления страницы (Живой пример - сайт VK)

С установкой все же придется немного повозиться. Так как нужно настраивать каждую ссылку для AJAX навигации по отдельности. Теперь начнем по пунктам.

Установка:

1. Код вставить перед </body> (Можно в Глобальный блок: Нижняя часть сайта):

Код
<p><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></p>

* Восклицательными знаками специально пометил места, где можно вставить прелоадер. (Например: https://proucoz.site/scripts/preloader-for-site)

2. Контент, который будет динамически меняться при переходе, нужно вставить в блок:

Код
<div id="content">ваш код</div>

3. К ссылкам для AJAX переходов нужно добавить класс ajax:

Код
<a href="ссылка на страницу" title="название для смены title" class="ajax">Ссылка</a>

Самое важное, чтобы id="content" был обязательно на двух страницах! На которой человек кликает на ссылку, и на которую ведет ссылка!
Источник: не указан
3 комментария
avatar
1
Нормальная тема)
avatar
2
Меня после нажатия почему-то переводит на ту страницу.
avatar
0
3
А установит точно верно? Смотри в исходном коде у ссылки есть класс ajax и добавилось ли событие onclick с return false.
avatar