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

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

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

Можешь почитать и вот эту статейку "Следующая модификация плагина basket"

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 4605 дней
  • Новостей: 568
  • Комменты: 257
  • Зарегистрированно : 673
  • Онлайн всего: [12]
  • Гости: [11]
  • Поисковики: [1] Google
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 30
  • Генерация страницы: 0.458сек
  • Потребление памяти: 5.163 Mb 
  •   Яндекс.Метрика