Хаки и Скрипты Next Generation CMS : JS, Интерфейс : Переходы внутри сайта без перезагрузки на javascript history

irbees2008 Опубликовано - 30 - апреля JS

Адаптировал: 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>

Можешь почитать и вот эту статейку "Про обновление"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.