В настоящее время я создаю приложение для клиента и столкнулся с проблемой. В настоящее время я использую сценарий для загрузки содержимого из другого файла в самом текущем файле, но содержимое не сохраняется при обновлении, а также не сохраняется при переходе назад и вперед. Вот код:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#accordionWrapper a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.jsp #content';
$('#content').load(toLoad);
}
});
$('#accordionWrapper a').live('click', function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#bodyWrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
Я присоединяю другой js-файл на случай возникновения конфликтов:
// Accordion Menu Function
$(document).ready(function() {
//ACCORDION BUTTON ACTION
$('a.accordionButton').live('click', function() {
// Closes the current open ul.
$('ul.accordionContent').slideUp('normal');
// opens the selected link's ul.
$(this).next().slideDown('normal');
// removes the active class from all links.
$('a.accordionButton').each(function(){
$(this).removeClass('selected');
});
// adds the active class to the selected link.
$(this).addClass('selected');
});
//ACCORDION BUTTON HOVER EFFECT
$(".accordionButton").hover(
function () {
$("span", this).stop().animate({ paddingRight: "30px" }, 200);
},
function () {
$("span", this).stop().animate({ paddingRight: "0px" });
}
);
//SIDEBAR MENU HIDE TOGGLE
$('.hideSideBar').live('click', function() {
$('#sidebar').toggle("slide", function() {
});
});
$('.showSideBar').click(function() {
$('#sidebar').toggle('slide', function() {
});
});
//HIDE THE DIVS ON PAGE LOAD
$("div.accordionContent").hide();
});
//REFRESH PAGE FIX
function getCurrentPage() {
//Defines the Path Variable to be the url's # tag
var path = window.location.hash;
//Tries every a class named accordionButton
$('a.accordionButton').each(function(){
//Loops whether the path is equal to the attributes id tag
if ( path == $(this).attr('id') ) {
//Adds class 'selected' to matching element.
$(this).addClass('selected');
//Opens the selected link's ul.
$(this).next().slideDown('normal');
/*
//Tries every a within an li child of accordionContent.
$('.accordionContent li a').each(function(){
//Loops to find an element that's id equals the path variable.
if ( path == $(this).attr('id') ) {
//Adds class 'active' to matching element.
$(this).addClass('active');
}
});
*/
}
});
}
и, наконец, HTML:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/contentLoader.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.js"></script>
<script type="text/javascript" src="js/accordionMenu.js"></script>
<link type="text/css" rel="stylesheet" href="css/accordionMenu.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body onload="getCurrentPage()">
<div id="bodyWrapper">
<div class="showSideBar" style="display:none;">Show Navigation [+]</div>
<div id="sidebar">
<a class="logo" href="dashboard.jsp"></a>
<div id="loginWelcome">
<span>Welcome back</span>
<span class="username">John Doe</span>
<span class="logout"><a href="">Logout</a></span>
</div>
<div id="accordionWrapper">
<a class="accordionButton" href="dashboard.jsp" id="#dashboar"><span>Dashboard</span></a>
<ul class="accordionContent">
<li><a href="dashboard.jsp" class="active">Edit My Profile</a></li>
</ul>
<a class="accordionButton" href="workorders.jsp" id="#workorder"><span>Work Orders</span></a>
<ul class="accordionContent">
<li><a href="">Create New Work Order</a></li>
<li><a href="workorders.jsp" class="active">Manage Work Orders</a></li>
</ul>
<a class="accordionButton" href="workitems.jsp" id="#workitem"><span>Work Items</span></a>
<ul class="accordionContent">
<li><a href="">Create New Work Item</a></li>
<li><a href="workitems.jsp" class="active">Manage Work Items</a></li>
</ul>
<a class="accordionButton" href="users.jsp" id="#user"><span>Users</span></a>
<ul class="accordionContent">
<li><a href="">Add New User</a></li>
<li><a href="users.jsp" class="active">Manage Users</a></li>
</ul>
<a class="accordionButton" href="airplanes.jsp" id="#airplane"><span>Airplanes</span></a>
<ul class="accordionContent">
<li><a href="">Add New Airplane</a></li>
<li><a href="airplanes.jsp" class="active">Manage Airplanes</a></li>
</ul>
<a class="accordionButton" href="support.jsp" id="#suppor"><span>Support</span></a>
</div>
<a class="hideSideBar" href="#">Hide Navigation [-]</a>
</div>
<div id="contentWrapper">
<div id="content">
</div>
</div>