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

7744
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 2124
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • ЯдеR написал:
  • ставлю CSS стили и слетает стиль шапки и статистика ни как не меняется на такую, как у вас в примере
  • ЯдеR написал:
  • не работает(
  • BLAzER написал:
  • 404 sad
  • Site_Test написал:
  • вместо
    Код
    <script type="text/javascript">  
    <!-- Progess bar - NEW uCoz "By Lekus" 2017. uFace -->  
    <!--  
    document.write(unescape('%3C%6C%69%6E%6B%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%20%72%65%6C%3D%22%53%74%79%6C%65%53%68%65%65%74%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%75%66%61%63%65%2E%61%74%2E%75%61%2F%64%65%6D%6F%2F%50%72%6F%67%65%73%73%5F%62%61%72%4E%45%57%2F%73%74%79%6C%65%2E%63%73%73%22%20%2F%3E'));
    //-->  
    </script>


    пишем просто
    Код
    <link type="text/css" rel="StyleSheet" href="http://uface.at.ua/demo/Progess_barNEW/style.css" />
    в страница добавления/редактирования материала отображается следуещее ,success:function(a){var a=$(a);!a.text().match('myWinError')? plusrep(a) : _uWnd.content('addEnt',a.text().match(/<div[^<>]*>(.+)<\/div>/i)[0])||$('input.manFlSbm').attr('disabled',0)}

    и не работает ничего(, что делать?
    Последние темы
    Опрос
    502
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: