менюшка

 
0
 
JavaScript
ava
Fearless | 14.10.2004, 13:44
Здраствуйте ......
хотелось бы вашего совета .....
есть задача сделать меню такого типа
HTML
<div class="coren" id="osnov" >
<div class="cor0" id="parent0_0_0" >
<form name="form1">
<input type="button" name="button1" value=" ... " onclick="...">
</form>

<div class="cor1" id="parent0_1_0">
<form name="form2">
<input type="button" name="button2" value=" ... " onclick="...">
</form>
<div class="cor2" id="parent0_1_1"> <form .... >
</div>

<div class="cor2" id="parent0_1_2"> <form .....>
</div>
</div>

<div class="cor1" id="parent0_2_0" > <form .... >

<div class="cor2" id="parent0_2_1"><form .... >
</div>

<div class="cor2" id="parent0_2_2"> <form .... >
</div>
</div>

</div>
<div class="cor0" id="parent1_0_0" >
............
</div>

<div class="cor0" id="parent2_0_0" >
............
</div>


</div>


в принципе с созданием сомого меню всё понятно с такой структурой я его сделал .....
но сталкнулся с другой проблемой нужно сделать меню любой вложенности чтобы создать его по такой структуре надо делать огромное количество изменений....

очень хочется чтобы была предложена лёгкя структура именования <div>... чтобы допустим с помощью какой нить такой функции
function build_div (name , styl , f, action , b , v) {
s="<div id='"+ name +"' class='" + styl +"' >" +
"<form name='form"+f+"' action='" + action + "' >" +
"<input type='button' name='button"+b+"' value='"+v+"' onclick=''>" +
"</form></div>";
return s;
}


можно былобы легко пробежаться по дереву
да и очень хочется иметь именно вложенную структуру именно div а не table

я как то видел меню состоящее из 2-х файлов в одном код в другом меню причём
меню было составлено таким образом ...
koren =fun("koren", "http://.... ")

aux1 = fun_node(koren , fun_nodes("name" , "" ....))
aux2 = fun_node(aux1 , fun_nodes("name" , "" ....))
aux3 = fun_node(aux2 , fun_nodes("name" , "" ....))
// а конечныt элементs
end_node(aux3 , fun_nodes("name" , "" ....))
end_node(aux3 , fun_nodes("name" , "" ....))
end_node(aux3 , fun_nodes("name" , "" ....))

// а потом заново создаются корневые элементы
aux1 = fun_node(koren , fun_nodes("name" , "" ....))
aux2 = fun_node(aux1 , fun_nodes("name" , "" ....))
aux3 = fun_node(aux2 , fun_nodes("name" , "" ....))
// а конечныt элементs
end_node(aux3 , fun_nodes("name" , "" ....))
end_node(aux3 , fun_nodes("name" , "" ....))
end_node(aux3 , fun_nodes("name" , "" ....))

соответственно здесь можно расширять меню сколько угодно и куда угодно просто дописывая узлы
я не понял как так можно использовать элементы с одним именем
Comments (9)
ava
Sardar | 14.10.2004, 23:23 #
Можно так сделать:
<body>
<textarea cols=90 rows=20 id="test"></textarea><br>
<script language="Javascript" type="text/javascript">
<!--
function Menu(clssName,level) { //собственно наше меню
this.childMenus=[]; //все дочерние меню
this.level=level? level: 0; //нашь уровень вложености
this.form=document.createElement("FORM"); //содержимое, может ты туда не только форму положишь...
this.div=document.createElement("DIV"); //платформа меню
this.div.className=clssName;
this.div.appendChild(this.form)

this.createChildMenu=function() { //создать дочернее меню
var mn=new Menu("cor"+(this.level+1), this.level+1);
this.childMenus.push(mn);
this.div.appendChild(mn.div);
return mn;
}
this.createOption=function(bname, bval) { //создать опциюй, в даном случае элемент button
var inp = document.createElement("INPUT");
inp.type="button";
inp.onclick=button_click;
inp.name=bname;
inp.value=bval;
this.form.appendChild(inp);
return this;
}
}
function button_click() { //обработчик onclik, а вообще тутможно сделать и красивее....
alert(this.value);
}

//набиваем меню
root=new Menu("coren");
mn=root.createChildMenu().createOption("button1","blabla");

mn2=mn.createChildMenu();
mn2.createOption("button2","blabla");
mn2.createChildMenu().createOption("button3","blabal");
mn2.createChildMenu().createOption("button4","blabal");

mn2=mn.createChildMenu();
mn2.createOption("button2","blabla");
mn2.createChildMenu().createOption("button3","blabal");
mn2.createChildMenu().createOption("button4","blabal");

