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

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

irbees2008 irbees2008 Опубликовано - 30 - апреля JS
3140 - 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>

Можешь почитать и вот эту статейку "Заголовок, который прилипает к верхней части окна просмотра"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

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

Теги

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

Статистика

  • Caйту: 4493 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 671
  • Онлайн всего: [28]
  • Гости: [28]
  • Были сегодня : [5] Google, Яндекс, dankeanke, ????????? ?????, irbees2008
  • SQL запросов: 32
  • Генерация страницы: 0.306сек
  • Потребление памяти: 5.395 Mb 
  •   Яндекс.Метрика