Как сделать дерево
От: Nico Узбекистан  
Дата: 29.07.02 11:48
Оценка:
Проблема такова. Я сделал что-то подобное с помощью тэга <LI> только неполучается его вывести в свернутом виде. Вот и все. :super:
Re: Как сделать дерево
От: John_Headlong  
Дата: 29.07.02 13:14
Оценка:
Здравствуйте Nico, Вы писали:

N>Проблема такова. Я сделал что-то подобное с помощью тэга <LI> только неполучается его вывести в свернутом виде. Вот и все.

Я знаю четыре способа сделать дерево, работающее целиком на клиенте: средствами Static HTML, Dynamic HTML, ActiveX и Java applet. Скажи адрес почты — вышлю работающие примеры.
Re[2]: Как сделать дерево
От: Flamer Кипр http://users.livejournal.com/_flamer_/
Дата: 29.07.02 13:22
Оценка:
Здравствуйте John_Headlong, Вы писали:

JH>Здравствуйте Nico, Вы писали:

N>>Проблема такова. Я сделал что-то подобное с помощью тэга <LI> только неполучается его вывести в свернутом виде. Вот и все.

JH>Я знаю четыре способа сделать дерево, работающее целиком на клиенте: средствами Static HTML, Dynamic HTML, ActiveX и Java applet. Скажи адрес почты — вышлю работающие примеры.

А лучше не на почту, а в раздел "Q&A", или "Файлы", например. Тогда и другим пригодится...
Re[3]: Как сделать дерево
От: John_Headlong  
Дата: 29.07.02 13:35
Оценка:
Здравствуйте Flamer, Вы писали:

F>Здравствуйте John_Headlong, Вы писали:

JH>>Здравствуйте Nico, Вы писали:

N>>>Проблема такова. Я сделал что-то подобное с помощью тэга <LI> только неполучается его вывести в свернутом виде. Вот и все.

JH>>Я знаю четыре способа сделать дерево, работающее целиком на клиенте: средствами Static HTML, Dynamic HTML, ActiveX и Java applet. Скажи адрес почты — вышлю работающие примеры.

F>А лучше не на почту, а в раздел "Q&A", или "Файлы", например. Тогда и другим пригодится...

Блин, граждане, а как мне файлы-то приаттачить к сообщению? Или, может быть, ссылку какую ткнуть? Просветите меня, неученого, я в RSDN недавно...
Re[4]: Как сделать дерево
От: John_Headlong  
Дата: 29.07.02 14:08
Оценка:
Здравствуйте John_Headlong, Вы писали:

JH>Здравствуйте Flamer, Вы писали:

F>>Здравствуйте John_Headlong, Вы писали:

JH>>>Здравствуйте Nico, Вы писали:

N>>>>Проблема такова. Я сделал что-то подобное с помощью тэга <LI> только неполучается его вывести в свернутом виде. Вот и все.

JH>>>Я знаю четыре способа сделать дерево, работающее целиком на клиенте: средствами Static HTML, Dynamic HTML, ActiveX и Java applet. Скажи адрес почты — вышлю работающие примеры.

F>>А лучше не на почту, а в раздел "Q&A", или "Файлы", например. Тогда и другим пригодится...

JH>Блин, граждане, а как мне файлы-то приаттачить к сообщению? Или, может быть, ссылку какую ткнуть? Просветите меня, неученого, я в RSDN недавно...

Примеры выслал на submit@rsdn.ru
Re[5]: Как сделать дерево
От: Nico Узбекистан  
Дата: 30.07.02 05:23
Оценка:
Здравствуйте John_Headlong, Вы писали:

JH>Здравствуйте John_Headlong, Вы писали:

JH>>Здравствуйте Flamer, Вы писали:

F>>>Здравствуйте John_Headlong, Вы писали:

JH>>>>Здравствуйте Nico, Вы писали:

N>>>>>Проблема такова. Я сделал что-то подобное с помощью тэга <LI> только неполучается его вывести в свернутом виде. Вот и все. :super:

JH>>>>Я знаю четыре способа сделать дерево, работающее целиком на клиенте: средствами Static HTML, Dynamic HTML, ActiveX и Java applet. Скажи адрес почты — вышлю работающие примеры.

