home *** CD-ROM | disk | FTP | other *** search
/ com!online 2002 May / comcd0502.iso / homepage / special / javascript / 02_01 / java / Menue / yx_menu.js < prev    next >
Encoding:
JavaScript  |  2000-06-26  |  12.3 KB  |  404 lines
  1. // +------------------------------------------------------------+
  2. // | yx_menu                         Version 1                  |
  3. // | Copyright 1999  Xin Yang        yangxin@iname.com          |
  4. // | Created 10/29/1999              Last Modified 06/26/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 = 18; // 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. var menuDone = new Array();
  49.  
  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.     hideSubMenu();
  77.     launchPage(menuItem[itemIndex].url);
  78.   }
  79.   else if (menuItem[itemIndex].type == flagCommand) {
  80.     hideSubMenu();
  81.     launchCommand(menuItem[itemIndex].command);
  82.   }
  83. }
  84.  
  85. function mouseOver() {
  86.   var itemIndex = this.itemIndex;
  87.   var menuIndex = menuItem[itemIndex].myFolder;
  88.   var menuLength = menuFolder[menuIndex].length;
  89.   var folderIndex = menuItem[itemIndex].folder;
  90.   var itemX = menuItem[itemIndex].x;
  91.   var itemY = menuItem[itemIndex].y;
  92.   var thisFolder = 0;
  93.   var thisItem = 0;
  94.  
  95.   itemOn = true;
  96.  
  97.   if (menuItem[itemIndex].type != flagSeparator) {
  98.     if (isIE4) {
  99.       this.style.backgroundColor = colorHighlighted;
  100.     }
  101.     else if (isNN4) {
  102.       this.document.bgColor = colorHighlighted;
  103.     }
  104.   }
  105.  
  106.   for (var i = 0; i < menuLength; i++) {
  107.     thisItem = menuFolder[menuIndex][i];
  108.  
  109.     if (thisItem != itemIndex)
  110.       if (menuItem[thisItem].type == flagMenu) {
  111.         thisFolder = menuItem[thisItem].folder;
  112.  
  113.         if (menuFolderSwitch[thisFolder])
  114.           hideMenu(thisFolder);
  115.       }
  116.   }
  117.  
  118.   if (menuItem[itemIndex].type == flagMenu)
  119.     if (!menuFolderSwitch[folderIndex])
  120.       showMenu(folderIndex,itemX + menuWidth[menuIndex] * charWidth + subMenuFlagSize,itemY);
  121.  
  122.   window.status = menuItem[itemIndex].description;
  123.   return true;
  124. }
  125.  
  126. function mouseOut() {
  127.   itemOn = false;
  128.  
  129.   if (isIE4)
  130.     this.style.backgroundColor = colorNormal
  131.   else if (isNN4)
  132.     this.document.bgColor = colorNormal;
  133.  
  134.   window.status = "";
  135. }
  136.  
  137. function menuItemUnit() {
  138.   this.type = "";
  139.   this.name = "";
  140.   this.description = "";
  141.   this.url = "";
  142.   this.command = "";
  143.   this.menu = "";
  144.   this.folder = -1;
  145.   this.myFolder = -1;
  146.   this.x = -1;
  147.   this.y = -1;
  148. }
  149.  
  150. function readMenu(menuName) {
  151.   var menu = eval(menuName);
  152.   var menuLength = menu.length
  153.   var thisFolder = ++menuFolderCount;
  154.  
  155.   menuFolder[thisFolder] = new Array();
  156.   menuFolderSwitch[thisFolder] = false;
  157.   menuWidth[thisFolder] = 0;
  158.   menuLayer[thisFolder] = false;
  159.   menuDone[thisFolder] = false;
  160.  
  161.   for (var i = 0; i < menuLength; i++) {
  162.     menuFolder[thisFolder][i] = ++menuItemCount;
  163.     itemLayer[menuItemCount] = false;
  164.  
  165.     menuItem[menuItemCount] = new menuItemUnit();
  166.     menuItem[menuItemCount].myFolder = thisFolder;
  167.     menuItem[menuItemCount].type = menu[i][0];
  168.     menuItem[menuItemCount].name = menu[i][1];
  169.     menuItem[menuItemCount].description = menu[i][2];
  170.  
  171.     if (menuWidth[thisFolder] < (menuItem[menuItemCount].name.length + marginSize))
  172.       menuWidth[thisFolder] = menuItem[menuItemCount].name.length + marginSize;
  173.  
  174.     if (menuItem[menuItemCount].type == flagMenu) {
  175.       menuItem[menuItemCount].menu = menu[i][3];
  176.       menuItem[menuItemCount].folder = menuFolderCount + 1;
  177.       readMenu(menuItem[menuItemCount].menu);
  178.     }
  179.     else if (menuItem[menuItemCount].type == flagLink) {
  180.       menuItem[menuItemCount].url = menu[i][3];
  181.     }
  182.     else if (menuItem[menuItemCount].type == flagCommand) {
  183.       menuItem[menuItemCount].command = menu[i][3];
  184.     }
  185.     else if (menuItem[menuItemCount].type != flagSeparator) {
  186.       alert("Menu Error");
  187.     }
  188.   }
  189. }
  190.  
  191. function getItem(itemIndex,itemDimX,itemDimY,menuIndex) {
  192.   var thisItem = null;
  193.   var subMenuFlag = (menuItem[itemIndex].type == flagMenu)?"subMenu.gif":"onePixel.gif";
  194.   var singleQuote = "'";
  195.   var itemID = "item" + itemIndex + "";
  196.   var layerString = '<div id="' + itemID + '" style="position:absolute; width:' + itemDimX + '; background-color:' + colorNormal + '; visibility:hidden;"></div>';
  197.   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>');
  198.  
  199.   if (!itemLayer[itemIndex]) {
  200.     itemLayer[itemIndex] = true;
  201.  
  202.     if (isIE4) {
  203.       document.body.insertAdjacentHTML("BeforeEnd",layerString);
  204.       thisItem = document.all[itemID];
  205.  
  206.       thisItem.innerHTML = htmlString;
  207.       thisItem.style.zIndex = menuIndex * 2 + 1;
  208.  
  209.       thisItem.onmouseover = mouseOver;
  210.       if (menuItem[itemIndex].type != flagSeparator)
  211.         thisItem.onmouseout = mouseOut;
  212.  
  213.       thisItem.itemIndex = itemIndex;
  214.     }
  215.     else if (isNN4) {
  216.       document.layers[itemID] = new Layer(itemDimX);
  217.       thisItem = document.layers[itemID];
  218.  
  219.       thisItem.visibility = "hidden";
  220.       thisItem.document.open();
  221.       thisItem.document.writeln(htmlString);
  222.       thisItem.document.close();
  223.       thisItem.document.bgColor = colorNormal;
  224.       thisItem.zIndex = menuIndex * 2 + 1;
  225.  
  226.       thisItem.onmouseover = mouseOver;
  227.       if (menuItem[itemIndex].type != flagSeparator)
  228.         thisItem.onmouseout = mouseOut;
  229.  
  230.       thisItem.itemIndex = itemIndex;
  231.     }
  232.   }
  233.  
  234.   return itemID;
  235. }
  236.  
  237. function getMenu(menuIndex,menuDimX,menuDimY) {
  238.   var menuID = "menu" + menuIndex + "";
  239.   var menuPadX = menuDimX + borderSize * 2;
  240.   var menuPadY = menuDimY + borderSize * 2;
  241.   var layerString = '<div id="' + menuID + '" style="position:absolute; width:' + menuPadX + '; visibility:hidden;"></div>';
  242.   var htmlString = '<table width=' + menuPadX +' height=' + menuPadY + ' cellpadding=0 cellspacing=0 border=' + borderSize + '><tr align=left valign=middle><td></td></tr></table>';
  243.  
  244.   if (!menuLayer[menuIndex]) {
  245.     menuLayer[menuIndex] = true;
  246.  
  247.     if (isIE4) {
  248.       document.body.insertAdjacentHTML("BeforeEnd",layerString);
  249.  
  250.       document.all[menuID].innerHTML = htmlString;
  251.       document.all[menuID].style.zIndex = menuIndex * 2;
  252.     }
  253.     else if (isNN4) {
  254.       document.layers[menuID] = new Layer(menuPadX);
  255.  
  256.       document.layers[menuID].visibility = "hidden";
  257.       document.layers[menuID].zIndex = menuIndex * 2;
  258.       document.layers[menuID].document.open();
  259.       document.layers[menuID].document.writeln(htmlString);
  260.       document.layers[menuID].document.close();
  261.     }
  262.   }
  263.  
  264.   return menuID;
  265. }
  266.  
  267. function showLayer(layerID) {
  268.   if (isIE4)
  269.     document.all[layerID].style.visibility = "visible"
  270.   else if (isNN4)
  271.     document.layers[layerID].visibility = "show";
  272. }
  273.  
  274. function hideLayer(layerID) {
  275.   if (isIE4)
  276.     document.all[layerID].style.visibility = "hidden"
  277.   else if (isNN4)
  278.     document.layers[layerID].visibility = "hidden";
  279. }
  280.  
  281. function moveLayerTo(layerID,x,y) {
  282.   if (isIE4) {
  283.     document.all[layerID].style.pixelLeft = x;
  284.     document.all[layerID].style.pixelTop = y;
  285.   }
  286.   else if (isNN4) {
  287.     document.layers[layerID].left = x;
  288.     document.layers[layerID].top = y;
  289.   }
  290. }
  291.  
  292. function hideMenu(menuIndex) {
  293.   var menuLength = menuFolder[menuIndex].length;
  294.   var menuID = getMenu(menuIndex,0,0);
  295.   var itemID = "";
  296.   var itemIndex = 0;
  297.  
  298.   for (var i = 0; i < menuLength; i++) {
  299.     itemIndex = menuFolder[menuIndex][i];
  300.  
  301.     if (menuItem[itemIndex].type == flagMenu)
  302.       if (menuFolderSwitch[menuItem[itemIndex].folder])
  303.         hideMenu(menuItem[itemIndex].folder);
  304.  
  305.     itemID = getItem(itemIndex,0,0,0);
  306.     hideLayer(itemID);
  307.   }
  308.  
  309.   hideLayer(menuID);
  310.  
  311.   menuFolderSwitch[menuIndex] = false;
  312. }
  313.  
  314. function hideSubMenu() {
  315.   var menuLength = menuFolder[0].length;
  316.  
  317.   for (var i = 0; i < menuLength; i++) {
  318.     itemIndex = menuFolder[0][i];
  319.  
  320.     if (menuItem[itemIndex].type == flagMenu) {
  321.       if (menuFolderSwitch[menuItem[itemIndex].folder])
  322.         hideMenu(menuItem[itemIndex].folder);
  323.     }
  324.   }
  325. }
  326.  
  327. function showMenu(menuIndex,menuX,menuY) {
  328.   var itemDimY = menuY;
  329.   var menuLength = menuFolder[menuIndex].length;
  330.   var menuDimX = menuWidth[menuIndex] * charWidth + subMenuFlagSize;
  331.   var menuID = "";
  332.   var itemID = "";
  333.   var itemIndex = 0;
  334.  
  335.   if (!menuDone[menuIndex]) {
  336.     for (var i = 0; i < menuLength; i++) {
  337.       itemIndex = menuFolder[menuIndex][i];
  338.  
  339.       menuItem[itemIndex].x = menuX;
  340.       menuItem[itemIndex].y = itemDimY;
  341.       itemDimY +=  (menuItem[itemIndex].type != flagSeparator)?charHeight:2;
  342.  
  343.       itemID = getItem(itemIndex,menuDimX,charHeight,menuIndex);
  344.  
  345.       moveLayerTo(itemID,menuItem[itemIndex].x,menuItem[itemIndex].y);
  346.     }
  347.  
  348.     menuID = getMenu(menuIndex,menuDimX,itemDimY-menuY);
  349.     moveLayerTo(menuID,menuX-borderSize,menuY-borderSize);
  350.  
  351.     menuDone[menuIndex] = true;
  352.   }
  353.  
  354.   for (var i = 0; i < menuLength; i++)
  355.     showLayer(getItem(menuFolder[menuIndex][i],0,0,0));
  356.  
  357.   showLayer(getMenu(menuIndex,0,0));
  358.  
  359.   menuFolderSwitch[menuIndex] = true;
  360. }
  361.  
  362. function buildMenu(menuName,x,y) {
  363.   isIE4 = document.all;
  364.   isNN4 = document.layers;
  365.  
  366.   if (isIE4 || isNN4) {
  367.     if (isNN4) {
  368.       nnWidth = window.innerWidth;
  369.       nnHeight = window.innerHeight;
  370.       window.onResize = reloadMenu;
  371.     }
  372.  
  373.     readMenu(menuName);
  374.     showMenu(0,x,y);
  375.     captureClick();
  376.   }
  377. }
  378.  
  379. function switchMenu(e) {
  380.   if (!itemOn)
  381.     hideSubMenu();
  382.  
  383.   if (isNN4) {
  384.     routeEvent(e);
  385.   }
  386.  
  387.   return true;
  388. }
  389.  
  390. function captureClick() {
  391.   if (isIE4)
  392.     document.onclick = switchMenu;
  393.   else {
  394.     document.onClick = switchMenu;
  395.     document.captureEvents(Event.CLICK);
  396.   }
  397. }
  398.  
  399. function reloadMenu() {
  400.   if (nnWidth != window.innerWidth || nnHeight != window.innerHeight)
  401.     document.location.reload();
  402. }
  403.  
  404. // Script ends