Сайты - по стандартам, но не стандартные сайты!
Проблема следующая:
некто пользователь щелчком по иконке раскрывал все пункты, составляющие меню, в поисках нужной темы. Найдя искомую, он щелкает по ее наименованию. При этом должны закрыться все слои, составляющие меню, за исключением ветки, к которой относится искомый пункт. Меню делается в XML, но этот кусок, описывающий каждый пункт, читабелен. Если будет что-то не понятно, я упрощу или сделаю в чистом HTML. Итак:
---------------------------------------------------------------------------------------------------
<xsl:template match="tree | nodetree"> // шаблон для не раскрывающегося пункта
<nobr>
<div class="Node">
<div class="label">
<span><img src="img/point.gif" style="vertical-align: middle" /></span>
<xsl:text> </xsl:text>
<xsl:if test="@xmlsrc!=''">
<a onclick='window.open("{@xmlsrc}","fraContent"); return false;'>
<i><xsl:value-of select="@title" /></i>
</a>
</xsl:if>
<xsl:if test="@xmlsrc=''">
<i><xsl:value-of select="@title" /></i>
</xsl:if>
</div>
</div>
</nobr>
</xsl:template>
<xsl:template match="tree[@href != '']"> // шаблон для раскрывающегося пункта
<nobr>
<div class="Node">
<div class="label">
<a onclick="switchNode(this,this); return false"><img src="img/plus.gif" id="{@id}" style="vertical-align: middle" /></a>
<xsl:text> </xsl:text>
<xsl:if test="@xmlsrc!=''">
<a onclick='switchNode(this,top);window.open("{@xmlsrc}","fraContent"); return false;'>
<i><xsl:value-of select="@title" /></i>
</a>
</xsl:if>
<xsl:if test="@xmlsrc=''">
<i><xsl:value-of select="@title" /></i>
</xsl:if>
</div>
<div class="nodeChildrenHidden">
<xsl:apply-templates select="document(@href, $top)/deeptree"/>
</div>
</div>
</nobr>
</xsl:template>
---------------------------------------------------------------------------------------------------------------
Скрипт switchNode() на данный момент выглядит так:
---------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
function switchNode(obj,obj1)
{
var ch = obj.parentNode.nextSibling;
if(ch.className == 'nodeChildrenOpen')
{
obj1.firstChild.src = "img/plus.gif";
ch.className = 'nodeChildrenHidden';
}
else
{
obj1.firstChild.src = "img/minus.gif";
ch.className = 'nodeChildrenOpen';
}
}
</script>
----------------------------------------------------------------------------------------------------------------
У меня была мысль сделать массив, в котором отражать все посещенные ссылки .... Но мне показалось, что это будет выглядеть как-то коряво. Кроме того, будет сложно составить цепочку (ветку). Не подскажете как это можно сделать по-лучше ???
Нет на форуме
mdi
Мне показалось, что на Xpoint Вы пришли к решению этой проблемы. Но, как бы то ни было, вот ссылка http://xhtml.ru/forum/viewtopic.php?id=136&p=1, здесь мы решали нечто подобное и Вам те решения могут оказаться полезными. Посмотрите, затем продолжим обсуждение...
И еще кое-что. Лично мне профессионалы рекомендовали в таких случаях использовать либо список определений, либо маркированный список - т.е. логичную разметку.
Нет на форуме
AKS написал:
mdi
Мне показалось, что на Xpoint Вы пришли к решению этой проблемы. Но, как бы то ни было, вот ссылка http://xhtml.ru/forum/viewtopic.php?id=136&p=1, здесь мы решали нечто подобное и Вам те решения могут оказаться полезными. Посмотрите, затем продолжим обсуждение...
И еще кое-что. Лично мне профессионалы рекомендовали в таких случаях использовать либо список определений, либо маркированный список - т.е. логичную разметку.
Извините меня за мою серость:
что Вы называете "списком определений" ? С маркированным списком у меня, вроде бы, все в порядке.
Это, если не ошибаюсь:
<ul>
<li>...</li>
<ul>
......
</ul>
</ul>
Нет на форуме
Извиняюсь. Слишком рано сознался в серости .... Список определений:
<DL>
<DT> ...... - название термина
<DD> ..... - определение термина
.............
</DL>
Нет на форуме
mdi
А ссылка Вам помогла хоть как-то? Там ведь сценарий, предложенный Wizard , как раз выполняет то, что Вам нужно...
Нет на форуме
Я пока чешу репу как извернуться .... Дело в том, что, как Вы могли видеть, у меня меню построено на DIV. Я пробовал использовать вызов "getElementsByTagName("div")", - глухо: выдавалось 0-элементов.
Я манипулировал с parentNode, - безрезультатно .... При этом: "getElementsByTagName("img")" работает без сучка и задоринки. К чему бы это ???
Нет на форуме
mdi
Давайте разберемся - Вы не хотите делать список из соответствующих тэгов? В любом случае выкладывайте код (x)html (для того, чтобы легче было представить Ваш список) и начнем все с самого начала...
Нет на форуме
Я приведу выдержки из XSL-таблица, чтобы не загромаждать место (честно говоря, я их уже приводил в начале переписки; может быть Вам нужна XSL-таблица полностью?). Итак:
Скрипт:
---------------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
function switchNode(obj,obj1)
{
var ch = obj.parentNode.nextSibling;
if(ch.className == 'nodeChildrenOpen')
{
obj1.firstChild.src = "img/plus.gif";
ch.className = 'nodeChildrenHidden';
}
else
{
obj1.firstChild.src = "img/minus.gif";
ch.className = 'nodeChildrenOpen';
}
}
</script>
--------------------------------------------------------------------------------------------------------------------
Шаблон, выполняющий формирование страницы:
--------------------------------------------------------------------------------------------------------------------
<xsl:template match="tree[@href != '']">
<nobr>
<div class="Node">
<div class="label">
<a onclick="switchNode(this,this); return false"><img src="img/plus.gif" id="{@id}" style="vertical-align: middle" /></a>
<xsl:text> </xsl:text>
<xsl:if test="@xmlsrc!=''">
<a onclick='switchNode(this,top);window.open("{@xmlsrc}","fraContent"); return false;'>
<i><xsl:value-of select="@title" /></i>
</a>
</xsl:if>
<xsl:if test="@xmlsrc=''">
<i><xsl:value-of select="@title" /></i>
</xsl:if>
</div>
<div class="nodeChildrenHidden">
<xsl:apply-templates select="document(@href, $top)/deeptree"/>
</div>
</div>
</nobr>
</xsl:template>
---------------------------------------------------------------------------------------------------------------
На всякий случай, кусок XML-файла:
---------------------------------------------------------------------------------------------------------------
<?xml version="1.0"?>
<?xml-stylesheet type="text/xml" href="top.xsl"?>
<deeptree title="Visual Studio .NET">
<tree title="1" id="1" nodechild="1_0" href="1a.files/leftframe/deeptree/top.xml" xmlsrc="1a.files/%72ightframe.files/ATOVS.htm" />
<nodetree title="2" id="2" nodechild="2_0" href="2a.files/leftframe/deeptree/top.xml" />
................................................................................
</deeptree>
Нет на форуме
mdi
Мне не нужна XSL-таблица полностью. Вы писали:
Если будет что-то не понятно, я упрощу или сделаю в чистом HTML.
Вот я и попросил чистый HTML, с которым и придется иметь javascript'у дело. Сами понимаете - зачем мне разбираться с тем, что не имеет к javascript никакого отношения.
Нет на форуме
Прошу прощения за размер файла: это преобразование средствами браузера. Итак, крепитесь:
-------------------------------------------------------------------------------------------------------------------
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>VS</title>
<style type="text/css">
div.Node
{
margin: 0.2em 0 0.2em 1em;
font: Menu;
}
div.nodeChildrenOpen
{
display: block;
}
div.nodeChildrenHidden
{
display: none;
}
div.label a, div.label span
{
padding: 0 0 0 0;
}
div.label a
{
cursor: pointer;
}
div.label img
{
margin: 0 0 0 0;
padding: 0 0 0 0;
cursor: pointer;
}
</style><script type="text/javascript">
function switchNode(obj,obj1)
{
var ch = obj.parentNode.nextSibling;
if(ch.className == 'nodeChildrenOpen')
{
obj1.firstChild.src = "img/plus.gif";
ch.className = 'nodeChildrenHidden';
}
else
{
obj1.firstChild.src = "img/minus.gif";
ch.className = 'nodeChildrenOpen';
}
}
</script>
</head>
<body>
<img style="vertical-align: middle;" src="top.xml_files/base.gif">
<b>VS</b>
<nobr>
<div class="Node">
<div class="label">
<a onclick="switchNode(this,this); return false">
<img style="vertical-align: middle;" id="1" src="top.xml_files/plus.gif">
</a>
<a onclick='switchNode(this,top);window.open("1a.files/%72ightframe.files/VS.htm","fraContent"); return false;'>
<i>Знакомство с VS</i>
</a>
</div>
<div class="nodeChildrenHidden">
<nobr>
<div class="Node">
<div class="label">
<a onclick="switchNode(this,this); return false">
<img style="vertical-align: middle;" id="1_1" src="top.xml_files/plus.gif">
</a>
<a onclick='switchNode(this,top);window.open("1/1a.files/%72ightframe.files/WNIVS.htm","fraContent"); return false;'>
<i>Новые возможности VS</i>
</a>
</div>
<div class="nodeChildrenHidden">
<nobr>
<div class="Node">
<div class="label">
<span>
<img style="vertical-align: middle;" src="top.xml_files/point.gif">
</span>
<i>1_1_1</i>
</div>
</div>
</nobr>
<nobr>
<div class="Node">
<div class="label">
<span>
<img style="vertical-align: middle;" src="top.xml_files/point.gif">
</span>
<i>1_1_2</i>
</div>
</div>
</nobr>
</div>
</div>
</nobr>
<nobr>
<div class="Node">
<div class="label">
<span>
<img style="vertical-align: middle;" src="top.xml_files/point.gif">
</span>
<a onclick='window.open("1/2.files/%72ightframe.files/VSE.htm","fraContent"); return false;'>
<i>Выпуски VS</i>
</a>
</div>
</div>
</nobr>
<nobr>
<div class="Node">
<div class="label">
<span>
<img style="vertical-align: middle;" src="top.xml_files/point.gif">
</span>
<a onclick='window.open("1/3.files/%72ightframe.files/C.htm","fraContent"); return false;'>
<i>Авторские права</i>
</a>
</div>
</div>
</nobr>
<nobr>
<div class="Node">
<div class="label">
<a onclick="switchNode(this,this); return false">
<img style="vertical-align: middle;" id="1_4" src="top.xml_files/plus.gif">
</a>
<a onclick='switchNode(this,top);window.open("1/4a.files/%72ightframe.files/IS.htm","fraContent"); return false;'>
<i>Установка и настройка</i>
</a>
</div>
<div class="nodeChildrenHidden">
<nobr>
<div class="Node">
<div class="label">
<span>
<img style="vertical-align: middle;" src="top.xml_files/point.gif">
</span>
<i>1_4_1</i>
</div>
</div>
</nobr>
<nobr>
<div class="Node">
<div class="label">
<span>
<img style="vertical-align: middle;" src="top.xml_files/point.gif">
</span>
<i>1_4_2</i>
</div>
</div>
</nobr>
</div>
</div>
</nobr>
</div>
</div>
</nobr>
<nobr>
<div class="Node">
<div class="label">
<a onclick="switchNode(this,this); return false">
<img style="vertical-align: middle;" id="2" src="top.xml_files/plus.gif">
</a>
<a onclick='switchNode(this,top);window.open("2a.files/%72ightframe.files/GS.htm","fraContent"); return false;'>
<i>Получение помощи</i>
</a>
</div>
<div class="nodeChildrenHidden"></div>
</div>
</nobr>
<nobr>
<div class="Node">
<div class="label">
<a onclick="switchNode(this,this); return false">
<img style="vertical-align: middle;" id="3" src="top.xml_files/plus.gif">
</a>
<a onclick='switchNode(this,top);window.open("3a.files/%72ightframe.files/SW.htm","fraContent"); return false;'>
<i>Примеры и образы</i>
</a>
</div>
<div class="nodeChildrenHidden"></div>
</div>
</nobr>
<nobr>
<div class="Node">
<div class="label">
<a onclick="switchNode(this,this); return false">
<img style="vertical-align: middle;" id="4" src="top.xml_files/plus.gif">
</a>
<a onclick='switchNode(this,top);window.open("4a.files/%72ightframe.files/DAWVS.htm","fraContent"); return false;'>
<i>Разработка с помощью VS</i>
</a>
</div>
<div class="nodeChildrenHidden"></div>
</div>
</nobr>
<nobr>
<div class="Node">
<div class="label">
<a onclick="switchNode(this,this); return false">
<img style="vertical-align: middle;" id="5" src="top.xml_files/plus.gif">
</a>
<a onclick='switchNode(this,top);window.open("5a.files/%72ightframe.files/MDSP.htm","fraContent"); return false;'>
<i>VBV</i>
</a>
</div>
<div class="nodeChildrenHidden"></div>
</div>
</nobr>
<nobr>
<div class="Node">
<div class="label">
<a onclick="switchNode(this,this); return false">
<img style="vertical-align: middle;" id="6" src="top.xml_files/plus.gif">
</a>
<a onclick='switchNode(this,top);window.open("6a.files/%72ightframe.files/sst.htm","fraContent"); return false;'>
<i>work</i>
</a>
</div>
<div class="nodeChildrenHidden"></div>
</div>
</nobr>
</body>
</html>
Нет на форуме
mdi
Вот теперь можно приступать. Вы знаете, там в каждом пункте идет сначала ссылка с картинкой, потом ссылка с текстом. Может, и картинку, и текст поставить в одну ссылку? Так было бы проще. Я пока начну копаться, а Вы подумайте над моим предложением по-поводу ссылок..
Нет на форуме
mdi
Там ведь не нужно открывать новое окно, когда нужно закрыть доп. список?
Я так понимаю, что метод window.open нужно убрать в функцию switchNode, чтобы из нее управлять открытием новых окон. Все я правильно понял? Ведь, зачем открывающееся окно, когда список закрывается?
Нет на форуме
AKS написал:
mdi
Может, и картинку, и текст поставить в одну ссылку? Так было бы проще. Я пока начну копаться, а Вы подумайте над моим предложением по-поводу ссылок..
Я бы, честно говоря, так не делал: дело в том, что при выборе иконки, дерево директорий просто раскрывается, а при выборе наименования происходит нетолько раскрытие слоя, но и вывод в правый "фрейм" нужной страницы. Кроме того, такое разграничение, вроде бы, упрощает функцию ....???
Нет на форуме
mdi
А по-поводу window.open? Убираю в switchNode в ту ветвь, где открытие? При закрытии будет только закрытие, так?
Нет на форуме
AKS написал:
mdi
Там ведь не нужно открывать новое окно, когда нужно закрыть доп. список?
Да.
AKS написал:
mdi
Я так понимаю, что метод window.open нужно убрать в функцию switchNode, чтобы из нее управлять открытием новых окон. Все я правильно понял? Ведь, зачем открывающееся окно, когда список закрывается
Я, впринципе, с Вами согласен !!!
Нет на форуме
AKS написал:
mdi
А по-поводу window.open? Убираю в switchNode в ту ветвь, где открытие? При закрытии будет только закрытие, так?
Пожалуй Вы - правы.
Нет на форуме
mdi
И еще один момент. Когда открываются Новые возможности VS - появляется 1_1_1 и т.д. Когда открываюся Установка и настройка , то
Новые возможности VS должны прятать свое 1_1_1 и т.д. Так?
Нет на форуме
Мысли у меня были следующие:
1. при открытии просто дерева, - открывай сколько хочешь: ведь идет поиск темы;
2. при выборе наименования закрываются все ветки дерева, кроме ветки, в конце которой находится выбранный пункт; Грубо говоря остается открытой ветка от "корня" до выбранного пункта.
При этом, если выбранный пункт, - раскрывающийся, то, скорее всего, он, - раскрыт ... Так вот: он раскрытым и должен остаться.
Вроде бы - так ...
Отредактированно mdi (16.06.2006 15:54)
Нет на форуме
mdi
Пока не понял, ну да ладно, разберемся после. Сначала сделаю, чтобы все открывалось, минут через 30 выложу, OK?
Нет на форуме
Меня через час-1.5 выгонят, но пока я в Вашем распоряжении ....
Нет на форуме
mdi
Куда? За что?
Нет на форуме
Да не нервничайте Вы так: у нас на рабочем месте можно быть только до определенного времени. Потом - выгоняют всех. Нетолько меня и опечатывают.
Нет на форуме
mdi
Итак, вот функция:
function switchNode(oTarget, aWinParams) {
if(oTarget) {
var oList = oTarget.parentNode.parentNode.getElementsByTagName("div")[1];
var oImg = oTarget.parentNode.getElementsByTagName("img")[0];
if(oList.className == "nodeChildrenOpen") {
oImg.src = "images/plus.gif";
oList.className = "nodeChildrenHidden";
}
else {
oImg.src = "images/minus.gif";
oList.className = "nodeChildrenOpen";
if(aWinParams) {
open(aWinParams[0], aWinParams[1]);
}
}
}
else { open(aWinParams[0], aWinParams[1]); }
}Как Вы должны заметить, нет обращений к св-вам nextSibling и previousSibling - не работает в FF && Opera.
Как применить функцию:
1. Там, где ссылка с картинкой - switchNode(this);return false
2. Там, где ссылка с текстом - switchNode(this, ["1a.files/%72ightframe.files/VS.htm", "fraContent"]); return false; - в массиве передаем параметры для нового окна.
3. Там, где у Вас был просто вызов, открывающий окно - switchNode(false, ["1/2.files/%72ightframe.files/VSE.htm", "fraContent"]); return false;
Нет на форуме
mdi
Там путь для картинок я на свой менял, Вы меняйте на свой...
Нет на форуме
Если Вы под FF понимаете FireFox, то у меня к Вам вопрос:
а почему у меня nextSibling в FF работает ???
Нет на форуме
mdi
Ну можно поменять. Сейчас, минуточку, покажу как и на что...
Нет на форуме
AKS написал:
mdi
3. Там, где у Вас был просто вызов, открывающий окно - switchNode(false, ["1/2.files/%72ightframe.files/VSE.htm", "fraContent"]); return false;
Вы имеете ввиду щелчок по нераскрывающемуся пункту меню ?
Нет на форуме
mdi
var oList = oTarget.parentNode.nextSibling;
var oImg = (oTarget.firstChild.tagName.toLowerCase() == "img") ? oTarget.firstChild : oTarget.previousSibling.firstChild;Сами знаете, вместо чего...
Нет на форуме
mdi
Да, щелчок по нераскрывающемуся пункту, где у Вас был просто window.open();
Нет на форуме
Спасибо. Въехал ...
Нет на форуме