Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > древовидное меню


Автор: sugee 14.2.2006, 00:20
Допустим имеется простое древовидное меню. Как бы теперь сделать чтобы при раскрытии узла каждая ссылка соединялась с ним визуально видимой ветвью. Ветвь наверное должна состоять из точек, то есть надо чтобы при раскрытии узла точки выводились друг под другом до уровня последней ссылки(страница3) и также горизонтально на уровне каждой ссылки.
Объяснил бестолково, но наверное понятно что я имел ввиду.

P.S. Просьба готовый скрипт не давать - хочу сделать это сам, но не знаю как!

Код

<html>

<style type="text/css">
  #node1 { display:none; margin-left:30px }
  #node2 { display:none; margin-left:30px }
  #node3 { display:none; margin-left:30px }
       a { text-decoration: none; color: black }
</style>

<script>
      
   function toggleMenu(currMenu,NodeNum) {
   if (document.all) 
  {
  thisMenu = eval("document.all." + currMenu + ".style");
   if(NodeNum == 1) {
      if (thisMenu.display == "block") {
        thisMenu.display = "none";
                document.getElementById("OpenNode1").innerHTML = "-" 
        }
       else 
      {
      thisMenu.display = "block";
        document.getElementById("OpenNode1").innerHTML = "+" 
      }
}
   if(NodeNum == 2) {
      if (thisMenu.display == "block") {
        thisMenu.display = "none";
                document.getElementById("OpenNode2").innerHTML = "-"
        }
       else 
      {
      thisMenu.display = "block";
        document.getElementById("OpenNode2").innerHTML = "+"
      }
}
   if(NodeNum == 3) {
      if (thisMenu.display == "block") {
        thisMenu.display = "none";
                document.getElementById("OpenNode3").innerHTML = "-"
        }
       else 
      {
      thisMenu.display = "block";
        document.getElementById("OpenNode3").innerHTML = "+"
      }
} 
return false;    
   }
else {
   return true;
     }
 }

    
</script>



<h3>
    <a id='OpenNode1' href='' onClick="return toggleMenu('node1','1')">- </a>node1
</h3>
<div id="node1">
    <a href=''>страница1</a><BR>
    <a href=''>страница2</a><BR>
    <a href=''>страница3</a>
    
</div>
<h3>
    <a id='OpenNode2' href='' onClick="return toggleMenu('node2','2')">- </a>node2
</h3>
<div id="node2">
    <a href=''>страница1</a><BR>
    <a href=''>страница2</a><BR>
    <a href=''>страница3</a>
</div>
<h3>
    <a id='OpenNode3' href='' onClick="return toggleMenu('node3','3')">- </a>node3
</h3>
<div id="node3">
    <a href=''>страница1</a><BR>
    <a href=''>страница2</a><BR>
    <a href=''>страница3</a>
</div>

</html>

Автор: 12345c 14.2.2006, 02:52
Делают обычно рисунки ветвей, и включают - один для непоследней, другой для последней ветви. Типа таких:


|
|
+---
|
|


|
|
L___

Автор: sugee 14.2.2006, 14:40
Я сделал что-то похожее, все таки с точками, ветви целиком я рисовать не стал.
Код

<html>

<style type="text/css">
  #node1 { display:none; margin-left:30px }
  #node2 { display:none; margin-left:30px }
  #node3 { display:none; margin-left:30px }
  #point1 { display:none; }
  #point2 { display:none; }
  #point3 { display:none; }
       a { text-decoration: none; color: black }
</style>

<script>
      
   function toggleMenu(currMenu,currPoint,NodeNum) {
   if (document.all) 
  {
  thisMenu = eval("document.all." + currMenu + ".style");
  thisPoint = eval("document.all." + currPoint + ".style");
   if(NodeNum == 1) {
      if (thisMenu.display == "block") {
        thisMenu.display = "none";
                thisPoint.display = "none";
                document.getElementById("OpenNode1").innerHTML = "-" 
        
        }
       else 
      {
      thisMenu.display = "block";
        thisPoint.display = "block";
        document.getElementById("OpenNode1").innerHTML = "+" 
      }
}

return false;    
   }
else {
   return true;
     }
 }

    
</script>


<table cellspacing="0" cellpadding="0">

<tr><td colspan=2><br><b><font size="5">
    <a id='OpenNode1' href='' onClick="return toggleMenu('node1','point1','1')">- </a>node1
</font></b></td></tr>

<tr><td valign="top" align="left" width="6">
<span id="point1">
<img width="5" height="5" src="1.jpg"><br>
<img width="5" height="5" src="1.jpg"><br>
<img width="5" height="5" src="1.jpg"><br>
<img width="5" height="5" src="1.jpg"><br>
<img width="5" height="5" src="1.jpg"><br>
<img width="5" height="5" src="1.jpg"><br>
<img width="5" height="5" src="1.jpg"><br>
<img width="5" height="5" src="1.jpg"><br>
<img width="5" height="5" src="1.jpg"><br>
<img width="5" height="5" src="1.jpg"><br>
<img width="5" height="5" src="1.jpg"><br>
<img width="5" height="5" src="1.jpg"><br>
<img width="5" height="5" src="1.jpg"><br>
</span>
</td><td><div id="node1"><table>
    <tr><td align="left">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<a href=''>страница1</a></td></tr>
    <tr><td>
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<a href=''>страница2</a></td></tr>
    <tr><td>
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<img width="5" height="5" src="1.jpg">
<a href=''>страница3</a></td></tr>
        </table></div></td></tr>

</table></html>


Вот такое извращение...
Подскажите, как бы теперь организовать циклический вывод картинки внутри ячеек таблицы, чтобы не захламлять код бесконечными повторениями.
К тому же можно было бы тогда выводить её с определённой задержкой.

Автор: 12345c 14.2.2006, 15:42
Код

for(i=0;i<10;i++)document.write('<img width="5" height="5" src="1.jpg">');
Делается вместо ряда html-объектов. Нельзя обращаться из кликов и прочих событий. (Можно, но будет не то, что задумали smile. )

Автор: sugee 14.2.2006, 17:56
Ну для начала, результат работы этого цикла не получится вывести внутри ячейки.

Автор: 12345c 14.2.2006, 19:40
Генерируй всю таблицу.
А, собственно, почему на серверном скрипте ты это не делаешь?

Другой способ сложнее для написания и отладки - сначала таблицу, потом в ячейки ставишь innerHTML.

Ещё сложнее будет динамически добавлять строки в пустую таблицу. Поэтому проще сгенерировать всё на сервере.

Автор: sugee 14.2.2006, 20:08
Цитата(12345c @ 14.2.2006, 19:40 Найти цитируемый пост)
А, собственно, почему на серверном скрипте ты это не делаешь?

И после каждого клика ждать загрузки страницы?
По моему такие вещи должны делаться на стороне клиента, обычное DHTML-меню.

Автор: 12345c 15.2.2006, 02:54
Меню тоже можно делать проще и нагляднее, если генерируешь всю развёртку на сервере, но скрываешь (display:none) вложенные слои. (PHP значительно нагляднее для генерации, чем JS.)

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)