Новичок
Профиль
Группа: Участник
Сообщений: 12
Регистрация: 17.9.2005
Репутация: нет
Всего: нет
|
Есть древодидное меню. При каждом переходе на новую страницу или обновлении страницы меню загружается в полностью свернутом варианте. Как можно изменить скрипт, чтобы сохранялось состояние меню (открытые тематики не сворачивались, а оставались открытыми). Код скрипта приведен ниже: | Код |
/**********************************
Глобальные переменные
***********************************/
// предв. кеширование картинок
// (все картинки должны иметь одинаковые высоту и ширину)
var collapsedWidget = new Image(20, 16);
collapsedWidget.src = "../img/oplus.gif";
var collapsedWidgetStart = new Image(20, 16);
collapsedWidgetStart.src = "../img/oplusStart.gif";
var collapsedWidgetEnd = new Image(20, 16);
collapsedWidgetEnd.src = "../img/oplusEnd.gif";
var expandedWidget = new Image(20, 16);
expandedWidget.src = "../img/ominus.gif";
var expandedWidgetStart = new Image(20, 16);
expandedWidgetStart.src = "../img/ominusStart.gif";
var expandedWidgetEnd = new Image(20, 16);
expandedWidgetEnd.src = "../img/ominusEnd.gif";
var nodeWidget = new Image(20, 16);
nodeWidget.src = "../img/onode.gif";
var nodeWidgetEnd = new Image(20, 16);
nodeWidgetEnd.src = "../img/onodeEnd.gif";
var emptySpace = new Image(20, 16);
emptySpace.src = "../img/oempty.gif";
var chainSpace = new Image(20, 16);
chainSpace.src = "../img/ochain.gif";
// разные переменные
var widgetWidth = "20";
var widgetHeight = "16";
var currState = "";
var displayTarget = "_self";
/**********************************
МЕНЮ
***********************************/
var expansionState = "";
// constructor for outline item objects
function outlineItem(text, uri) {
this.text = text;
this.uri = uri;
}
var olData = {childNodes:
[{item:new outlineItem("<b>Россия и СНГ</b>", "../ways/index.php"),
childNodes:
[{item:new outlineItem("Оренбург", "../ways/oren.php")},
{item:new outlineItem("Башкирия", "../ways/bashkir.php")},
{item:new outlineItem("Челябинск", "../ways/chelyab.php")},
{item:new outlineItem("Самара", "../ways/samara.php")},
{item:new outlineItem("Москва, подмосковье", "../ways/moskow.php")},
{item:new outlineItem("Ульяновск", "../ways/uliyan.php")},
{item:new outlineItem("<b>Черноморское побережье Кавказа</b>", "../ways/kavkazmore.php"),
childNodes:
[{item:new outlineItem("Сочи", "../ways/sochi.php")},
{item:new outlineItem("Анапа", "../ways/anapa.php")},
{item:new outlineItem("Геленджик", "../ways/gelend.php")},
{item:new outlineItem("Туапсе", "../ways/tuapse.php")},
{item:new outlineItem("Адлер", "../ways/adler.php")}
]},
{item:new outlineItem("Абхазия", "../ways/abhazia.php")},
{item:new outlineItem("<b>Кавказcкие минеральные воды</b>", "../ways/kavkazvodi.php"),
childNodes:
[{item:new outlineItem("Кисловодск", "../ways/kislovod.php")},
{item:new outlineItem("Пятигорск", "../ways/pyatig.php")},
{item:new outlineItem("Есентуки", "../ways/esentuk.php")},
{item:new outlineItem("Железноводск", "../ways/jeleznovod.php")}
]},
{item:new outlineItem("<b>Крым</b>", "../ways/krim.php"),
childNodes:
[{item:new outlineItem("Южный берег", "../ways/southb.php")},
{item:new outlineItem("Западный берег", "../ways/westb.php")},
{item:new outlineItem("Восточный берег", "../ways/eastb.php")}
]},
{item:new outlineItem("Трускавец", "../ways/truskav.php")},
{item:new outlineItem("Экскурсионные туры", "../ways/turi.php")},
{item:new outlineItem("<b>Горнолыжные курорты</b>", "../ways/skioren.php"),
childNodes:
[{item:new outlineItem("Оренбургская облаcть", "../ways/skioren.php")},
{item:new outlineItem("Приэльбрусье Домбай", "../ways/skielb.php")}
]}
]},
{item:new outlineItem("<b>Заграничные туры</b>", "../ways/outlang.php"),
childNodes:
[{item:new outlineItem("Австралия", "../ways/index.php")},
{item:new outlineItem("Канада", "../ways/index.php")},
{item:new outlineItem(" и т.д. ", "../ways/index.php")}
]}
]
};
/**********************************
Управление видимостью и картинками
***********************************/
function swapState(currState, currVal, n) {
var newState = currState.substring(0,n);
newState += currVal ^ 1 // Bitwise XOR item n;
newState += currState.substring(n+1,currState.length);
return newState;
}
function getExpandedWidgetState(imgURL) {
if (imgURL.indexOf("Start") != -1) {
return expandedWidgetStart.src;
}
if (imgURL.indexOf("End") != -1) {
return expandedWidgetEnd.src;
}
return expandedWidget.src;
}
function getCollapsedWidgetState(imgURL) {
if (imgURL.indexOf("Start") != -1) {
return collapsedWidgetStart.src;
}
if (imgURL.indexOf("End") != -1) {
return collapsedWidgetEnd.src;
}
return collapsedWidget.src;
}
function toggle(img, blockNum) {
var newString = "";
var expanded, n;
expanded = currState.charAt(blockNum);
currState = swapState(currState, expanded, blockNum);
if (expanded == "0") {
document.getElementById("OLBlock" + blockNum).style.display = "block";
img.src = getExpandedWidgetState(img.src);
} else {
document.getElementById("OLBlock" + blockNum).style.display = "none";
img.src = getCollapsedWidgetState(img.src);
}
}
function expandAll() {
var newState = "";
while (newState.length < currState.length) {
newState += "1";
}
currState = newState;
initExpand();
}
function collapseAll() {
var newState = "";
while (newState.length < currState.length) {
newState += "0";
}
currState = newState;
initExpand();
}
/*********************************
Генерация кода HTML
**********************************/
function calcBlockState(n) {
var expandedData = (expansionState.length > 0) ? expansionState.split(",") : null;
if (expandedData) {
for (var j = 0; j < expandedData.length; j++) {
if (n == expandedData[j] - 1) {
return "1";
}
}
}
return "0";
}
var currID = 0;
var blockID = 0;
function drawOutline(ol, prefix) {
var output = "";
var nestCount, link, nestPrefix, lastInnerNode;
prefix = (prefix) ? prefix : "";
for (var i = 0; i < ol.childNodes.length ; i++) {
nestCount = (ol.childNodes[i].childNodes) ? ol.childNodes[i].childNodes.length : 0;
output += "<div class='OLRow' id='line" + currID++ + "'>\n";
if (nestCount > 0) {
output += prefix;
output += "<img id='widget" + (currID-1) + "' src='" + ((i == ol.childNodes.length-1 && blockID != 0) ? collapsedWidgetEnd.src : (blockID == 0) ? collapsedWidgetStart.src : collapsedWidget.src);
output += "' height=" + widgetHeight + " width=" + widgetWidth;
output += " title='Click to expand/collapse nested items.' onClick='toggle(this," + blockID + ")'> ";
link = (ol.childNodes[i].item.uri) ? ol.childNodes[i].item.uri : "";
if (link) {
output += "<a style='cursor: pointer' href='" + link + "' class='itemTitle' title='" +
link + "' target='" + displayTarget + "'>" ;
} else {
output += "<a style='cursor: pointer' class='itemTitle' title='" + link + "'>";
}
output += "<span style='position:relative; top:-3px; height:11px'>" + ol.childNodes[i].item.text + "</span></a>";
currState += calcBlockState(currID-1);
output += "<span class='OLBlock' blocknum='" + blockID + "' id='OLBlock" + blockID++ + "'>";
nestPrefix = prefix;
nestPrefix += (i == ol.childNodes.length - 1) ?
"<img src='" + emptySpace.src + "' height=" + widgetHeight + " width=" + widgetWidth + ">" :
"<img src='" + chainSpace.src + "' height=" + widgetHeight + " width=" + widgetWidth + ">"
output += drawOutline(ol.childNodes[i], nestPrefix);
output += "</span></div>\n";
} else {
output += prefix;
output += "<img id='widget" + (currID-1) + "' src='" + ((i == ol.childNodes.length - 1) ? nodeWidgetEnd.src : nodeWidget.src);
output += "' height=" + widgetHeight + " width=" + widgetWidth + ">";
link = (ol.childNodes[i].item.uri) ? ol.childNodes[i].item.uri : "";
if (link) {
output += " <a href='" + link + "' style='cursor: pointer ;' class='itemTitle' title='" +
link + "' target='" + displayTarget + "'>";
} else {
output += " <a style='cursor: pointer' class='itemTitle' title='" + link + "'>";
}
output += "<span style='position:relative; top:-3px; height:11px'>" + ol.childNodes[i].item.text + "</span></a>";
output += "</div>\n";
}
}
return output;
}
/*********************************
Инициализация
**********************************/
function initExpand() {
for (var i = 0; i < currState.length; i++) {
if (currState.charAt(i) == 1) {
document.getElementById("OLBlock" + i).style.display = "block";
} else {
document.getElementById("OLBlock" + i).style.display = "none";
}
}
}
function initExpMenu(xFile) {
// заворачиваем все меню в span
var olHTML = "<span id='renderedOL'>" + drawOutline(olData) + "</span>";
// закидываем код HTML в 'content' div для отображения
document.getElementById("content").innerHTML = olHTML;
initExpand();
}
|
|
Запоминание состояния древовидного меню, после перезагрузки (ра)скрыть меню 
Загрузка ...
