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