Menu
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<title>agetimemenu demo</title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<style>
. agetime_bar{
position:absolute;top:0px;left:0px;height:22px;width:100%;border:1px Outset;background-color:rgb (212,208,200); z-index:98;
}
. agetime_baritem{
width:60px;height:20px;border:1px solid RGB (212,208,200); text-align:left;padding-left:10px;
Background:rgb (212,208,200); color: #000000; font-size:9pt;
}
. agetime_baritemdown{
width:60px;height:20px;border:1px inset RGB (212,208,200); text-align:left;padding-left:10px;
Background: #F0F0F0; color: #000000; font-size:9pt;
}
. agetime_baritemhover{
Width:60px;height:20px;border:1 outset;text-align:left;padding-left:10px;
Background: #F0F0F0; color: #000000; font-size:9pt;
}
. agetime_pad{
cursor:default;font-size:9pt;width:100%;
}
. agetime_paditem{
width:100%;height:18px;border:1px solid RGB (212,208,200); text-align:left;padding-left:10px;
Background:rgb (212,208,200); color: #000000; font-size:9pt;
}
. agetime_paditemfalse{
padding-left:10px;font-size:9pt; Color: #808080;
}
. agetime_paditemfalsehover{
padding-left:10px;font-size:9pt; Color: #808080; Background-color: #333366;
}
. agetime_paditemhover{
width:100%;height:18px;text-align:left;padding-left:10px;
Background-color: #333366; color: #FFFFFF; font-size:9pt;
}
. agetime_paditemdown{
WIDTH:100%;HEIGHT:18PX;TEXT-ALIGN:LEFT;PADDING-LEFT:10PX;BORDER:1PX inset;
Background-color: #9999CC; color: #FFFFFF; font-size:9pt;
}
. agetime_hr{
BORDER:1PX inset;
}
. agetime_board{
Background-color:rgb (212,208,200); border:2px outset;
}
</style>
<body>
<script language= "JavaScript" >
var menu = Agetimemenu ("Agetime",
[
[
["File", Null,null,true, "Open File"],//Display text, method, command, status, bar display text
["Open", Null,null,false, "Open File"],
["--"],
["Hello", "JS", "alert (' Hello ')", true, "a greeting"],
["New Window", "ABC", "About:blank", True, "pop-up ABC window"],
[Blank, NULL, ' About:blank ', true, ' show blank page in current window ']
],
[
[Edit, Null,null,false, ' Open file '],
[Undo, Null,null,true, open file],
[Redo, Null,null,true, open file]
],
[
["File", "JS", "Alert (' No submenu ')", True, "open file"]
]
]
);
When the method is "JS", the command is a JavaScript statement, when the value is not "JS", the command is a URL, and the target location to open the URL is the window specified by the method;
["Hello", "JS", "alert (' Hello '), true," a greeting "];
Display text as "--" is a button is a separator;
function Agetimemenu (Id,array) {
var menu=this;
Menu.pad=null; Mount individual submenus
Menu.baritems=[]; Buttons for the menu bar
Menu.pads=[]; Each submenu is stored on the Menu.pad for a table;
Menu.selectedindex=-1; The index value of the menu bar check button
Menu.board=null; Sub-menu panel
Create a menu bar
This.crtmenubar=function () {
var len=array.length;
Menu.bar = Document.body.appendChild (document.createelement (' div '));
Menu.bar.classname=id+ "_bar";
for (Var i=0;i<len;i++) {
Menu.baritems[i]=menu.addmenubaritem (Array[i][0],i);
Menu.addmenupad (Array[i],i);
}
}
Sub Menu
This.addmenupad=function (Ary,index) {
var len=ary.length;
var pad=menu.crtelement ("table", Menu.pad);
pad.cellspacing=1; pad.cellpadding=0;
Pad.classname=id+ "_pad";
Pad.style.display= "None";
for (Var i=1;i<len;i++) {
var row=pad.insertrow (i-1);
Menu.addmenupaditem (Ary[i],row);
}
Menu.pads[index]=pad;
}
Individual submenu buttons
This.addmenupaditem=function (Ary,row) {
var Cell=row.insertcell (0);
if (ary[0]!= "--") {
CELL.INNERTEXT=ARY[0];
if (Ary[3]) {//valid state;
Cell.classname=id+ "_paditem";
Cell.onmouseover=function () {
Cell.classname=id+ "_paditemhover";
WINDOW.STATUS=ARY[4];
}
Cell.onmouseout=function () {
Cell.classname=id+ "_paditem";
Window.status= "";
}
Cell.onmousedown=function () {cell.classname=id+ "_paditemdown";}
Cell.onmouseup=function () {
Cell.classname=id+ "_paditemhover";
Menu.hidemenu ();
Menu.execute (ary);
}
}
else{//button is invalid;
Cell.classname=id+ "_paditemfalse";
Cell.onmouseover=function () {
Cell.classname=id+ "_paditemfalsehover";
WINDOW.STATUS=ARY[4];
}
Cell.onmouseout=function () {
Cell.classname=id+ "_paditemfalse";
Window.status= "";
}
}
}
else{
var hr=menu.crtelement ("HR", Cell);
Hr.classname=id+ "_HR";
}
Cell.onclick=function () {
Event.cancelbubble=true;
}
}
Button for menu bar
This.addmenubaritem=function (Ary,index) {
var item=menu.crtelement ("button", Menu.bar);
ITEM.VALUE=ARY[0];
ITEM.DISABLED=!ARY[3];
Item.classname=id+ "_baritem";
Item.onmouseover=function () {
if (menu.selectedindex==-1) {
Item.classname=id+ "_baritemhover";
}
else{
Menu.baritems[selectedindex].classname=id+ "_baritem";
Item.classname=id+ "_baritemdown";
Menu.showmenu (index);
}
WINDOW.STATUS=ARY[4];
}
Item.onmouseout=function () {
if (menu.selectedindex==-1) item.classname=id+ "_baritem";
Window.status= "";
}
Item.onclick=function () {
Event.cancelbubble=true;
if (menu.selectedindex==-1) {
Item.classname=id+ "_baritemdown";
Menu.showmenu (index);
}
else{
Menu.hidemenu ();
Item.classname=id+ "_baritemhover";
}
Menu.execute (ary);
Item.blur ();
}
return item;
}
//Show submenu
This.showmenu=function (index) {
if (menu.selectedindex!=-1) menu.pads[ Selectedindex].style.display= "None";
menu.board.style.pixelleft=menu.baritems[index].offsetleft+2;
//menu.board.style.pixelheight= "";
if (menu.pads[index].rows.length>0) menu.board.style.display= "";
Else menu.board.style.display= "none";
menu.pads[index].style.display= "";
Menu.selectedindex=index;
}
//Hide submenu
This.hidemenu=function () {
if (menu.selectedindex==-1) return;
menu.baritems[menu.selectedindex].classname=id+ "_baritem";
menu.pads[selectedindex].style.display= "None";
Menu.selectedindex=-1;
menu.board.style.display= "None";
}
Execute menu commands;
This.execute=function (ary) {
if (ary[2]==null) return;
if (ary[1]== "JS") {eval (ary[2]); Menu.hidemenu ();}
else if (Ary[1]==null | | ary[1].tolowercase== "_self") location.href=ary[2];
else{var x=window.open (ary[2],ary[1]); X.focus ();}
}
Creating a submenu display panel
This.crtmenuboard=function () {
document.write (
"<div id= '" +id+ "_board ' style= ' position:absolute;width:160px;height:10px;left:0px;top:20px;background-color:# 666666;z-index:99;display:none; ' > "+
"<div style= ' position:absolute;width:100%;height:100%;left:0px;top:0px; ' > "+
"<iframe id= '" "+id+" _frame ' name= ' "+id+" _frame ' width= ' 100% ', ' height= ' 100% ' frameborder= ' 0 ' scrolling= ' no ' ></ Iframe> "+
"</div>" +
"<div id= '" +id+ "_pad ' style= ' position:absolute;width:100%;height:100%;left:0px;top:0px; ' ></div> "+
"</div>"
);
Menu.board=document.getelementbyid (id+ "_board");
Menu.pad=document.getelementbyid (id+ "_pad");
Menu.pad.classname=id+ "_board";
Menu.pad.onselectstart=function () {return false;}
}
Add a child element to the image
This.crtelement=function (el,p) {
Return P.appendchild (Document.createelement (EL));
}
Installation menu;
This.setup=function () {
Menu.crtmenuboard ();
Menu.crtmenubar ();
Document.attachevent ("onclick", Menu.hidemenu);
}
Menu.setup ();
}
</script>
</body>