<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="testr" />
<title>Untitled 2</title>
<style>
/* контейнер просто содержит узлы.
Узел сам будет отвечать за свой отступ */
.Container {
padding: 0;
margin: 0;
}
.Container li {
list-style-type: none; /* убрать кружочки/точечки */
}
/* узел отодвинут от левой стенки контейнера на 18px
благодаря этим отступам вложенные узлы формируют иерархию
*/
.Node {
margin-left: 18px;
zoom: 1; /* спецсвойство против багов IE6,7. Ставит hasLayout */
}
/* Корневой узел от родительского контейнера не отодвинут.
Ему же не надо демонстрировать отступом, чей он сын.
Это правило идет после .Node, поэтому имеет более высокий приоритет
Так что class="Node IsRoot" дает margin-left:0
*/
.IsRoot {
margin-left: 0;
}
/* иконка скрытого/раскрытого поддерева или листа
сами иконки идут дальше, здесь общие свойства
*/
.Expand {
width: 18px;
height: 18px;
/* принцип двухколоночной верстки. */
/* float:left и width дива Expand + margin-left дива Content */
float: left;
}
/* содержание (заголовок) узла */
.Content {
/* чтобы не налезать на Expand */
margin-left:18px;
/* высота заголовка - как минимум равна Expand
Т.е правая колонка всегда выше или равна левой.
Иначе нижний float будет пытаться разместиться на получившейся ступеньке
*/
min-height: 18px;
}
/* все правила после * html выполняет только IE6 */
* html .Content {
height: 18px; /* аналог min-height для IE6 */
}
/* открытое поддерево */
.ExpandOpen .Expand {
background-image: url(minus.gif);
}
/* закрытое поддерево */
.ExpandClosed .Expand {
background-image:url(plus.gif);
}
/* лист */
.ExpandLeaf .Expand {
background-image: url(file:///C|/Users/Skoretskiy/Desktop/leaf.gif);
}
.Node {
margin-left: 18px;
zoom: 1;
/* линия слева образуется повторяющимся фоновым рисунком */
background-image : url(file:///C|/Users/Skoretskiy/Desktop/i.gif);
background-position : top left;
background-repeat : repeat-y;
}
/* это правило - ниже .Node, поэтому имеет больший приоритет */
.IsLast {
/* добавить соединительную черточку наверх */
background-image: url(file:///C|/Users/Skoretskiy/Desktop/i_hulf.gif);
background-repeat : no-repeat;
}
.ExpandOpen .Container {
display: block;
}
.ExpandClosed .Container {
display: none;
}
.ExpandOpen .Expand, .ExpandClosed .Expand {
cursor: pointer; /* иконки скрытия-раскрытия */
}
.ExpandLeaf .Expand {
cursor: auto; /* листовой узел */
}
</style>
</head>
<body>
<div onclick="tree_toggle(arguments[0])">
<div>Make a choice</div>
<ul class="Container">
<li class="Node IsRoot ExpandClosed">
<div class="Expand"></div>
<div class="Content">
<form action="mail.php" method="post">
<select name=color>
<option></option></option>
<option value=1>Товар</option>
<option value=2>Договор</option>
<option value=3 >Клиент</option>
</select>
<input type=submit value="Выбрать">
</form>
</div>
<ul class="Container">
<li class="Node ExpandClosed">
<div class="Expand"></div>
<div class="Content"><select name=color>
<option></option></option>
<option value=1>Товар</option>
<option value=2>Договор</option>
<option value=3 >Клиент</option>
</select></div>
<ul class="Container">
<li class="Node ExpandClosed">
<div class="Expand"></div>
<div class="Content">Item 1.1</div>
<ul class="Container">
<li class="Node ExpandLeaf IsLast">
<div class="Expand"></div>
<div class="Content">Item 1.1.2</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
function tree_toggle(event) {
event = event || window.event
var clickedElem = event.target || event.srcElement
if (!hasClass(clickedElem, 'Expand')) {
return // клик не там
}
// Node, на который кликнули
var node = clickedElem.parentNode
if (hasClass(node, 'ExpandLeaf')) {
return // клик на листе
}
// определить новый класс для узла
var newClass = hasClass(node, 'ExpandOpen') ? 'ExpandClosed' : 'ExpandOpen'
// заменить текущий класс на newClass
// регексп находит отдельно стоящий open|close и меняет на newClass
var re = /(^|\s)(ExpandOpen|ExpandClosed)(\s|$)/
node.className = node.className.replace(re, '$1'+newClass+'$3')
}
function hasClass(elem, className) {
return new RegExp("(^|\\s)"+className+"(\\s|$)").test(elem.className)
}
</script>