当前位置导航:炫浪网>>网络学院>>编程开发>>JAVA教程>>JAVA网络编程

Javascript+xml实现二级下拉菜单一


  一、简单说明
  
  该菜单最大的优点是可以跨过网页上任何标签,甚至是框架,(一般的菜单会被select,object,flash等挡住)所以如果你有这方面的需要,那么这个菜单是个很好的选择。
  
  总体而言,它有如下特性:
  
  (1)菜单的样式和数据都是通过xml配置
  
  (2)菜单的样式可以随心所欲修改,如:
  
  <base>
  <background-color>#DDDDDD</background-color>
  <background-image>url(menu_bg.jpg?http://www.xvna.com)</background-image>
  <font-size>10pt</font-size>
  <color>#000099</color>
  <width>100%</width>
  <height>32</height>
  <text-align>center</text-align>
  <cursor>default</cursor>
  </base>
  
  只要节点名称符合各自标签(table,tr,td之一)的style attribute即可。
  
  (3)主菜单项之间可以设置分割图片,子菜单项可以设置分割线的样式。
  
  (4)所有图片都由css控制,避免路径问题。
  
  (5)可以设置虚拟目录的别名,为菜单链接使用绝对路径带来方便,如:
  
  <context>
  <path>hdsa</path>
  </context>
  
  设置该值后,用户只需根据文件的目录结构写好菜单,而不必担心虚拟目录的问题。
  
  由于菜单使用了window.createPopup(),所以它被限制在IE5.5以上,而且子菜单如果是新开窗口,会被拦截。
  
  注:用window.createPopup()制作菜单受到过前人的启发
  
  设置该值后,用户只需根据文件的目录结构写好菜单,而不必担心虚拟目录的问题。
  
  由于菜单使用了window.createPopup(),所以它被限制在IE5.5以上,而且子菜单如果是新开窗口,会被拦截。
  
  注:用window.createPopup()制作菜单受到过前人的启发
  =====================================================================
  
  二、实现的两个脚本可以写在一个文件中:
  
  (1)处理Popup窗口的脚本
  
  //------------------ 下面一些函数用来处理弹出窗口 ------------------ //
  var pops = new Array(); // 用来存储Popup窗口家族的数组
  function CreatePopup(degree)
  {
  if (degree < 0)  // 层数不能小于0
  return null;
  if (pops[degree] != null) //如果已经存在则不需创建
  return pops[degree];
  
  if (degree == 0)
  pops[0] = window.createPopup(); //创建最顶层Popup窗口
  else{
  if (pops[degree - 1] == null)
  pops[degree - 1] = CreatePopup(degree - 1)  //递归回溯从第一层开始创建
  pops[degree] = pops[degree - 1].document.parentWindow.createPopup(); //从父Popup窗口创建子Popup窗口
  }
  pops[degree].document.body.setAttribute("degree", degree);
  return pops[degree];
  }
  
  CreatePopup(1); //创建一个2层的Popup家族
  
  var oPopup = pops[0];
  var timer = null;
  
  /**
  *显示一级子菜单
  *@param objShow - 显示子菜单的对象
  *@param strGetID - 存储显示内容的标签id
  */
  function showSubMenu1(objShow,strGetID) {
  clearTimer();
  endHideSubMenu();
  var objGet = eval(document.getElementById(strGetID));
  
  pops[1].hide();
  pops[0].document.body.innerHTML = objGet.innerHTML;
  pops[0].show(0,0,1,1,objShow);
  var intWidth = pops[0].document.body.scrollWidth;
  var intHeight = pops[0].document.body.scrollHeight;
  pops[0].hide();
  pops[0].show(10,objShow.offsetHeight-2,intWidth,intHeight,objShow);
  }
  
  /**
  *显示二级菜单
  *@param strGetID - 存储显示内容的标签id
  *@param objTr - 显示子菜单的tr对象
  */
  function showSubMenu2(strGetID,objTr) {
  clearTimer();
  endHideSubMenu();
  var objGet = eval(document.getElementById(strGetID));
  pops[1].document.body.innerHTML = objGet.innerHTML;
  pops[1].show(0,0,1,1,pops[0].document.body);
  var intWidth = pops[1].document.body.scrollWidth;
  var intHeight = pops[1].document.body.scrollHeight;
  pops[1].hide();
  pops[1].show(objTr.offsetWidth - 2,-2, intWidth, intHeight, objTr);
  
  }
  
  //隐藏一级子菜单
  function hideSubMenu1(){
  //pops[0].hide();
  window.setTimeout("pops[0].hide()", 1000);
  }
  
  //隐藏二级子菜单
  function hideSubMenu2()
  {
  //clearTimer();
  //timer = window.setTimeout("pops[1].hide()", 1000);
  pops[1].hide();
  }
  
  //隐藏所有下拉菜单
  function hideSubMenu()
  {
  if(pops[0] != null)pops[0].hide();
  if(pops[1] != null)pops[1].hide();
  }
  
  function clearTimer()
  {
  if (timer != null)
  window.clearTimeout(timer)
  timer = null;
  //alert("OK");
  }
  
  (2)读取分析xml数据文件,打印菜单的脚本
  
  //位置信息
  var m_strTitle = "您的位置->";
  
  // -------- 主菜单样式相关定义 ---------//
  
  //定义主菜单样式
  var m_strMainMenuStyle = "";
  //主菜单项的样式attribute
  var m_strMainMenuItemStyle = "";
  //主菜单项样式Property
  var m_strMMItemProBase = {};
  //主菜单项鼠标悬停样式Property
  var m_strMMItemProMOver = {};
  //菜单项与项之间的分割图片
  var m_strMMItemSplitImg;
  
  // -------- 子菜单样式相关定义 ---------//
  
  //定义子菜单样式
  var m_strSubMenuStyle = "";
  //子菜单项的样式attribute
  var m_strSubMenuItemStyle = "";
  //子菜单项样式Property
  var m_strSMItemProBase = {};
  //子菜单项鼠标悬停样式Property
  var m_strSMItemProMOver = {};
  //子菜单项下边框样式(作为分割线)
  var m_strSMItemBorderB = "";
  
  //定义虚拟目录路径
  var m_strContextPath = "";
  
  //菜单xml数据文件对象
  var m_doc;
  
  //主菜单集合
  var m_objMMList;
  
  var STR_POS_FRONT = "您的位置:";
  
  //loadMenu("main_menu.xml");
  /**
  *加载菜单
  *@param strXMLPath - XML数据文件所在路径及文件名
  */
  function loadMenu(strXMLFile) {
  m_doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
  m_doc.async = false;
  m_doc.load(strXMLFile);
  
  getMainMenuStyle();
  getSubMenuStyle();
  
  //得到主菜单集合
  m_objMMList = m_doc.selectSingleNode("//popmenu/menus").childNodes;
  
  //得到虚拟目录
  if( m_doc.selectSingleNode("//popmenu/context/path") ) {
  m_strContextPath = m_doc.selectSingleNode("//popmenu/context/path").text;
  }
  
  //输出主菜单
  printMainMenu();
  //输出一级子菜单
  printSubMenu();
  
  }
  
  /**
  *鼠标移入移出主菜单样式的改变
  *@param obj - 改变样式的对象
  *@param bolChg - 是否改变样式
  */
  function chgMainMenuStyle(obj,bolChg)
  {
  if ( bolChg ) {//鼠标悬停改变颜色
  for( var pro in m_strMMItemProMOver ) {
  obj.style[pro] = m_strMMItemProMOver[pro];
  }
  } else {//鼠标移出
  obj.style.border = "0";
  for( var pro in m_strMMItemProBase ) {
  obj.style[pro] = m_strMMItemProBase[pro];
  }
  }
  }//end function chgMainMenuStyle(obj,i)
  
  /**
  *鼠标移入移出子菜单样式的改变
  *@param obj - 改变样式的对象
  *@param bolChg - 是否改变样式
  */
  function chgSubMenuStyle(obj,bolChg) {
  if ( bolChg ) {//鼠标悬停改变颜色
  for( var pro in m_strSMItemProMOver ) {
  obj.style[pro] = m_strSMItemProMOver[pro];
  }
  } else {//鼠标移出
  for( var pro in m_strSMItemProBase ) {
  obj.style[pro] = m_strSMItemProBase[pro];
  }
  }
  }//end function chgSubMenuStyle(obj,i)
  
  /**
  *构造节点样式
  *@param strPath 节点路径
  */
  function getNodeStyle(strPath) {
  var strStyle = "";
  if( m_doc.selectSingleNode(strPath) ) {
  var nodeList = m_doc.selectSingleNode(strPath).childNodes;
  for( var i = 0;i < nodeList.length;i ++ ) {
相关内容
赞助商链接