F>>>А лучше не на почту, а в раздел "Q&A", или "Файлы", например. Тогда и другим пригодится...

JH>>Блин, граждане, а как мне файлы-то приаттачить к сообщению? Или, может быть, ссылку какую ткнуть? Просветите меня, неученого, я в RSDN недавно...

JH>Примеры выслал на submit@rsdn.ru




Здравствуйте спасибо что ответили на мой вопрос. Но я так и ненашел ваши приверы. Если возможно немогли бы вы выслать их мне на емайл, вот мой адресс.
anodir@netdec.uz
Заранее благодарен.
Re[2]: Как сделать дерево
От: &reY Украина http://www.livejournal.com/~1000turov/
Дата: 30.07.02 06:08
Оценка:
Здравствуйте John_Headlong, Вы писали:

JH>Я знаю четыре способа сделать дерево, работающее целиком на клиенте: средствами Static HTML, Dynamic HTML, ActiveX и Java applet. Скажи адрес почты — вышлю работающие примеры.

не мог бы ты прислать эти примеры и мне по адресу
ray@ics.ua
Re: Как сделать дерево
От: VVS  
Дата: 01.08.02 13:37
Оценка:
Здравствуйте Nico, Вы писали:

N>Проблема такова. Я сделал что-то подобное с помощью тэга <LI> только неполучается его вывести в свернутом виде. Вот и все.

Как раз этим я и занимаюсь вот код надо правдо его чуть оптимизировать.

Файл tree.js


var arrTree,pos=1;
document.write("<link rel='StyleSheet' type='text/css' href='tree.css'>");
function AddItem(str){
  var item=str.split("@");
  if(item[0]!=0){
    document.write("<LI class='cLi'><img onclick='OnExpand(this)' src='plus.bmp'></img><nobr><span class='cSoff' onmouseover='SpOn(this,1)' onmouseout='SpOn(this,0)' onclick='OnClick(this)' id='"+item[2]+"'>"+item[1]+"</span></nobr></LI>");
    document.write("<UL style='display: none' class='cUl'>");
    for(var i=0;i<item[0];i++){
      pos++;
      AddItem(arrTree[pos]);
    }
    document.write("</UL>");
  }
  else{
    document.write("<LI class='cLi'><img style='width: 9px; height: 9px; background: transparent'><nobr><span class='cSoff' onmouseover='SpOn(this,1)' onmouseout='SpOn(this,0)' onclick='OnClick(this)' id='"+item[2]+"'>"+item[1]+"</span></nobr></LI>");
  } 
}
function ConstructTree(sTree){
  arrTree=sTree.split("#");
  document.write("<UL style='margin: -5px'>");
  for(pos=1;pos<arrTree.length;pos++){
    AddItem(arrTree[pos]);
  }
  document.write("</UL>");
}
function OnExpand(t){
  var r=t.parentElement.lastChild
  if(r.style.display!="none"){
      t.src="plus.bmp"
      r.style.display="none";
  }
  else{ 
      t.src="minus.bmp"
      r.style.display="";
  } 
}
function OnClick(t){
   try{
     OnTree(t.id);
   }
   catch(r){}
}
function SpOn(t,b){
  if(b) t.className="cSon";
  else t.className="cSoff";
}


Файл tree.css

@charset "windows-1251";

.cLi {list-style: none;cursor: default;}
.cSon {color: #000000}
.cSoff {color: gray}
.cUl {margin-left: 20px; }


использование:

  <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>TREE</title>
</head>
<body style="margin-left: 10px" style="background: #E6E6E6">
<script language=JScript src='tree.js'></script>
<script language=JScript>
 var sTree=
  "#3@ <img src='images/ппп.gif' width='16' height='16' alt='' border='0' align='absbottom'> Пример&nbsp;1  @1"+
    "#0@ Пример&nbsp;1-1  @2"+
    "#2@ Пример&nbsp;1-2  @3"+
      "#2@ Пример&nbsp;1-2-1 @4"+
        "#0@ Пример&nbsp;1-2-1-1 @4"+
        "#0@ Пример&nbsp;1-2-1-2 @4"+
      "#0@ Пример&nbsp;1-2-2 @5"+
    "#0@ Пример&nbsp;1-3 @6"+
 "#0@ Пример&nbsp;2 @7"+
 "#0@ Пример&nbsp;3 @8";
  
ConstructTree(sTree);
function OnTree(id){
   alert(id);   
 }
</script>
</body>
</html>


если ни чего не забыл мож прям вставлять и будер работать
Принцип такой :
1)каждая строчка отделяется символом #
2)служебные параметры внутри строчки разделяются @
3)1 параметр -скоко детей(каждый ребенок может тоже иметь детей)
4)2 параметр строка
5)3 параметр идентификатор который вернется в функцию OnTree(id)(ты ее должен обязательно реализовать)

Удачи!!!
Re[3]: Как сделать дерево
От: RoloTomasi Смерть хохлопидарам.
Дата: 23.12.06 15:35
Оценка:
Здравствуйте, &reY, Вы писали:

А можно посмотреть примеры.
Смерть хохлопидарам!
Re[4]: Как сделать дерево
От: Odi$$ey Россия http://malgarr.blogspot.com/
Дата: 24.12.06 07:09
Оценка:
Здравствуйте, John_Headlong, Вы писали:

J_H>Блин, граждане, а как мне файлы-то приаттачить к сообщению?

Модерирование своих сообщений и загрузка файлов на rsdn
... << RSDN@Home 1.2.0 alpha rev. 669>>
Re[2]: Как сделать дерево
От: Laurel  
Дата: 24.12.06 15:41
Оценка:
Здравствуйте, John_Headlong, Вы писали:

J_H>Я знаю четыре способа сделать дерево, работающее целиком на клиенте: средствами Static HTML, Dynamic HTML, ActiveX и Java applet. Скажи адрес почты — вышлю работающие примеры.

А как же WPF (WPF/E)?
Re[3]: Как сделать дерево
От: swerg2  
Дата: 27.12.06 08:34
Оценка:
Привет Всем,

А исходники где-то можно посмотреть?

P.S. Интересно тест 10000 он выдерживает...
Каждый ламер мечтает стать хакером ;-))
Re: Как сделать дерево
От: pattern Россия www.gho.ru
Дата: 29.12.06 09:53
Оценка:
Здравствуйте, Nico, Вы писали:

N>Проблема такова. Я сделал что-то подобное с помощью тэга <LI> только неполучается его вывести в свернутом виде. Вот и все.

Я всегда использую более простой способ. При генерации php-страницы я вывожу полное дерево в том виде, в котором оно должно быть при полном открытии. Каждой ветке выделяется отдельный слой (div). Сгенерировать такое дерево как 2 пальца об асфальт, главное не ограничивать себя в фантазиях. Вот примерно как должен быть выведен html-исходник.

<div><a href="#" onClick="showHideLayers('id_1')"><img src="plus.gif" /></a>Ветка 1</div>
  <div class="thread" id="id_1" style="display=none;">
    <div>Пункт 1.1</div>
    <div>Пункт 1.2</div>
  </div>
<div><a href="#" onClick="showHideLayers('id_2')"><img src="plus.gif" /></a>Ветка 2</div>
  <div class="thread" id="id_2">
    <div><a href="#" onClick="showHideLayers('id_21')"><img src="plus.gif" /></a>Ветка 2.1
      <div class="thread" id="id_21">
        <div>Пункт 2.1.1</div>
        <div>Пункт 2.1.2</div>
        <div>Пункт 2.1.3</div>
      </div>
    </div>
    <div><a href="#" onClick="showHideLayers('id_22')"><img src="plus.gif" /></a>Ветка 2.2
      <div class="thread" id="id_22" style="display=none;">
        <div>Пункт 2.2.1</div>
        <div>Пункт 2.2.2</div>
        <div>Пункт 2.2.3</div>
      </div>
    </div>
  </div>
<div><a href="#" onClick="showHideLayers('id_3')"><img src="plus.gif" /></a>Ветка 3</div>
  <div class="thread" id="id_3" style="display=none;">
    <div>Пункт 3.1</div>
    <div>Пункт 3.2</div>
  </div>
</div>


Чтобы не использовать всякие пункты (ul, ol, li), а потом в css-ах править где какой пункт показывать, а где не показывать, я использую css-класс thread, который содержит в себе следующее:

.thread
{
  width: 95%;
  float: right;
  text-align: left;
}


Таким образом, с помощью width можно регулировать глубину отступа от левого края дерева. В итоге дерево получается на подобии вида дерева Explorer'а.
В зависимости от того, какую ветку выбрал пользователь, этот слой устанавливается через css в положение visible, остальные hide. В привидённом выше примере открыта Ветка 2 с подветкой 2.1, остальные все скрыты. Ну а в конечном сгенерированном html-коде начинает уже работать JavaScript:

function findObj(theObj, theDoc)
{
  var p, i, foundObj;
  if(!theDoc) theDoc = document;
  if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
  {
    theDoc = parent.frames[theObj.substring(p+1)].document;
    theObj = theObj.substring(0,p);
  }
  if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
  for (i=0; !foundObj && i < theDoc.forms.length; i++)
    foundObj = theDoc.forms[i][theObj];
  for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
    foundObj = findObj(theObj,theDoc.layers[i].document);
  if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
  return foundObj;
}

function showHideLayers()
{
  var i,l_obj,visStr,obj=showHideLayers.arguments;
  for(i=0;i<(obj.length);i++)
  {
    if((l_obj=findObj(obj[i]))!=null)
    {
      if(l_obj.style)
      {
        l_obj=l_obj.style;
        if(l_obj.display=='none') visStr='';
        else if(l_obj.display=='') visStr='none';
      }
      l_obj.display=visStr;
    }
  }
}


Таким образом нажимая на gif-"плюсик" ветки 1 скрывается или открывается слой с id="id_1" и т.д. Каждый пункт и ветку можно залинковать на нужную страницу или так же на открытие любой ветки. Однако это не полный код. Требуется учесть, чтобы браузер "помнил", какие ветки были открыты пользователем, а какие скрыты при переходе со страницы на страницу. Однако это вариации на тему php о сохранении настроек пользователя и объяснять я их не буду, ибо вариантов масса.
Так же можно ещё добавить JavaScript смены картинки plus.gif на minus.gif, но это уже выходит за рамки данного объяснения.
Замечание по приведённому коду только одно: работает он во всех браузерах, которые мне попадались во время тестирования, умеющие работать с JavaScript. Однако такие браузеры как Opera и Firefox при начальной загрузке не отрабатывают скрытие слоя и потому всё дерево выводится открытым, что даёт небольшой дискомфорт при больших разветвлениях (во всяком случае так было, последние версии не тестировал).
Удачи!
---
Your bunny wrote: its not a bug, this is a feature, actually... ;)
Re[2]: Как сделать дерево
От: hq Россия  
Дата: 29.12.06 11:03
Оценка:
Здравствуйте, pattern, Вы писали:

P>Я всегда использую более простой способ. При генерации php-страницы я вывожу полное дерево в том виде, в котором оно должно быть при полном открытии. Каждой ветке выделяется отдельный слой (div). ...

Тоже всегда пользовался именно этим способом.

P>[skipped]
P>Замечание по приведённому коду только одно: работает он во всех браузерах, которые мне попадались во время тестирования, умеющие работать с JavaScript. Однако такие браузеры как Opera и Firefox при начальной загрузке не отрабатывают скрытие слоя и потому всё дерево выводится открытым, что даёт небольшой дискомфорт при больших разветвлениях (во всяком случае так было, последние версии не тестировал).
P>Удачи!

Ставишь скрипт на загрузку страницы (что-то типа <body onload = "init ()">) и в init() делаешь для всех элементов что-то типа


document.getElementById (IdOfElement).style.display = "none";
Re[3]: Как сделать дерево
От: pattern Россия www.gho.ru
Дата: 30.12.06 13:44
Оценка:
Здравствуйте, hq, Вы писали:

hq>Ставишь скрипт на загрузку страницы (что-то типа <body onload = "init ()">) и в init() делаешь для всех элементов что-то типа
hq>document.getElementById (IdOfElement).style.display = "none";
Интересный момент. Надо будет попробовать. Просто я не совсем понимаю, если во время показа страницы какой то слой определён как hide:
<div class="thread" id="id_3" style="display=none;">

то и браузер должен понимать, что он должен быть скрытым. Просто на тот момент я сильно не заморачивался данным вопросом и оставил так как есть. Ну а кому требуется модифинг кода, дык на здоровье
---
Your bunny wrote: its not a bug, this is a feature, actually... ;)
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.