var TreeMenu= {
TMroot: [['Строительство домов', 'TreeMenu.TMsub0'],
['Ремонт квартир', 'TreeMenu.TMsub1'],
['Ремонт машин', 'null', ''],
['Ремонт бытовой техники', 'null', ''],
['Ремонт электронники', 'null', ''],
['IT и интернет', 'TreeMenu.TMsub2']],
TMsub0: [['Плотник', 'TreeMenu.TMsub00', ''],
['Каменщик', 'TreeMenu.TMsub01', ''],
['Земельные работы', 'TreeMenu.TMsub02', '']],
TMsub00: [['master 0', 'null', '0']],
TMsub01: [['master 1', 'null', '1'],
['master 2', 'null', '2']],
TMsub02: [['master 3', 'null', '3'],
['master 4', 'null', '3'],
['master 5', 'null', '3']],
TMsub1: [['Сантехник', 'TreeMenu.TMsub10'],
['Отделочные работы', 'TreeMenu.TMsub11']],
TMsub10: [['master 6', 'null', '3']],
TMsub11: [['master 7', 'null', '3'],
['master 8', 'null', '3']],
TMsub2: [['Разработка сайтов', 'TreeMenu.TMsub20']],
TMsub20: [['Ученик Мастера Фу', 'null', '3']],
TMmaster: [[0, 54, 'Иван Иванович Иванов', 'длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека'],
[1, 51, 'Петрович', 'описанме Петровича длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека'],
[2, 51, 'Ух-бригада', 'описанме ух-бригады длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека'],
[3, 51, 'Пустышка', 'задолбался я все это писать... длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека']],
TMdiv: null,
TMdivTitle: null,
TMdepth: 0 };
TreeMenu.squeeze= function(){
var i= 0, j, elements= [];
for(; i< TreeMenu.TMdiv.childNodes.length; i++)
if(TreeMenu.TMdiv.childNodes[i].tagName== 'SPAN'){
elements= TreeMenu.TMdiv.childNodes[i].getElementsByTagName('SPAN');
for(j= 0; j< elements.length; j++)
elements[j].style.display= 'none';
}
elements= [];
return
}
TreeMenu.prinKey= function(){
var tbl_tag= document.createElement("TABLE"), row, cell, i= 0,
button1, button2;
const COL= 3;
tbl_tag.className= 'Title'
row= tbl_tag.insertRow(-1);
for(;i< COL; i++)
cell= row.insertCell(-1);
row= tbl_tag.insertRow(-1);
cell= row.insertCell(-1);
cell= row.insertCell(-1);
button1= document.createElement('BUTTON');
button1.innerHTML= 'свернуть всё';
button1.onclick= TreeMenu.squeeze;
cell.appendChild(button1);
button1= document.createElement('BUTTON');
button1.innerHTML= 'по рейтенгу';
cell.appendChild(button1);
button1= document.createElement('BUTTON');
button1.innerHTML= 'по алфавиту';
cell.appendChild(button1);
cell= row.insertCell(-1);
row= tbl_tag.insertRow(-1);
for(i= 0; i< COL; i++)
cell= row.insertCell(-1);
TreeMenu.TMdivTitle.appendChild(tbl_tag);
return
}
TreeMenu.init= function(id_name_main, id_name_title){
TreeMenu.TMdiv= document.getElementById(id_name_main);
TreeMenu.TMdivTitle= document.getElementById(id_name_title);
TreeMenu.prinKey();
return
}
TreeMenu.printItem= function(master_id){
const ID= 0, SCR= 1, SHRT= 2, LNG= 3;
for(var i= 0; i< TreeMenu.TMmaster.length; i++)
if(TreeMenu.TMmaster[i][ID]== master_id){
master= TreeMenu.TMmaster[i];
break;
}
MainBlock.print(master[SHRT], master[LNG]);
return
}
TreeMenu.showItem= function(ev){
var i= 0, span_s= [];
ev.stopPropagation? ev.stopPropagation(): ev.cancelBubble= true;
for(; i< this.childNodes.length; i++)
if(this.childNodes[i].tagName== 'SPAN')
span_s.push(this.childNodes[i]);
if(span_s.length)
for(i= 0; i< span_s.length; i++)
if(span_s[i].style.display== 'none')
span_s[i].style.display= 'block';
else
span_s[i].style.display= 'none';
else
if(this.id)
TreeMenu.printItem(this.id);
else
alert('нет подкатегорий');
span_s= [];
return
}
TreeMenu.print= function(){
const ITEM= 0, NXT= 1, MST= 2;
function print_span(str, parent){
var span_tag= document.createElement('SPAN'),
prgf_tag= document.createElement('P'), i= 0;
prgf_tag.innerHTML= str;
prgf_tag.className= 'TMitem';
span_tag.appendChild(prgf_tag)
span_tag.onclick= TreeMenu.showItem;
span_tag.className= 'TMlevel'+ TreeMenu.TMdepth;
if(TreeMenu.TMdepth)
span_tag.style.display= 'none';
parent.appendChild(span_tag);
return span_tag
}
function print_item(item, parent){
var link_nxt= eval(item[NXT])
parent= print_span(item[ITEM], parent);
if(link_nxt){
TreeMenu.TMdepth++;
start_print_item(link_nxt, parent);
TreeMenu.TMdepth--;
}else
parent.id= item[MST];
return
}
function start_print_item(item, parent){
for(var i= 0; i< item.length; i++)
print_item(item[i], parent);
return
}
start_print_item(TreeMenu.TMroot, TreeMenu.TMdiv);
TreeMenu.TMdepth= 0;
return
}
TreeMenu.init('TMmenuDivMain', 'TMmenuDivTitle');
TreeMenu.print();
сами стили примерно такие:
.TMlevel0 { cursor: pointer;
display: block }
.TMlevel1 { padding-left: 5%;
display: block}
.TMlevel2 { padding-left: 15%;
display: block}
добавление глубины вложенности сводится к дорисовке стилей TMlevel3, 4, 5 ....... и у последнего элемента будет не null а имя дочернего массива, у самого "глубокого" элемента конечно же должен быть нуль
