Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как привильнее сделать дерево / 12 сообщений из 12, страница 1 из 1
30.09.2006, 14:49
    #34023995
Damnedest
Damnedest
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как привильнее сделать дерево
Есть спиок документов (папки и просто файлы)

Задача состоит в том, чтобы вывести это дерево на HTML.

Должна бать возможность открывать и скрывать содержимое папки.

С помощью PHP передается JS массив, в котором есть все дерево. С помощью этого массива можно легко построить дерево, вопрос в том, как правильнее...

У меня два варианта, которые сразу приходят в голову:

1. С помощью таблицы
Код: plaintext
1.
2.
...
<tr><td>+</td><td>Элемент с содержимым</td></tr>
...

Тут никаких проблем нету. Мне не нравится только то, что страница будет слишком сильно перегружена HTML тегами и таблицами

2. С помощь списков
Код: plaintext
1.
2.
3.
4.
5.
...
<li>Элемент  1 
  <ul>
    <li>Элемент  2 </li>
  </ul>
...

Этот вариант мне нравится намного больше в плане простоты реализации, НО мне надо, чтобы при клике на названии документа открывался документ, а при клике на "+" открывалось содержимое папки.
Можно ли это тут реализовать...

P.S. Вопрос, как правильно реализовать древовидную структуру с учетом вложенностей и, чтобы при нажатии на иконку "+" рядом с документом открывались вложенные в него документы
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.09.2006, 15:07
    #34024013
Anjey aka PM
Anjey aka PM
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как привильнее сделать дерево
в даном случае списком однозначно + немного работы с CSS и все будет выглядеть довольно таки прилично...

вот пример (правда это дерево не разворачивается):

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
<ul class="tree">
  <li class="root"><b> 22 </b>: Tue  17 -Jan- 2006   15 : 41 : 54 
    <ul class="tree">
      <li><a href="295.html"> 4533353 </a>: Tue  17 -Jan- 2006   15 : 47 : 22 </li><li><a href="549.html">
        Re:  22 </a>: Tue  21 -Feb- 2006   09 : 51 : 12 </li><li><a href="550.html">Re:  22 </a>: Tue  21 -Feb- 2006 
           10 : 02 : 27 
          <ul class="tree">
            <li class="last"><a href="551.html">Re: Re:  22 </a>: Tue  21 -Feb- 2006   10 : 05 : 41 
              <ul class="tree">
                <li class="last"><a href="552.html">Re[ 3 ]:  22 </a>: Tue  21 -Feb- 2006   10 : 23 : 14 
                  <ul class="tree">
                    <li class="last"><a href="553.html">Re: Re[ 3 ]:  22 </a>: Tue  21 -Feb- 2006   10 : 26 : 32 
                      <ul class="tree">
                        <li class="last"><a href="555.html">Re[ 5 ]:  22 </a>: Tue  21 -Feb- 2006   10 : 32 : 25 
                          <ul class="tree">
                            <li class="last"><a href="557.html">Re: Re[ 5 ]:  22 </a>: Tue  21 -Feb- 2006   11 : 39 : 43 </li></ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      <li><a href="554.html">Re:  22 </a>: Tue  21 -Feb- 2006   10 : 30 : 45 
        <ul class="tree">
          <li class="last"><a href="576.html">Re: Re:  22 </a>: Thu  23 -Feb- 2006   16 : 56 : 06 </li></ul>
      </li>
      <li><a href="556.html">Re:  22 </a>: Tue  21 -Feb- 2006   10 : 46 : 25 </li><li><a href="558.html">
        Re:  22 </a>: Wed  22 -Feb- 2006   10 : 47 : 55 
        <ul class="tree">
          <li><a href="559.html">Re: Re:  22 </a>: Wed  22 -Feb- 2006   10 : 50 : 53 </li><li><a href="560.html">
            Re: Re:  22 </a>: Wed  22 -Feb- 2006   14 : 30 : 23 
            <ul class="tree">
              <li class="last"><a href="585.html">Re: Re: Re:  22 </a>: Fri  24 -Feb- 2006   10 : 35 : 01 </li></ul>
          </li>
          <li class="last"><a href="561.html">Re: Re:  22 </a>: Wed  22 -Feb- 2006   14 : 36 : 55 
            <ul class="tree">
              <li class="last"><a href="562.html">Re[ 3 ]:  22 </a>: Wed  22 -Feb- 2006   15 : 17 : 32 
                <ul class="tree">
                  <li class="last"><a href="563.html">Re: Re[ 3 ]:  22 </a>: Wed  22 -Feb- 2006   15 : 21 : 56 
                    <ul class="tree">
                      <li class="last"><a href="564.html">Re: Re: Re[ 3 ]:  22 </a>: Wed  22 -Feb- 2006   15 : 22 : 41 </li></ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="565.html">Re:  22 </a>: Wed  22 -Feb- 2006   16 : 10 : 00 
        <ul class="tree">
          <li class="last"><a href="568.html">Re: Re:  22 </a>: Thu  23 -Feb- 2006   09 : 46 : 02 
            <ul class="tree">
              <li class="last"><a href="569.html">Re: Re: Re:  22 </a>: Thu  23 -Feb- 2006   10 : 06 : 40 
                <ul class="tree">
                  <li class="last"><a href="572.html">Re: Re: Re: Re:  22 </a>: Thu  23 -Feb- 2006   16 : 09 : 21 </li></ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="570.html">Re:  22 </a>: Thu  23 -Feb- 2006   10 : 54 : 04 
        <ul class="tree">
          <li class="last"><a href="587.html">Re: Re: Re: Re: Re[ 2 ]:  22 </a>: Fri  24 -Feb- 2006 
             10 : 41 : 43 </li></ul>
      </li>
      <li><a href="571.html">Re[ 2 ]:  22 </a>: Thu  23 -Feb- 2006   11 : 00 : 21 </li><li><a href="592.html">
        Re:  22 </a>: Fri  24 -Feb- 2006   14 : 16 : 36 </li><li class="last"><a href="594.html">Re:  22 </a>:
          Sat  25 -Feb- 2006   09 : 09 : 13 </li></ul>
  </li>