document.body.appendChild(root.div);
document.getElementById("test").value=root.div.innerHTML;
//-->
</script>

</body>

Ты не сказал, что точно должно быть в меню, сделал на спех как логичнее.
ava
Fearless | 15.10.2004, 06:46 #
меню будет сделано так что в каждом div будет находиться по одному button'у а конечный узел это список элементов который будет передоваться из базы ......
ava
Sardar | 15.10.2004, 10:57 #
Что то не очень красиво...
Расскажи что конкретно делаешь, я думал что то подобное каскадному меню.
В любом случаеь в моем коде выше ты можешь создавать 0-N кнопок в слое, 1 лежит в этом диапазоне ;-)

Идентификаторы я не выставлял, т.к. все элементы нам доступны из дерева: root.childMenus[N].childMenus[N].(form|div|что угодно)
Но можно назначить Id если нужно(что я считаю менее красивым smile ), например: menu(_parentLevel)*_thisLevel
Тогда: levels=div.getAttribute("ID").split("_").slice(1);
Где levels[0...levels.length-2] - предки, levels.top() - порядковый номер менюшки.
ava
Fearless | 18.10.2004, 11:16 #
большое спасибо Sardar действительно класную идею подкинул осталось только понять почему в твоём коде не работает одна строчка this.childMenus.push(mn); почемуто не добовляет ....
ava
Sardar | 18.10.2004, 21:01 #
Скорее всего ты смотришь под ИЕ5.0, этот убогий бразуер не поддерживает базовых операций над массивами. Попробуй так:

this.childMenus[this.childMenus.length]=mn;
//а вобще можно пофиксить такую досадную оплошность:
if(!Array.prototype.push) {
Array.prototype.push=function() {
for(var i=0; i<arguments.length; i++) this[this.length]=arguments[i];
//от стандартного поведения отходить не стоит
return arguments.length>0? this[this.length-1]: null;
};
}

Так ты можешь реализовать все необходимые тебе функции: slice, splice, pop, top...
ava
Fearless | 29.10.2004, 15:09 #
ещё раз спасибо Sandar за помощь ... я подумал что многие создают свои менюшки ... и соответственно многим интересны конечно же примеры ...... поэтому я решил выложить и то что получилось у меня с твоей помощью .... немного я изменил я подумал что не стоит передовать в каждом div'е новый action пусть будет 1 с параметром .... массив fuk у меня создаётся динемически с помощью jsp .... берётся из DB2 .... здесь есть конечно куски которые мне очень не нравяться но пока в падлу исправлять .. никакой совместимосьти браузеров я особо не старался делать но скажу что единственный глюк я встретил только в линуксе и то только не поддерживалась назначенная ширина кнопки ... соответственно главная прелесть этого меню что создаётся оно динамически любой глубины и сложности просто добавляя новые элементы в массив


<html>
<head>

<style>
.coren {border-style:dashed; border-width:1; margin-left:40; width:500; visibility:visible; overflow:visible; }

.cor1 {margin-left:0; }
.cor2 {margin-left:50; }
.cor3 {margin-left:50; }
.cor4 {margin-left:50; }
.cor5 {margin-left:50; }
.cor6 {margin-left:50; }
</style>
</head>

<body onload="nachal_poloz();">

<script language="Javascript" type="text/javascript">
var mn = [];
div_number=0;

/////////////////////////////

function Menu(clssName,level, namee) {

this.childMenus = []
this.level = level? level: 0;
this.div = document.createElement("DIV");
this.div.className = clssName;
this.div.id = namee;
div_number++;


this.createChildMenu = function() {
var mn = new Menu("cor"+(this.level+1), this.level+1, "div"+div_number );
// this.childMenus.push(mn);
this.div.appendChild(mn.div);
return mn;
}


this.createOption_button = function(bId, bval, bname) {
var inp = document.createElement("INPUT");
inp.type = "submit";
inp.onclick = button_click;
inp.id = bId;
inp.name = bname;
inp.value = bval;
inp.width = 100;
this.div.appendChild(inp);
return this;
}


this.createOption_button_children = function(bname, bval, lev) {
var inp = document.createElement("INPUT");
inp.type = "button";
inp.onclick = button_click_menu;
inp.id = bname;
inp.value = bval;
inp.width = 30;
this.div.appendChild(inp);
return this;
}

}

function button_click() {
alert(this.value);
}

function button_click_menu() {
show_menu(this.id, 0);
}

