webmenu编程精彩历程之(一)结构总览和所有原代码

菜单的效果见我的相册里面的作品截屏。

menutest.htm 实际应用测试页面

menudata.xml 菜单配置页面

menu.css 菜单样式表

webmenu.htc 封装后的htc菜单组件

原代码：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

menutest.htm

<html>

<head>

</head>

</body>

</html>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

menudata.xml

<?xml version="1.0" encoding="gb2312"?>

<Root>

</MenuItem>

</MenuItem>

</MenuItem>

</Root>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

menu.css

.WebMenu{

BEHAVIOR: url("WebMenu.htc")

}

.MenuPanel

{

border: 1px solid #002D96;

cursor:hand;

filter:progid:DXImageTransform.Microsoft.Shadow(enabled=true,color=#99CCFF,direction=135,strength=3);

table-layout:fixed;

}

.ItemHightLightDiv

{

border: 1px solid #000080;

background-color: #FFEEC2;

position: absolute;

z-index:6;

height:23px;

left:2px;

cursor:hand;

}

.ItemHighLightTable

{

table-layout:fixed;

width:100%;

height:100%;

cursor:hand;

}

.ItemHL

{ padding-left:6px;

font-size: 10pt;

white-space:nowrap;

}

.ItemNormal

{

padding-left:4px;

height:25px;

font-size: 10pt;

padding-top:2px;

background-color: #F6F6F6;

border-Bottom: 1px solid #F6F6F6;

white-space:nowrap;

}

.ItemNormalLine

{

padding-left:4px;

padding-top:2px;

height:25px;

font-size: 10pt;

background-color: #F6F6F6;

border-Bottom: 1px solid #6A8CCB;

white-space:nowrap;

}

.PicColummLeftHalf

{

padding-left:7px;

height:25px;

width:26px;

afilter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#E3EFFF,endcolorstr=#8EB3E7,gradientType=1);

background-image:url(LeftHalf.gif);

}

.PicColummRightHalf

{

height:25px;

width:26px;

padding-left:5px;

afilter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#8EB3E7,endcolorstr=#88AEE4,gradientType=1);

background-image:url(RightHalf.gif);

}

.PicColummFull

{

padding-left:5px;

height:25px;

width:26px;

afilter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#DDECFE,endcolorstr=#81A9E2,gradientType=1);

background-image:url(FullBG.gif);

}

.DivPanel{

position: relative;

height: 1px;

z-index: 2;

visibility:hidden;

}

.MenubarHLYellow

{

text-align:center;

padding-right:4px;

padding-left:4px;

padding-top: 1px;

padding-bottom: 1px;

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFF4CC,endcolorstr=#FFD79D,gradientType=0);

border: 1px solid #000080;

}

.MenubarHLBlue

{

text-align:center;

padding-right:4px;

padding-left:4px;

padding-top: 1px;

padding-bottom: 1px;

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#E3EFFF,endcolorstr=#98B9E8,gradientType=0);

border: 1px solid #000080;

}

.Menubar{

background-color: #98B9E8;

font-size: 10pt;

height:24px;

width:100%;

cursor:hand;

}

.MenubarNormal{

font-size: 10pt;

white-space:nowrap;

padding-left:4px;

padding-right:4px;

padding-top: 1px;

padding-bottom: 1px;

cursor:hand;

border:1px solid #98B9E8;

}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

webmenu.htc

<PUBLIC:COMPONENT>

<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="fnInit()" />

<PUBLIC:METHOD NAME="showMenu"/>

<PUBLIC:PROPERTY NAME = "DataSource" />

<PUBLIC:PROPERTY NAME = "Width" />

<PUBLIC:PROPERTY NAME = "Effect" />

<PUBLIC:PROPERTY NAME = "MenuType" />

<PUBLIC:PROPERTY NAME = "Container" />

//初始化默认值

function fnInit(){

element.dataSource = eval("window.document.all."+DataSource);

initData = element.dataSource.documentElement;

if(element.MenuType=="1"){

initWindow = window;

initoEle = window.document.body;

window.document.childWin=null;

window.document.attachEvent("oncontextmenu",function(){showMenu(initWindow,initData,initoEle,event.x,event.y)});

}

else{

oMenubar = createMenuBar();

eval("window.document.all."+element.Container+".appendChild(oMenubar)")

}

window.document.attachEvent("onmousedown",function(){

hideMenu(window);

if(!element.Menubar) return;

element.Menubar.isDisplay=false;

oEles = element.Menubar.getElementsByTagName("SPAN");

for(i=0;i<oEles.length;i++){

oEles[i].className="MenubarNormal";

}

});

}

//建立popup窗口,该窗口从属于参数oPopup指向的窗口

function fnCreatePopup(oParentWin){

oNewChildWin = oParentWin.document.parentWindow.createPopup();

oNewChildWin.document.createStyleSheet('Menu.css');

oParentWin.document.childWin = oNewChildWin;

}

//菜单淡入效果,可以在页面上通过Effect属性设置。

function fadeIn(oDiv){

oDiv.style.visibility="hidden";

switch(element.Effect){

case("1")://从左到右展开

strfilter = "progid:DXImageTransform.Microsoft.GradientWipe(duration=0.5,gradientSize=0.75,motion=forward)"

break;

case("2")://粒子效果

strfilter = "progid:DXImageTransform.Microsoft.RevealTrans ( duration=0.5,transition=12 )" ;

break;

case("3")://从上到下

strfilter = "progid:DXImageTransform.Microsoft.GradientWipe ( duration=0.5,gradientSize=0.25,motion=forward,wipeStyle=1)";

break;

case("4")://最普通的淡入

strfilter = "progid:DXImageTransform.Microsoft.Fade()";

break;

default:

strfilter = "progid:DXImageTransform.Microsoft.GradientWipe(duration=0.5,gradientSize=0.75,motion=forward)";

}

oDiv.style.filter = strfilter;

oDiv.filters[0].Apply();

oDiv.style.visibility="visible";

oDiv.filters[0].play(0.2);

}

function showMenu(oCurrWin,NodeData,oEle,x,y){

//当前窗口尚未有子窗口，则新建子窗口，然后创建样式。

if(oCurrWin.document.childWin==null){

fnCreatePopup(oCurrWin);

}

oChildWin = oCurrWin.document.childWin;

//如果当前窗口的子窗口存在

//如果当前将要显示的窗口内容不是之前所显示的窗口内容

//或者将要显示的窗口内容不存在,则重新写入将要显示的窗口菜单内容

if(!oCurrWin.document.body.preShowItem||oCurrWin.document.body.preShowItem!=oEle){

oChildWin.document.body.innerHTML = "";

oDiv = createBasePanel(oChildWin);

oChildWin.document.body.appendChild(oDiv);

for(i=0;i<NodeData.childNodes.length;i++){

oTR = createItemTemp(oDiv,oChildWin);

aNode = NodeData.childNodes.item(i)

fillMenuItemData(aNode,oTR,oChildWin);

}

createHLDiv(oChildWin);

oCurrWin.document.body.preShowItem = oEle;

}

//如果当前将要显示的窗口已经显示，则隐藏该子窗口上的高亮区，并不再做显示菜单的动作

if(oCurrWin.document.body.preShowItem==oEle&&oChildWin.document.DivPanel.style.visibility=="visible"&&oChildWin.isOpen){

oCurrWin.document.childWin.document.body.HLDiv.style.visibility="hidden";

return

}

//执行显示子窗口子菜单动作

if(x&&y){

XConer = x;

YConer = y;

}

else{

XConer = oEle.offsetWidth+oEle.offsetLeft;

YConer = oEle.offsetTop;

}

oChildWin.show(XConer,YConer,1,1,oCurrWin.document.body);

var width = oChildWin.document.body.scrollWidth;

var height = oChildWin.document.body.scrollHeight;

oChildWin.show(XConer,YConer,width,height,oCurrWin.document.body);

//使用淡入效果显示菜单

fadeIn(oChildWin.document.DivPanel);

//禁止系统右键菜单的弹出。

try{

event.returnValue = false;

}

catch(e){

}

function createHLDiv(oPopup){

//创建一个鼠标移动到菜单项的高亮效果层

oHLDiv = oPopup.document.createElement("DIV");

oTable = oPopup.document.createElement("<TABLE height='100%' border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");

oTBody = oPopup.document.createElement("TBODY");//TBODY是必须要的元素，不然表格无法显示

oTable.className = "ItemHighLightTable";

oHLDiv.className = "ItemHightLightDiv";

oHLDiv.appendChild(oTable);

oTable.appendChild(oTBody);

oTR = oTable.insertRow();

oTD = oTR.insertCell();

oTD.style.width = 22;

oTD.className = "ItemHL" ;

oTR.checkTD = oTD;

oTD = oTR.insertCell();

oTD.style.width = 22;

oTD.className = "ItemHL" ;

oTR.picTD = oTD;

oTD = oTR.insertCell();

oTD.style.width = 10;

oTD.className = "ItemHL" ;

oTD.innerHTML = " "

oTD = oTR.insertCell();

oTD.className = "ItemHL" ;

oTR.textTD = oTD;

oTD.noWrap = true;

oTD = oTR.insertCell();

oTD.style.width = 22;

oTD.className = "ItemHL" ;

oTD.align = "center";

oTD.style.fontFamily = "Webdings";

oHLDiv.iTable = oTable;

oHLDiv.iTable.iTBody = oTBody;

oPopup.document.body.appendChild(oHLDiv);

oHLDiv.style.visibility="hidden";

oPopup.document.body.HLDiv = oHLDiv;

}

//鼠标移动高亮效果,把高亮层下面的内容取过来。

function highLight(oEle,oWin){

if(oEle.cells[0].style.display!="none"){

oWin.document.body.HLDiv.iTable.cells[0].style.width=23;

oWin.document.body.HLDiv.iTable.cells[1].style.width=24;

oWin.document.body.HLDiv.iTable.cells[1].style.paddingLeft = "4px";

if(oEle.cells[0].innerHTML==""){

oWin.document.body.HLDiv.iTable.cells[0].innerHTML=" ";

}

else{

oWin.document.body.HLDiv.iTable.cells[0].innerHTML=oEle.cells[0].innerHTML;

}

oWin.document.body.HLDiv.iTable.cells[0].style.display = oEle.cells[0].style.display;

oWin.document.body.HLDiv.iTable.cells[1].innerHTML=oEle.cells[1].innerHTML;

oWin.document.body.HLDiv.iTable.cells[2].innerHTML=oEle.cells[2].innerHTML;

oWin.document.body.HLDiv.iTable.cells[3].innerHTML=oEle.cells[3].innerHTML;

oWin.document.body.HLDiv.iTable.cells[4].innerHTML=oEle.cells[4].innerHTML;

oWin.document.body.HLDiv.style.visibility="visible";

oWin.document.body.HLDiv.style.top = oEle.offsetTop+1;

oChildWin.document.body.HLDiv.style.width = oEle.offsetWidth - 2;

}

//当鼠标移动到没有下级子菜单项上的时候，关闭下级子菜单

function hideMenu(oWin){

try{

oWin.document.childWin.document.body.HLDiv.style.visibility="hidden";

oWin.document.childWin.hide();

}

catch(e){

}

//建立基板以便插入菜单项

function createBasePanel(oWin){

oDiv = oWin.document.createElement("<DIV>");

oDiv.className = "DivPanel";

oDiv.width = element.Width;

oTable = oWin.document.createElement("<TABLE border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");

oTable.className = "MenuPanel";

oDiv.appendChild(oTable);

oWin.document.DivPanel = oDiv;

oDiv.TablePanel = oTable;

return(oDiv);

}

//建立菜单的项的模板

function createItemTemp(oDiv,oWin){

oTable = oDiv.TablePanel

oTR = oTable.insertRow();

oTD = oTR.insertCell();

oTD.style.width = 25;

oTD.className = "PicColummLeftHalf" ;

oTR.checkTD = oTD;

oTD = oTR.insertCell();

oTD.style.width = 25;

oTD.className = "PicColummRightHalf" ;

oTR.picTD = oTD;

oTD = oTR.insertCell();

oTD.style.width = 10;

oTD.className = "ItemNormal" ;

oTD.innerHTML = " "

oTD = oTR.insertCell();

oTD.className = "ItemNormal" ;

oTR.textTD = oTD;

oTD.noWrap = true;

oTD = oTR.insertCell();

oTD.style.width = 25;

oTD.className = "ItemNormal" ;

oTD.align = "center";

oTD.style.fontFamily = "Webdings";

oTR.nextTD = oTD;

return(oTR);

}

//填充菜单项数据

function fillMenuItemData(oNode,oTR,oWin){

oIMG = oNode.attributes.getNamedItem("img").text;

oFunc = oNode.attributes.getNamedItem("Func").text;

oText = oNode.attributes.getNamedItem("Text").text;

iType = oNode.attributes.getNamedItem("iType").text;

blIsChecked = oNode.attributes.getNamedItem("IsChecked").text;

blhasSub = oNode.attributes.getNamedItem("hasSub").text;

blSplitLine = oNode.attributes.getNamedItem("SplitLine").text;

iwidth = oNode.attributes.getNamedItem("width").text;

if(iType=="1"){

oTR.checkTD.style.display = "none";

oTR.picTD.className = "PicColummFull";

oTR.picTD.innerHTML = " ";

oTR.checkTD.innerHTML = " ";

}

else{

oTR.checkTD.style.display = "";

oTR.checkTD.className = "PicColummLeftHalf";

oTR.picTD.className = "PicColummRightHalf";

oTR.picTD.innerHTML = " ";

oTR.checkTD.innerHTML = " ";

}

if(blhasSub=="1"){

oTR.nextTD.innerHTML = "4";

oTR.attachEvent("onmouseover",function(){showMenu(oWin,oNode,oTR)})

}

else{

oTR.nextTD.innerHTML = "  ";

oTR.attachEvent("onmouseover",function(){hideMenu(oWin)})

}

if(blSplitLine=="1"){

oTR.nextTD.className = "ItemNormalLine";

oTR.textTD.className = "ItemNormalLine";

oTR.blSplitLine = "1"

}

else{

oTR.nextTD.className = "ItemNormal";

oTR.textTD.className = "ItemNormal";

oTR.blSplitLine = "0"

}

if(oIMG!=""){

strimg = "<img border=\"0\" src=\""+oIMG+"\" valign=\"absmiddle\" align=\"center\" style=\"filter:progid:DXImageTransform.Microsoft.Shadow(enabled=true,color=#99CCFF,direction=135,strength=0);\">"

oTR.picTD.innerHTML = strimg ;

}

oTR.textTD.innerText = oText;

oTR.textTD.width = iwidth;

oTR.attachEvent("onmouseover",function(){highLight(oTR,oWin)})

}

function createMenuBar(){

BarData = element.dataSource.documentElement;

oTable = window.document.createElement("TABLE");

oTable.className = "Menubar";

oTBody = window.document.createElement("TBODY");

oTable.appendChild(oTBody);

oTR = oTable.insertRow();

oTD = oTR.insertCell();

oIMG = window.document.createElement("IMG")

oIMG.src = "left.gif";

oIMG.valign = "absmiddle";

oTD.appendChild(oIMG);

for(i=0;i<BarData.childNodes.length;i++){

oNode = BarData.childNodes.item(i);

var oNewSPAN = window.document.createElement("SPAN");

oNewSPAN.className = "MenubarNormal";

oNewSPAN.NodeData = oNode;

oNewSPAN.innerHTML = oNode.attributes.getNamedItem("Text").text;

oNewSPAN.hasSub = oNode.attributes.getNamedItem("hasSub").text;

oNewSPAN.style.width = oNode.attributes.getNamedItem("width").text;

oTD.appendChild(oNewSPAN);

oNewSPAN.attachEvent("onmouseover",MenuOver);

oNewSPAN.attachEvent("onmousedown",MenuMouseDown);

}

element.Menubar = oTable;

return oTable;

}

function MenuOver(){

hideMenu(window)

oEle = event.srcElement;

oEles = oEle.parentElement.getElementsByTagName("SPAN");

for(i=0;i<oEles.length;i++){

oEles[i].className="MenubarNormal";

}

if(element.Menubar.isDisplay==null||(element.Menubar.isDisplay!=null&&element.Menubar.isDisplay==false)){

oEle.className = "MenubarHLYellow";

}

else{

oEle.className = "MenubarHLBlue";

if(oEle.hasSub!="1") return;

showMenu(window,oEle.NodeData,oEle,getAbsLeft(oEle)+2,getAbsTop(oEle)+oEle.offsetHeight+1)

}

function MenuMouseDown(){

oEle = event.srcElement;

element.Menubar.isDisplay = element.Menubar.isDisplay?false:true;

event.srcElement.className = (oEle.className=="MenubarHLYellow")?"MenubarHLBlue":"MenubarHLYellow";

if(element.Menubar.isDisplay&&oEle.hasSub=="1") showMenu(window,oEle.NodeData,oEle,getAbsLeft(oEle)+2,getAbsTop(oEle)+oEle.offsetHeight+1);

event.cancelBubble = true;

}

function getAbsLeft(e){

var l=e.offsetLeft;

while(e=e.offsetParent){

l+=e.offsetLeft;

}

return l;

}

function getAbsTop(e){

var t=e.offsetTop;

while(e=e.offsetParent){

t+=e.offsetTop;

}

return t;

}

</script>

</PUBLIC:COMPONENT>