javascript结合DOM创建菜单（纯处源创）(页 1) - JavaScript论坛

ming206 发表于 2008-2-25 11:59

javascript结合DOM创建菜单（纯处源创）

废话我就不多说了。
代码直接贴，另保存为HTML就可以直接运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="jscript">
var offsetEl;
var myTable;
var myTableBody;
var dataDiv;
/*
*初始化全部变量，读取HTML元素
*/
function initVars(){
dataDiv=document.getElementById("popup");
   var table=document.createElement("table");
var tbody=document.createElement("tbody");
table.setAttribute("id","myTable");
table.setAttribute("bgColor","#FFFAFA");
table.setAttribute("border","0");
table.setAttribute("cellSpacing","2");
table.setAttribute("cellPadding","2");
tbody.setAttribute("id","myTableBody");
table.appendChild(tbody);
dataDiv.appendChild(table);
myTable=document.getElementById("myTable");
myTableBody=document.getElementById("myTableBody");
}
/*
*获取内容
*/
function getCoursetData(em)
{
initVars();
offsetEl=em;
callBack();
}
/*
*AJAX的服务器内容返回时处理函数（如果使用AJAX时）
*/
function callBack()
{
setData();
}
/*
* 设置页面的内容
*/
function setData()
{
var row;
//假设这里是加载一个新的子菜单
var linkText=[
               "<a href='#'>子链接1</a>",
   "<a href='#'>子链接2</a>",
   "<a href='#'>子链接3</a>",
   "<a href='#'>子链接4</a>",
   "<a href='#'>子链接5</a>"
   ];
clearData();
setOffsets();
for(var i=0;i<linkText.length;i++){
      row=createRow(linkText[i]);
row.setAttribute("height","20");
myTableBody.appendChild(row);
}
}
/*
* DOM技术动态创建表的行
*/
function createRow(data)
{
var row,cell,textNode;
row = document.createElement("tr");
cell = document.createElement("td");
cell.setAttribute("bgcolor","#E8E8E8");
cell.setAttribute("border","0");
cell.innerHTML=data;
row.appendChild(cell);
return row;
}
/*
* 清除表的行
*/
function clearData()
{
var ind=myTableBody.childNodes.length;
for(var i=ind-1;i>=0 ; i--)
{
   myTableBody.removeChild(myTableBody.childNodes[i]);
}
dataDiv.style.border="none";
dataDiv.style.display="none";
}
/*
* 设置提示框的位置
*/
function setOffsets()
{
var end = offsetEl.offsetWidth;
setbgColor();
offsetEl.bgColor="#FFFAFA";
var top = calculteOffsetTop(offsetEl);
dataDiv.style.border="#999999 1px solid";
dataDiv.style.left=end+11+"px";
dataDiv.style.top=top-1+"px";
dataDiv.style.display="";
}
/*
* 设置内容
*/
function calculteOffsetTop(field)
{
return calculteOffset(field,"offsetTop");
}
/*
* 具体设置
*/
function calculteOffset(field,attr)
{
var offset = 0;
while(field) {
      offset+=field[attr];
field=field.offsetParent;
}
return offset;
}
/*
*设置背景颜色
*/
function setbgColor()
{
//取得节点dataLists下的tbody
var dlist=document.getElementById("dataLists").firstChild;
var mytr=dlist.childNodes;
for(var i=0;i< mytr.length;i++)
{
      //将所有背景设置为#E8E8E8的颜色值
mytr[i].firstChild.bgColor="#E8E8E8";
}
}
/*
* 表格的创建
*/
function creataTables(objID)
{
var div=document.getElementById(objID);
var table=document.createElement("table");
var tbody=document.createElement("tbody");
//假设创建的几个菜单
var tdText=[
            "中国联通",
   "中国电信",
   "中国移动",
   "中国网通",
   "重庆分公司",
   "广西河池市",
   "成都游戏公司",
   "传奇世界",
   "超级解霸",
   "超级兔子"
   ];
var N=tdText.length;
for(var i=0;i<N;i++)
{
   var tr=document.createElement("tr");
   var td=document.createElement("td");
   td.setAttribute("id",i);
   td.setAttribute("align","center");
   td.setAttribute("bgColor","#E8E8E8");
   td.innerHTML="<a href='#'>"+tdText[i]+"</a>";
   td.onmouseover=function(){getCoursetData(this)};
   tr.appendChild(td);
   tr.setAttribute("height","25");
   tbody.appendChild(tr);
}
table.setAttribute("border","0");
table.setAttribute("id","dataLists");
table.setAttribute("width","120");
table.setAttribute("cellPadding","0"); //注意P是大写的
table.setAttribute("cellSpacing","1"); //注意S是大写的
table.setAttribute("bgColor","#999999"); //注意C是大写的
table.appendChild(tbody);
div.appendChild(table);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>菜单创建</title>
</head>
<body onload="creataTables('mYdd');">
<div id="mYdd"/>
<div style="position:absolute;display:none;" id="popup"/>
</body>
</html>

渚薰发表于 2008-2-26 08:59

第一鼓励下
第二批评下（重点）
你说的原创有何意义？？？如果说是要提供原创的api代码，但是接口呢？？？整个代码所有关键的属性全部写死，没有任何可以复用的余地。
然后如果说是想交流，但是对于关键的dom操作，并没有加详细的说明来指导初学者。我只能说，lz必须更加努力的学习js和dom。

lmhllr 发表于 2008-2-26 15:11

佩服渚薰的耐性

没有说明的长代码我读不下去....

ming206 发表于 2008-3-6 09:37

死写属性已经是最简单的了，如果全部以参数的方式传递进来，这个估计根本不是这样写了。可能要构造一个强大的类了，2楼批评得很好，我是没有写成更灵活的属性自定义设置，但是这是什么？这是最最基本的操作方法。所以我写成死的，以便让人一看就知道。如果是参数，看到参数还往上一步找，估计会让人觉得更头大。
有关复用问题，我想说明一下，这个小小的例子的供大家参考的。可以通过这个例子引申很多东西。所以没必要做得非常全面。

ming206 发表于 2008-3-6 09:39

我最讨厌就是从头说：什么是DOM，DOM的含义。我没必要介绍，有关DOM的文章太多了，baidu.com以下就多少编。。。。。。
如果理解点DOM的人，一看就知道是什么意思了，所以代码的注解我没写什么。

页: [1]