0
ЗАДАЧАAJAX + JS + window.history - Использование Back-Forward Navigation
- Чтобы использовать Ajax для извлечения страниц
- Использование JS для обновления окна URL-адрес
- использовать историю окна, чтобы сохранить Ajax страница для перемотки вперед-назад без перезагрузки страницы
- Изменение атрибутов панели навигации (цвет путем изменения класса) с помощью кликов и обратных кликов.
ФУНКЦИОНИРОВАНИЯ
1, 2 и 3 работают.
ПРОБЛЕМА + ВОПРОС
Как сделать # 4 работы? А именно, как изменить атрибуты класса элемента списка навигационных элементов при использовании обратных щелчков, чтобы они соответствовали отображаемым страницам?
JAVASCRIPT КОД - с JQuery
<script>
$(function(){
$("a[RAJAX='RAJAX']").click(function(e){
e.preventDefault();
// if comment-uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content; if commented, html5 nonsupported browsers will reload the page to the specified link.
//get the link location that was clicked
pageurl = $(this).attr('href');
clickItem = $("header .navbar #menu-main-menu .dropdown-menu").find($(this)).parent(".menu-item").parent(".dropdown-menu").parent(); //BSR
//to get the ajax content and display in div with id 'content'
$.ajax({url:pageurl+'?RAJAX=RAJAX',success: function(data){
$('#content').html(data);
}});
//to change the browser URL to 'pageurl'
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
$(".dropdown").removeClass("activate-color");
clickItem.addClass("activate-color");
return false;
});
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?RAJAX=RAJAX',success: function(data){
$('#content').html(data);
}});
});
</script>
HTML код - с Bootstrap.css
<header>
<div class="navbar navbar-default navbar-fixed-top">
<ul id="menu-main-menu" class="nav navbar-nav">
<li class="dropdown">
<a href="">Nav Bar Item<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link1">Link-1</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link2">Link-2</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link3">Link-3</a></li>
</ul>
</li>
<li class="dropdown">
<a href="">Nav Bar Item<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link4">Link-4</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link5">Link-5</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link6">Link-6</a></li>
</ul>
</li>
<li class="dropdown">
<a href="">Nav Bar Item<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link7">Link-7</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link8">Link-8</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link9">Link-9</a></li>
<li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link10">Link-10</a></li>
</ul>
</li>
</ul>
</div> <!-- end .navbar -->
</header> <!-- end header -->
<div class="container body-container">
<div id="content" class="clearfix row custom-homepage" style="padding:10px;">
AJAX CONTENT SPACE
</div>
</div>