home *** CD-ROM | disk | FTP | other *** search
/ com!online 2002 May / comcd0502.iso / homepage / special / javascript / 02_01 / java / Menue / yx_menu-v2.js < prev    next >
Encoding:
JavaScript  |  2000-04-11  |  12.2 KB  |  402 lines
  1. // +------------------------------------------------------------+
  2. // | yx_menu                         Version 2                  |
  3. // | Copyright 1999  Xin Yang        yangxin@iname.com          |
  4. // | Created 10/29/1999              Last Modified 04/11/2000   |
  5. // | Web Site:                       http://yx.webprovider.com  |
  6. // +------------------------------------------------------------+
  7. // | Copyright 1999,2000  Xin Yang   All Rights Reserved.       |
  8. // +------------------------------------------------------------+
  9. // | For personal purpose, send me your URL and put a link back |
  10. // | to my web site, then you can use this script free.         |
  11. // |                                                            |
  12. // | For commercial purpose, obtain quotation for referencing,  |
  13. // | using, hosting, selling or distributing this script.       |
  14. // |                                                            |
  15. // | In all cases copyright must remain intact.                 |
  16. // +------------------------------------------------------------+
  17.  
  18. // Script begins
  19.  
  20. var isIE4 = false;
  21. var isNN4 = false;
  22.  
  23. var flagMenu = "M";
  24. var flagLink = "L";
  25. var flagCommand = "C";
  26. var flagSeparator = "S";
  27.  
  28. var charWidth = 7; // character width
  29. var charHeight = 15; // character height
  30. var colorNormal = "#cccccc"; // menu pad color
  31. var colorHighlighted = "#ffffff"; // menu highlighted item color
  32. var colorTopLine = "#999999"; // separator upper line color
  33. var colorBottomLine = "#ffffff"; // separator lower line color
  34.  
  35. var borderSize = 1;
  36. var marginSize = 4;
  37. var marginString = "  ";
  38. var subMenuFlagSize = 4;
  39.  
  40. var menuItemCount = -1;
  41. var menuItem = new Array();
  42. var menuFolderCount = -1;
  43. var menuFolder = new Array();
  44. var menuFolderSwitch = new Array();
  45. var menuWidth = new Array();
  46. var itemLayer = new Array();
  47. var menuLayer = new Array();
  48.  
  49. var menuOn = false;
  50. var itemOn = false;
  51. var nnWidth = 0, nnHeight = 0;
  52.  
  53. function launchCommand(commandString) {
  54.   // eval(commandString);
  55.   alert(commandString);
  56. }
  57.  
  58. function launchPage(pageURL) {
  59.   // document.location.assign(pageURL);
  60.   alert(pageURL);
  61. }
  62.  
  63. function clickMenu(itemIndex) {
  64.   var menuIndex = menuItem[itemIndex].myFolder;
  65.   var folderIndex = menuItem[itemIndex].folder;
  66.   var itemX = menuItem[itemIndex].x;
  67.   var itemY = menuItem[itemIndex].y;
  68.  
  69.   if (menuItem[itemIndex].type == flagMenu) {
  70.     if (menuFolderSwitch[folderIndex])
  71.       hideMenu(folderIndex)
  72.     else
  73.       showMenu(folderIndex,itemX + menuWidth[menuIndex] * charWidth + subMenuFlagSize,itemY);
  74.   }
  75.   else if (menuItem[itemIndex].type == flagLink) {
  76.     hideMenu(0);
  77.     itemOn = false;
  78.     menuOn = false;
  79.     launchPage(menuItem[itemIndex].url);
  80.   }
  81.   else if (menuItem[itemIndex].type == flagCommand) {
  82.     hideMenu(0);
  83.     itemOn = false;
  84.     menuOn = false;
  85.     launchCommand(menuItem[itemIndex].command);
  86.   }
  87. }
  88.  
  89. function mouseOver() {
  90.   var itemIndex = this.itemIndex;
  91.   var menuIndex = menuItem[itemIndex].myFolder;
  92.   var menuLength = menuFolder[menuIndex].length;
  93.   var folderIndex = menuItem[itemIndex].folder;
  94.   var itemX = menuItem[itemIndex].x;
  95.   var itemY = menuItem[itemIndex].y;
  96.   var thisFolder = 0;
  97.   var thisItem = 0;
  98.  
  99.   itemOn = true;
  100.  
  101.   if (menuItem[itemIndex].type != flagSeparator) {
  102.     if (isIE4) {
  103.       this.style.backgroundColor = colorHighlighted;
  104.     }
  105.     else if (isNN4) {
  106.       this.document.bgColor = colorHighlighted;
  107.     }
  108.   }
  109.  
  110.   for (var i = 0; i < menuLength; i++) {
  111.     thisItem = menuFolder[menuIndex][i];
  112.  
  113.     if (thisItem != itemIndex)
  114.       if (menuItem[thisItem].type == flagMenu) {
  115.         thisFolder = menuItem[thisItem].folder;
  116.  
  117.         if (menuFolderSwitch[thisFolder])
  118.           hideMenu(thisFolder);
  119.       }
  120.   }
  121.  
  122.   if (menuItem[itemIndex].type == flagMenu)
  123.     if (!menuFolderSwitch[folderIndex])
  124.       showMenu(folderIndex,itemX + menuWidth[menuIndex] * charWidth + subMenuFlagSize,itemY);
  125.  
  126.   window.status = menuItem[itemIndex].description;
  127.   return true;
  128. }
  129.  
  130. function mouseOut() {
  131.   itemOn = false;
  132.  
  133.   if (isIE4)
  134.     this.style.backgroundColor = colorNormal
  135.   else if (isNN4)
  136.     this.document.bgColor = colorNormal;
  137.  
  138.   window.status = "";
  139.   return true;
  140. }
  141.  
  142. function menuItemUnit() {
  143.   this.type = "";
  144.   this.name = "";
  145.   this.description = "";
  146.   this.url = "";
  147.   this.command = "";
  148.   this.menu = "";
  149.   this.folder = -1;
  150.   this.myFolder = -1;
  151.   this.x = -1;
  152.   this.y = -1;
  153. }
  154.  
  155. function readMenu(menuName) {
  156.   var menu = eval(menuName);
  157.   var menuLength = menu.length
  158.   var thisFolder = ++menuFolderCount;
  159.  
  160.   menuFolder[thisFolder] = new Array();
  161.   menuFolderSwitch[thisFolder] = false;
  162.   menuWidth[thisFolder] = 0;
  163.   menuLayer[thisFolder] = false;
  164.  
  165.   for (var i = 0; i < menuLength; i++) {
  166.     menuFolder[thisFolder][i] = ++menuItemCount;
  167.     itemLayer[menuItemCount] = false;
  168.  
  169.     menuItem[menuItemCount] = new menuItemUnit();
  170.     menuItem[menuItemCount].myFolder = thisFolder;
  171.     menuItem[menuItemCount].type = menu[i][0];
  172.     menuItem[menuItemCount].name = menu[i][1];
  173.     menuItem[menuItemCount].description = menu[i][2];
  174.  
  175.     if (menuWidth[thisFolder] < (menuItem[menuItemCount].name.length + marginSize))
  176.       menuWidth[thisFolder] = menuItem[menuItemCount].name.length + marginSize;
  177.  
  178.     if (menuItem[menuItemCount].type == flagMenu) {
  179.       menuItem[menuItemCount].menu = menu[i][3];
  180.       menuItem[menuItemCount].folder = menuFolderCount + 1;
  181.       readMenu(menuItem[menuItemCount].menu);
  182.     }
  183.     else if (menuItem[menuItemCount].type == flagLink) {
  184.       menuItem[menuItemCount].url = menu[i][3];
  185.     }
  186.     else if (menuItem[menuItemCount].type == flagCommand) {
  187.       menuItem[menuItemCount].command = menu[i][3];
  188.     }
  189.     else if (menuItem[menuItemCount].type != flagSeparator) {
  190.       alert("Menu Error");
  191.     }
  192.   }
  193. }
  194.  
  195. function getItem(itemIndex,itemDimX,itemDimY,menuIndex) {
  196.   var thisItem = null;
  197.   var subMenuFlag = (menuItem[itemIndex].type == flagMenu)?"subMenu.gif":"onePixel.gif";
  198.   var singleQuote = "'";
  199.   var itemID = "item" + itemIndex + "";
  200.   var layerString = '<div id="' + itemID + '" style="position:absolute; width:' + itemDimX + '; background-color:' + colorNormal + '; visibility:hidden;"></div>';
  201.   var htmlString = (menuItem[itemIndex].type == flagSeparator)?('<table width=' + itemDimX +' height=2 cellpadding=0 cellspacing=0 border=0><tr align=left valign=bottom><td bgcolor=' + colorTopLine + '><img src="onePixel.gif" width=1 height=1 border=0></td></tr><tr align=left valign=top><td bgcolor=' + colorBottomLine + '><img src="onePixel.gif" width=1 height=1 border=0></td></tr></table>'):('<table width=' + itemDimX +' height=' + itemDimY + ' cellpadding=0 cellspacing=0 border=0><tr align=left valign=middle><td nowrap><span id="menuText"><a class="menu" href="javascript:clickMenu(' + itemIndex + ')" onMouseOver="window.status=' + singleQuote + menuItem[itemIndex].description + singleQuote + ';return true;">' + marginString + menuItem[itemIndex].name + marginString + '</a></span></td><td><img src="' + subMenuFlag + '" width=4 height=7 border=0 align=right></td></tr></table>');
  202.  
  203.   if (!itemLayer[itemIndex]) {
  204.     itemLayer[itemIndex] = true;
  205.  
  206.     if (isIE4) {
  207.       document.body.insertAdjacentHTML("BeforeEnd",layerString);
  208.       thisItem = document.all[itemID];
  209.  
  210.       thisItem.innerHTML = htmlString;
  211.       thisItem.style.zIndex = menuIndex * 2 + 1;
  212.  
  213.       thisItem.onmouseover = mouseOver;
  214.       if (menuItem[itemIndex].type != flagSeparator)
  215.         thisItem.onmouseout = mouseOut;
  216.  
  217.       thisItem.itemIndex = itemIndex;
  218.     }
  219.     else if (isNN4) {
  220.       document.layers[itemID] = new Layer(itemDimX);
  221.       thisItem = document.layers[itemID];
  222.  
  223.       thisItem.visibility = "hidden";
  224.       thisItem.document.open();
  225.       thisItem.document.writeln(htmlString);
  226.       thisItem.document.close();
  227.       thisItem.document.bgColor = colorNormal;
  228.       thisItem.zIndex = menuIndex * 2 + 1;
  229.  
  230.       thisItem.onmouseover = mouseOver;
  231.       if (menuItem[itemIndex].type != flagSeparator)
  232.         thisItem.onmouseout = mouseOut;
  233.  
  234.       thisItem.itemIndex = itemIndex;
  235.     }
  236.   }
  237.  
  238.   return itemID;
  239. }
  240.  
  241. function getMenu(menuIndex,menuDimX,menuDimY) {
  242.   var menuID = "menu" + menuIndex + "";
  243.   var menuPadX = menuDimX + borderSize * 2;
  244.   var menuPadY = menuDimY + borderSize * 2;
  245.   var layerString = '<div id="' + menuID + '" style="position:absolute; width:' + menuPadX + '; visibility:hidden;"></div>';
  246.   var htmlString = '<table width=' + menuPadX +' height=' + menuPadY + ' cellpadding=0 cellspacing=0 border=' + borderSize + '><tr align=left valign=middle><td></td></tr></table>';
  247.  
  248.   if (!menuLayer[menuIndex]) {
  249.     menuLayer[menuIndex] = true;
  250.  
  251.     if (isIE4) {
  252.       document.body.insertAdjacentHTML("BeforeEnd",layerString);
  253.  
  254.       document.all[menuID].innerHTML = htmlString;
  255.       document.all[menuID].style.zIndex = menuIndex * 2;
  256.     }
  257.     else if (isNN4) {
  258.       document.layers[menuID] = new Layer(menuPadX);
  259.  
  260.       document.layers[menuID].visibility = "hidden";
  261.       document.layers[menuID].zIndex = menuIndex * 2;
  262.       document.layers[menuID].document.open();
  263.       document.layers[menuID].document.writeln(htmlString);
  264.       document.layers[menuID].document.close();
  265.     }
  266.   }
  267.  
  268.   return menuID;
  269. }
  270.  
  271. function showLayer(layerID) {
  272.   if (isIE4)
  273.     document.all[layerID].style.visibility = "visible"
  274.   else if (isNN4)
  275.     document.layers[layerID].visibility = "show";
  276. }
  277.  
  278. function hideLayer(layerID) {
  279.   if (isIE4)
  280.     document.all[layerID].style.visibility = "hidden"
  281.   else if (isNN4)
  282.     document.layers[layerID].visibility = "hidden";
  283. }
  284.  
  285. function moveLayerTo(layerID,x,y) {
  286.   if (isIE4) {
  287.     document.all[layerID].style.pixelLeft = x;
  288.     document.all[layerID].style.pixelTop = y;
  289.   }
  290.   else if (isNN4) {
  291.     document.layers[layerID].left = x;
  292.     document.layers[layerID].top = y;
  293.   }
  294. }
  295.  
  296. function hideMenu(menuIndex) {
  297.   var menuLength = menuFolder[menuIndex].length;
  298.   var menuID = getMenu(menuIndex,0,0);
  299.   var itemID = "";
  300.   var itemIndex = 0;
  301.  
  302.   for (var i = 0; i < menuLength; i++) {
  303.     itemIndex = menuFolder[menuIndex][i];
  304.  
  305.     if (menuItem[itemIndex].type == flagMenu)
  306.       if (menuFolderSwitch[menuItem[itemIndex].folder])
  307.         hideMenu(menuItem[itemIndex].folder);
  308.  
  309.     itemID = getItem(itemIndex,0,0,0);
  310.     hideLayer(itemID);
  311.   }
  312.  
  313.   hideLayer(menuID);
  314.  
  315.   menuFolderSwitch[menuIndex] = false;
  316.   window.status = "";
  317. }
  318.  
  319. function showMenu(menuIndex,menuX,menuY) {
  320.   var itemDimY = menuY;
  321.   var menuLength = menuFolder[menuIndex].length;
  322.   var menuDimX = menuWidth[menuIndex] * charWidth + subMenuFlagSize;
  323.   var menuID = "";
  324.   var itemID = "";
  325.   var itemIndex = 0;
  326.  
  327.   for (var i = 0; i < menuLength; i++) {
  328.     itemIndex = menuFolder[menuIndex][i];
  329.  
  330.     menuItem[itemIndex].x = menuX;
  331.     menuItem[itemIndex].y = itemDimY;
  332.     itemDimY +=  (menuItem[itemIndex].type != flagSeparator)?charHeight:2;
  333.  
  334.     itemID = getItem(itemIndex,menuDimX,charHeight,menuIndex);
  335.  
  336.     moveLayerTo(itemID,menuItem[itemIndex].x,menuItem[itemIndex].y);
  337.     //showLayer(itemID);
  338.   }
  339.  
  340.   menuID = getMenu(menuIndex,menuDimX,itemDimY-menuY);
  341.   moveLayerTo(menuID,menuX-borderSize,menuY-borderSize);
  342.  
  343.   for (var i = 0; i < menuLength; i++)
  344.     showLayer(getItem(menuFolder[menuIndex][i],0,0,0));
  345.  
  346.   showLayer(menuID);
  347.  
  348.   menuFolderSwitch[menuIndex] = true;
  349. }
  350.  
  351. function switchMenu(e) {
  352.   var menuX = 0;
  353.   var menuY = 0;
  354.  
  355.   if (menuOn) {
  356.     if (!itemOn) {
  357.       hideMenu(0);
  358.       menuOn = false;
  359.     }
  360.   }
  361.   else {
  362.     if (isIE4) {
  363.       menuX = event.clientX;
  364.       menuY = event.clientY;
  365.     }
  366.     else if (isNN4) {
  367.       menuX = e.pageX;
  368.       menuY = e.pageY;
  369.     }
  370.  
  371.     showMenu(0,menuX,menuY);
  372.     menuOn = true;
  373.   }
  374.  
  375.   return true;
  376. }
  377.  
  378. function buildMenu(menuName) {
  379.   isIE4 = document.all;
  380.   isNN4 = document.layers;
  381.  
  382.   if (isIE4 || isNN4) {
  383.     if (isIE4)
  384.       document.ondblclick = switchMenu;
  385.     else {
  386.       document.onDblClick = switchMenu;
  387.       document.captureEvents(Event.DBLCLICK);
  388.       nnWidth = window.innerWidth;
  389.       nnHeight = window.innerHeight;
  390.       window.onResize = reloadMenu;
  391.     }
  392.  
  393.     readMenu(menuName);
  394.   }
  395. }
  396.  
  397. function reloadMenu() {
  398.   if (nnWidth != window.innerWidth || nnHeight != window.innerHeight)
  399.     document.location.reload();
  400. }
  401.  
  402. // Script ends