function show_menu(id, l) {
ch = children(id);
if (id != "0") {
show_menu(fuk[id][1], ch.length+l);
}
ch = children(id);
if (id != "0") {
osnov_style("div" + id, "dotted", 0, 24*(ch.length+l+1), 100*(ch.length+3) +30, "visible", "hidden")
}
for(i=0; i < ch.length; i++) {
osnov_style( "div" + ch[i] , "dotted", 0, 24, 100*(ch.length+1) +30, "visible", "hidden")
}
}


fuk = [];

fuk[1] = []; fuk[1][0] = "Факультет1"; fuk[1][1] = "0";
fuk[2] = []; fuk[2][0] = "Факультет2"; fuk[2][1] = "0";
fuk[3] = []; fuk[3][0] = "Факультет3"; fuk[3][1] = "0";
fuk[4] = []; fuk[4][0] = "КУРС1"; fuk[4][1] = "1";
fuk[5] = []; fuk[5][0] = "КУРС2"; fuk[5][1] = "4";
fuk[6] = []; fuk[6][0] = "КУРС3"; fuk[6][1] = "1";
fuk[7] = []; fuk[7][0] = "КУРС4"; fuk[7][1] = "2";
fuk[8] = []; fuk[8][0] = "КУРС5"; fuk[8][1] = "2";
fuk[9] = []; fuk[9][0] = "группа1"; fuk[9][1] = "4";
fuk[10] = []; fuk[10][0] = "группа2"; fuk[10][1] = "2";
fuk[11] = []; fuk[11][0] = "группа3"; fuk[11][1] = "5";
fuk[12] = []; fuk[12][0] = "группа5"; fuk[12][1] = "4";
fuk[13] = []; fuk[13][0] = "группа6"; fuk[13][1] = "6";
fuk[14] = []; fuk[14][0] = "группа7"; fuk[14][1] = "3";
fuk[15] = []; fuk[15][0] = "группа8"; fuk[15][1] = "10";
fuk[16] = []; fuk[16][0] = "группа9"; fuk[16][1] = "6";
fuk[17] = []; fuk[17][0] = "группа10"; fuk[17][1] = "11";
fuk[18] = []; fuk[18][0] = "группа11"; fuk[18][1] = "7";
fuk[19] = []; fuk[19][0] = "группа12"; fuk[19][1] = "8";
fuk[20] = []; fuk[20][0] = "группа13"; fuk[20][1] = "17";
fuk[21] = []; fuk[21][0] = "группа14"; fuk[21][1] = "5";

root = new Menu("coren");
mn[0]=root;
function derevo () {
for (ii=1; ii< fuk.length; ii++ ) {
if (children(ii).length != 0 ) {
mn[ii] = mn[fuk[ii][1]].createChildMenu().createOption_button("button"+ii , fuk[ii][0], glubina(ii, false)).createOption_button_children( ii , ">>>");
} else {
mn[ii] = mn[fuk[ii][1]].createChildMenu().createOption_button("button"+ii , fuk[ii][0], glubina(ii, false));
}
}

}
derevo();


form = document.createElement("FORM");
form.appendChild(root.div);
document.body.appendChild(form);



function glubina(n, name_n) {
var i=0;
p = n;
while (fuk[p][1] != 0) {
i++;
p = fuk[p][1];
}
if (name_n == true ) {return p} else {return i};
}


function children(n) {
var chil=[];
var j=0;
for(i=1; i<fuk.length; i++){
if (fuk[i][1] == n) {
chil[j] = i; //fuk[i][0];
j++;
}
}
return chil;
}


function nachal_poloz() {
for (i=1; i < fuk.length; i++) {
if ( document.getElementById("div"+ i).className != "cor1") {
osnov_style("div"+i, "dotted", 0, 0, 0, "hidden", "hidden");
} else {
osnov_style("div"+i, "dotted", 0, 24, 130, "visible", "hidden");
}
}
}


function osnov_style(id, bS, bW, h, w, v, o) {
elem = document.getElementById(id).style;

elem.borderStyle = bS;
elem.borderWidth = bW;
elem.visibility = v;
elem.width = w;
elem.height = h;
elem.overflow = o;
}

</script>
</body>
</html>

ava
Alx | 29.10.2004, 21:26 #
а почему подпункты закрывать нельзя?
ava
Fearless | 29.10.2004, 23:41 #
я ето специально оставил ..... просто в моём случае это не нужно это будет происходить после выбора той или иной опции ... но благо кто хочет это сделать .... то сделать это не сложно будет
ava
sergejzr | 29.10.2004, 23:47 #
Fearless Большое спасибо за то, что поделился примером smile
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
  Sardar   Alx   sergejzr   Fearless
advanced
Submit