VPF::древовидное меню - Форум программистов

sugee

Дата 14.2.2006, 00:20 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 423
Регистрация: 12.6.2005

Репутация: нет
Всего: 4

Допустим имеется простое древовидное меню. Как бы теперь сделать чтобы при раскрытии узла каждая ссылка соединялась с ним визуально видимой ветвью. Ветвь наверное должна состоять из точек, то есть надо чтобы при раскрытии узла точки выводились друг под другом до уровня последней ссылки(страница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 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

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

|
|
+---
|
|

|
|
L___

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

sugee

Дата 14.2.2006, 14:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 423
Регистрация: 12.6.2005

Репутация: нет
Всего: 4

Я сделал что-то похожее, все таки с точками, ветви целиком я рисовать не стал.

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Код


for(i=0;i<10;i++)document.write('<img width="5" height="5" src="1.jpg">');

Делается вместо ряда html-объектов. Нельзя обращаться из кликов и прочих событий. (Можно, но будет не то, что задумали smile

. )

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

sugee

Дата 14.2.2006, 17:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 423
Регистрация: 12.6.2005

Репутация: нет
Всего: 4

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

12345c

Дата 14.2.2006, 19:40 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

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

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

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

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

sugee

Дата 14.2.2006, 20:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 423
Регистрация: 12.6.2005

Репутация: нет
Всего: 4

Цитата(12345c @ 14.2.2006, 19:40

)

А, собственно, почему на серверном скрипте ты это не делаешь?

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

12345c

Дата 15.2.2006, 02:54 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

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

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »