Хаки и Скрипты Next Generation CMS

Переходы внутри сайта без перезагрузки на javascript history

irbees2008 irbees2008 Опубликовано - 30 - апреля JS
2393 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Вот набрел на интересный скрипт,может кому пригодится,мне лично он понравился.
Такую функцию вы ввстречали в соц сетях,сегодня реализуем для NG
1.Скрипт использует jquery,это вы видите из ниже приведенного куска кода,этот код ставите перед закрытием тега body.
Если jquery уже подключен второй раз подключать не надо

Код:
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(function(){
doHistoryLogic();
$('.dolink').click(function(e){
e.preventDefault();
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
window.history.pushState($(this).attr('id'), "Title", $(this).attr('href'));
doHistoryLogic();
});
});
var doHistoryLogic=function(){
console.log(window.history);
switch(window.history.state){
case "home":
$('.about,.contact').fadeOut();
$('.home').fadeIn();
break;
case "about":
$('.home,.contact').fadeOut();
$('.about').fadeIn();
break;
case "contact":
$('.about,.home').fadeOut();
$('.contact').fadeIn();
break;
default: $('.about,.contact').fadeOut();
$('.home').fadeIn();
break;
}
}
</script>
В скрипте вы наверное заметили что будем работать с сылками по id/
2. Вот сам список меню,как видите для каждого пункта меню задан свой Id
Код:
<ul >
<li class="active"><a href="#"' id='home'>Home</a></li>
<li><a href="#" id='about'>About</a></li>
<li><a href="#" id='contact'>Contact</a></li>
</ul>

Можешь почитать и вот эту статейку "Быстрый переход на страницу"

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [9]
  • Гости: [8]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 31
  • Генерация страницы: 0.107сек
  • Потребление памяти: 4.931 Mb 
  •   яндекс.ћетрика