</ul>

как выглядит можна глянуть на картинке
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.09.2006, 18:18
    #34024146
Damnedest
Damnedest
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как привильнее сделать дерево
А как отлавливать нажатие мыши по этому плюсику, чтобы открывать содержимое папки?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.09.2006, 22:59
    #34024285
Anjey aka PM
Anjey aka PM
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как привильнее сделать дерево
а плюсик должен быть картинкой как часть текста элемента списка
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.10.2006, 12:39
    #34024448
anvano
anvano
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как привильнее сделать дерево
Вот статейка со ссылкой на исходники деревьев, используемых на RSDN

http://www.rsdn.ru/article/files/scripts/HTMLTree.xml

Сами разворачивающиеся деревья, написанные с помощью этого контрола можно видеть тут:

www.rsdn.ru
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.10.2006, 23:57
    #34024852
Damnedest
Damnedest
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как привильнее сделать дерево
Большое спасибо за ссылку. К сожалению это не совсем то, там находится в одной картинки еще и плюсик. (http://www.rsdn.ru/images/tree/atc.gif), а у меня как раз сейчас основная проблема с расположением двух картинко подряд в LI...

Вообще ничего не получается. Помогите пожалуйста, кто хорошо разбирается в CSS...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.10.2006, 12:11
    #34025584
Гутманс
Гутманс
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как привильнее сделать дерево
Damnedest
http://www.hotscripts.com тут полно всего и с плюсиками и с минусиками тирэ имеется.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.10.2006, 13:16
    #34025835
Black
Black
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как привильнее сделать дерево
Модератор: Перенесено из форума PHP&PERL
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.10.2006, 00:02
    #34030217
М.Голованов
М.Голованов
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как привильнее сделать дерево
DamnedestВообще ничего не получается. Помогите пожалуйста, кто хорошо разбирается в CSS...

А почему только в CSS? Что-то не помню, чтобы стили умели управлять состоянием документа.

Вообще возьмите дерево из

http://developer.yahoo.com/yui/

Сам пользуюсь и другим советую... хотя не навязываю...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Период между сообщениями больше года.
10.02.2009, 15:52
    #35808549
dareks
dareks
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как привильнее сделать дерево
Anjey aka PMв даном случае списком однозначно + немного работы с CSS и все будет выглядеть довольно таки прилично...

вот пример (правда это дерево не разворачивается):

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
<ul class="tree">
  <li class="root"><b> 22 </b>: Tue  17 -Jan- 2006   15 : 41 : 54 
    <ul class="tree">
      <li><a href="295.html"> 4533353 </a>: Tue  17 -Jan- 2006   15 : 47 : 22 </li><li><a href="549.html">
        Re:  22 </a>: Tue  21 -Feb- 2006   09 : 51 : 12 </li><li><a href="550.html">Re:  22 </a>: Tue  21 -Feb- 2006 
           10 : 02 : 27 
          <ul class="tree">
            <li class="last"><a href="551.html">Re: Re:  22 </a>: Tue  21 -Feb- 2006   10 : 05 : 41 
              <ul class="tree">
                <li class="last"><a href="552.html">Re[ 3 ]:  22 </a>: Tue  21 -Feb- 2006   10 : 23 : 14 
                  <ul class="tree">
                    <li class="last"><a href="553.html">Re: Re[ 3 ]:  22 </a>: Tue  21 -Feb- 2006   10 : 26 : 32 
                      <ul class="tree">
                        <li class="last"><a href="555.html">Re[ 5 ]:  22 </a>: Tue  21 -Feb- 2006   10 : 32 : 25 
                          <ul class="tree">
                            <li class="last"><a href="557.html">Re: Re[ 5 ]:  22 </a>: Tue  21 -Feb- 2006   11 : 39 : 43 </li></ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      <li><a href="554.html">Re:  22 </a>: Tue  21 -Feb- 2006   10 : 30 : 45 
        <ul class="tree">
          <li class="last"><a href="576.html">Re: Re:  22 </a>: Thu  23 -Feb- 2006   16 : 56 : 06 </li></ul>
      </li>
      <li><a href="556.html">Re:  22 </a>: Tue  21 -Feb- 2006   10 : 46 : 25 </li><li><a href="558.html">
        Re:  22 </a>: Wed  22 -Feb- 2006   10 : 47 : 55 
        <ul class="tree">
          <li><a href="559.html">Re: Re:  22 </a>: Wed  22 -Feb- 2006   10 : 50 : 53 </li><li><a href="560.html">
            Re: Re:  22 </a>: Wed  22 -Feb- 2006   14 : 30 : 23 
            <ul class="tree">
              <li class="last"><a href="585.html">Re: Re: Re:  22 </a>: Fri  24 -Feb- 2006   10 : 35 : 01 </li></ul>
          </li>
          <li class="last"><a href="561.html">Re: Re:  22 </a>: Wed  22 -Feb- 2006   14 : 36 : 55 
            <ul class="tree">
              <li class="last"><a href="562.html">Re[ 3 ]:  22 </a>: Wed  22 -Feb- 2006   15 : 17 : 32 
                <ul class="tree">
                  <li class="last"><a href="563.html">Re: Re[ 3 ]:  22 </a>: Wed  22 -Feb- 2006   15 : 21 : 56 
                    <ul class="tree">
                      <li class="last"><a href="564.html">Re: Re: Re[ 3 ]:  22 </a>: Wed  22 -Feb- 2006   15 : 22 : 41 </li></ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="565.html">Re:  22 </a>: Wed  22 -Feb- 2006   16 : 10 : 00 
        <ul class="tree">
          <li class="last"><a href="568.html">Re: Re:  22 </a>: Thu  23 -Feb- 2006   09 : 46 : 02 
            <ul class="tree">
              <li class="last"><a href="569.html">Re: Re: Re:  22 </a>: Thu  23 -Feb- 2006   10 : 06 : 40 
                <ul class="tree">
                  <li class="last"><a href="572.html">Re: Re: Re: Re:  22 </a>: Thu  23 -Feb- 2006   16 : 09 : 21 </li></ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="570.html">Re:  22 </a>: Thu  23 -Feb- 2006   10 : 54 : 04 
        <ul class="tree">
          <li class="last"><a href="587.html">Re: Re: Re: Re: Re[ 2 ]:  22 </a>: Fri  24 -Feb- 2006 
             10 : 41 : 43 </li></ul>
      </li>
      <li><a href="571.html">Re[ 2 ]:  22 </a>: Thu  23 -Feb- 2006   11 : 00 : 21 </li><li><a href="592.html">
        Re:  22 </a>: Fri  24 -Feb- 2006   14 : 16 : 36 </li><li class="last"><a href="594.html">Re:  22 </a>:
          Sat  25 -Feb- 2006   09 : 09 : 13 </li></ul>
  </li>
</ul>

как выглядит можна глянуть на картинке

А можно ли поделится CSS а именно last, tree, root ПЛИЗ
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.02.2009, 15:56
    #35808558
Evgeniy_SH
Evgeniy_SH
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как привильнее сделать дерево
ни чё так, тема от 06 года?:)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.02.2009, 15:57
    #35808564
dareks
dareks
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как привильнее сделать дерево
:) ну а что делать, задавать новую, нашел и решил ее продолжыть
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как привильнее сделать дерево / 12 сообщений из 12, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 487ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1455204]:
 0ms
get settings:
 8ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 160ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 44ms
get tp. blocked users:
 1ms
others: 239ms
total:  487ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]