|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
左手拿着MOTOLOLA右手拿着NOKIA,要多潇洒,有多潇洒,哈哈,终于学会了,但是可能这个时候,又会有人不经意的拍拍肩膀对你说:哥们,别高兴的太早,你还是菜鸟,离学会还差着一大截呢!菜单 <!---
复杂的树形菜单
徐祖宁(絮聒)
2003.03
czjsz_ah@stats.gov.cn
树形菜单较滑动菜单略微庞杂一点。其次要难点在于从简约的数据描写来发生便于把持的html布局。
本例用来展现树形菜单的编写。利用无线表格,算法上采取了递归,实际上可机关无量分制枝的树。
本代码可自在分散。
--->
<style>
table {font-size = 9pt}
td {height = 10px}
</style>
<body>
<span id="menus"></span>
<span id="view"></span>
</body>
<script>
/**
* 机关树,初值为0
*/
function tree(n) {
var id = new Array("bar","pad","#","+");
if(n == 0) { // 初始化变量
n = 1;
i = 0;
s = "";
}
s += "<table>";
for(;i<tree_ar.length-1;i++) {
var k = (n >= tree_ar[i+1][0])?0:1;
s += "<tr id='"+id[k]+"' value="+i+"><td>"+id[k+2]+"</td><td>"+tree_ar[i][1]+"</td></tr>"; // 机关节点,注重这里的自界说属性value。感化是简化机关节点的描写,同享参数数组信息。
if(n > tree_ar[i+1][0]) { // 若希冀条理大于以后条理,停止本条理前往上一条理。
s += "</td></tr></table>";
return tree_ar[i+1][0];
}
if(n < tree_ar[i+1][0]) { // 若希冀条理小于以后条理,递归进入下一条理。
s += "<tr style='display:none' v=1><td></td><td>";
var m = tree(tree_ar[++i][0]);
s += "</td></tr>";
if(m < n) { // 当递归前往值小于以后条理希冀值时,将发生一连的前往举措。
s += "</table>";
return m;
}
}
}
s += "</table>";
return s;
}
</script>
<script for=pad event=onclick>
// 分枝节点的点击呼应
v = this.parentElement.rows[this.rowIndex+1].style;
if(v.display == 'block') {
v.display = 'none';
this.cells[0].innerHTML = "+";
view.innerHTML = ""; // 自行修正为参数数组界说的闭合举措
}else {
v.display = 'block';
this.cells[0].innerHTML = "-";
view.innerHTML = "<b>"+tree_ar[this.value][1]+"</b>"; // 自行修正为参数数组界说的睁开举措
}
/**
* 以下代码用于封闭已睁开的其他分枝
* 如需自行封闭睁开的分枝则从这里直接前往或删去这段代码
*/
if(! tree_ar[this.value].type) // 如该节点为初次进入,则纪录地点条理信息
genTreeInfo(this);
var n = 1*this.value+1;
for(i=n;i<tree_ar.length-1;i++) { // 封闭分列在以后节点以后的树
if(tree_ar[i].type == "pad") {
tree_ar[i].obj2.style.display = 'none';
tree_ar[i].obj1.cells[0].innerHTML = "+";
}
}
while(tree_ar[--n][0] > 1); // 回溯到以后树的出发点
while(--n >= 0) // 封闭分列在以后树的出发点之前的树
if(tree_ar[n].type == "pad") {
tree_ar[n].obj2.style.display = 'none';
tree_ar[n].obj1.cells[0].innerHTML = "+";
}
/** 纪录条理信息,用以简化遍历树时的庞杂的节点描写 **/
function genTreeInfo(o) {
var el = o.parentElement;
for(var i=0;i<el.rows.length;i++) {
if(el.rows[i].id != "") {
tree_ar[el.rows[i].value].type = el.rows[i].id;
}
if(el.rows[i].id == "pad") {
tree_ar[el.rows[i].value].obj1 = el.rows[i];
tree_ar[el.rows[i].value].obj2 = el.rows[i+1];
}
}
}
</script>
<script for=bar event=onclick>
// 无分枝节点的点击呼应
view.innerHTML = "<b>"+tree_ar[this.value][1]+"</b>"; // 自行修正为参数数组界说的点击举措
</script>
<script>
/**
* 根基参数数组,依据详细使用自行扩大
* 数据可较复杂的由办事器端供应
* 列1:节点条理
* 列2:节点题目
* 其他自行扩大
*/
tree_ar = new Array(
new Array(1,"节点1"),
new Array(1,"节点2"),
new Array(2,"节点3"),
new Array(2,"节点4"),
new Array(3,"节点5"),
new Array(4,"节点6"),
new Array(5,"节点7"),
new Array(6,"节点8"),
new Array(7,"节点9"),
new Array(2,"节点10"),
new Array(1,"节点11"),
new Array(2,"节点12"),
new Array(2,"节点13"),
new Array(1,"节点14"),
new Array(1,"") // 为简化终止判别附加的空数据项
);
/*** 创立菜单 ***/
menus.innerHTML =tree(0);
</script>
会HTML吗?会,我能编好几个大表格排板的网页啦! |
|