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