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


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

7570
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 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • sasha2016tv написал:
  • Хороший скрипт
    Ох. Вижу, что обсуждение очень старое. Но!
    На других CMS так же будет все это реализовано. На нормальных CMS.
    Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

    Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
    Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
    Последние темы
    Опрос
    433
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: