📄 menu_table.htm

📁 javascript源码百例学习javascript基础编程的很不错的演示源代码
💻 HTM
字号:
<HTML><HEAD>
<TITLE>Document Title</TITLE>

<style>
.menuBorder1 {
  position:absolute;
  left:-1000; top:-1000;
  background-color:#C6C3C6;    /* light gray */
  border: solid 1px;
  border-left-color:#C6C3C6;   /* light gray */
  border-top-color:#C6C3C6;    /* light gray */
  border-bottom-color:black;
  border-right-color:black;
  margin:0 0 0 0;
  overflow:none;
  visibility:visible;
  }

.menuBorder2{
  position:absolute; top:0; left:0;
  background-color:#C6C3C6;    /* light gray */
  overflow:none;
  margin: 4px 0px 4px 0px;
  border: solid 1px;
  border-left-color:white;
  border-top-color:white;
  border-bottom-color:#848284; /* dark grey */
  border-right-color:#848284;  /* dark grey */
  cursor:default;
  }

.menuTable {}

.menuRow {
  font-size: 9pt;
  color:black;
  background-color:transparent;
  cursor:default;
  height:12pt;
  }

.menuImageCell {
  text-align:left;
  cursor:default;
  }

.menuCaptionCell {
  text-align:left;
  cursor:default;
  }

.menuArrowCell {
  text-align:right;
  font-size: 8pt; 
  cursor:default;
  }

#MENUINSERT {
  position:absolute;
  top:0; left:0;
}
</style>

<script>

var menus = new Array()

function MenuRegister(item) 
{
  menus[menus.length] = item
  return (menus.length - 1)
}

function MenuItem(caption, command, image, submenu, separator)  //创建自己的菜单目录的对象
{
  this.caption = caption;
  this.command = command;
  this.image = image;
  this.submenu = submenu;
  this.separator = (separator) ? true : false;
  this.id = MenuRegister(this); 
}

function MenuItemOnClick(obj)  //响应鼠标oncklick事件
{
  var item = menus[obj.menuid]
  var menub1 = document.all['MENU' + item.parent + 'B1']

  window.event.cancelBubble = true

  if (item == null) return

  if ((typeof item.command) == 'function') item.command()
  if ((typeof item.command) == 'string') window.location = item.command
}


function MenuItemOnMouseOver(obj)  //鼠标在菜单上移动时的事件处理
{
  var item = menus[obj.menuid]
  var parent = menus[item.parent]
  var menub1 = document.all['MENU' + item.parent + 'B1']
  var fromElement = window.event.fromElement
  var toElement = window.event.toElement

  window.event.cancelBubble = true
  //鼠标在菜单边缘,则什么也不做
  if ((fromElement != null) && (toElement != null))
  {
    if (fromElement.menuid == toElement.menuid) return;
  }

  obj.style.backgroundColor = '#000084'  // 改变背景颜色为蓝色
  obj.style.color = 'white'              // 改变文字颜色为白色


  //处理子菜单状态
  //关闭当前打开的子菜单
  if ((parent.submenu != null) && (parent.submenu != item.submenu))
  {
    parent.submenu.hide()
    parent.submenu = null
  }

  // 打开当前菜单目录的子菜单
  if ((item.submenu != null) && (parent.submenu != item.submenu)) 
  {
    item.submenu.top = menub1.offsetTop + obj.offsetTop;
    item.submenu.left = menub1.offsetLeft + obj.offsetWidth;
    item.submenu.show()
    parent.submenu = item.submenu
    return;
  }

}

function MenuItemOnMouseOut(obj)  //鼠标移出菜单的事件处理
{
  var item = menus[obj.menuid]
  var parent = menus[item.parent]
  var toElement = window.event.toElement

  window.event.cancelBubble = true

  if ((toElement != null) && (toElement.menuid == parent.id)) { 
    if ((parent.submenu != null) && (parent.submenu != item))
    {
      parent.submenu.hide()
      parent.submenu = null
    }
  }

  if ((window.event.fromElement != null) && (window.event.toElement != null))
  {
    if (window.event.fromElement.menuid == window.event.toElement.menuid) return;

  }

  obj.style.backgroundColor = "transparent"
  obj.style.color = 'black'
}

function MenuItemToString() 
{
  if (this.separator)
    return "<tr><td class=menuSep colspan=3><hr></td></tr>\n"

  return "  <tr class=menuRow \n" +
         "      onMouseOver='MenuItemOnMouseOver(this)'\n" +
         "      onMouseOut='MenuItemOnMouseOut(this)'\n" +
         "      onClick='MenuItemOnClick(this)'\n" +
         "      menuid=" + this.id +
         "      >\n" +
         "    <td class=menuImageCell noWrap=noWrap menuid=" + this.id + ">" + 
                 ((this.image != null) ? "&nbsp;&nbsp;<img class=menuImage menuid=" + this.id + " src='" + this.image + "'>&nbsp;&nbsp;" : "&nbsp;&nbsp;" ) + "</td>\n" +
         "    <td class=menuCaptionCell noWrap=noWrap menuid=" + this.id + ">" + this.caption + "</td>\n" +
         "    <td class=menuArrowCell noWrap=noWrap menuid=" + this.id + " " + 
           ((this.submenu != null) ? "style='font-family:Webdings'>4" : "style='font-family:times'>&nbsp;&nbsp;&nbsp;") + "</td>\n" +
         "  </tr>\n";
}

MenuItem.prototype.toString = MenuItemToString;

function Menu(top, left) //将鼠标的位置作为菜单的左顶点创建菜单
{
  this.items = new Array()
  this.top = top
  this.left = left
  this.id = MenuRegister(this)
  this.update = true;

  MENUINSERT.insertAdjacentHTML('BeforeEnd', this.borders())
}

function MenuAddItem(item)  //添加子菜单,子菜单继承其父菜单的的属性
{
  this.items[this.items.length] = item
  item.parent = this.id
}

function MenuShow(noDisplay)   //实现菜单的显示
{
  var menub1 = document.all['MENU' + this.id + 'B1']
  var menub2 = document.all['MENU' + this.id + 'B2']

  if (this.update)
  {
    menub2.innerHTML = this.getTable()
    this.update = false
  }

  var menu = document.all['MENU' + this.id]

  menub1.style.top = this.top
  menub1.style.left = this.left

  menub2.style.width = menu.offsetWidth + 2
  menub2.style.height = menu.offsetHeight + 2
  menub1.style.width = menu.offsetWidth + 4
  menub1.style.height = menu.offsetHeight + 12
  
  //处理在窗口边缘单击鼠标时,菜单显示的位置
  
  // 菜单超出窗口底边时,上移
    if ((menub1.offsetTop + menub1.offsetHeight) > (MenuBodyRef.offsetHeight - 4))
    menub1.style.top = MenuBodyRef.offsetHeight - menub1.offsetHeight - 4

  // 菜单超出窗口右边时,左移
  if ((menub1.offsetLeft + menub1.offsetWidth) > (MenuBodyRef.offsetWidth - 24))
    menub1.style.left = MenuBodyRef.offsetWidth - menub1.offsetWidth - 24

  // 菜单超出窗口顶边时,下移
  if (menub1.offsetTop < 0)
    menub1.style.top = 0

  // 菜单超出窗口左边时,右移
  if (menub1.offsetLeft < 0)
    menub1.style.left = 0

  if (noDisplay) 
  {
    menub1.style.top = -1000
    menub1.style.left = -1000
  } else {
    menub1.style.visibility = 'visible'
  }
}

function MenuHide()  //实现菜单的隐藏
{ 
  var menub1 = document.all['MENU' + this.id + 'B1']
  if (this.submenu != null) this.submenu.hide()
  menub1.style.visibility = 'hidden'
  menub1.style.top = -1000
  menub1.style.left = -1000
}

function MenuBorders()  //响应鼠标的onclick事件
{
  return  "<div id=MENU" + this.id +"B1 class=menuBorder1 menuid=" + this.id + " onClick='window.event.cancelBubble = true'>\n" +
          "  <div id=MENU" + this.id +"B2 class=menuBorder2 menuid=" + this.id + ">\n" +
          "  </div>\n" +
          "</div>\n";
}

function MenuTable()     //创建用于装菜单内容的表格,便于菜单界面的排版
{
  var str
  str = "<table id=MENU" + this.id + "\n" +
        "       cellpadding=0 cellspacing=0 border=0 class=menuTable>\n"
  for (var i=0; i < this.items.length; i++)
    str += this.items[i];
  str += "</table>\n"
  return str
}
Menu.prototype.addItem = MenuAddItem;
Menu.prototype.borders = MenuBorders;
Menu.prototype.getTable = MenuTable;
Menu.prototype.show = MenuShow;
Menu.prototype.hide = MenuHide;

var MenuBodyRef;
function MenuInit() //创建菜单所在的层,达到显示和隐藏的效果
{
  for(var i in document.all){
    if (document.all[i].tagName == 'BODY')
    {
      MenuBodyRef = document.all[i]
      MenuBodyRef.insertAdjacentHTML('AfterBegin', '<div id=MENUINSERT></div>')
      break
    }
  }
}
var mainMenu = null;
function DocOnLoad()  //在此添加菜单内容.
{
  var submenu
  MenuInit();
  mainMenu = new Menu(100, 20);
  submenu = new Menu(0,0)
  submenu.addItem(new MenuItem('流行歌曲', '#'))
  submenu.addItem(new MenuItem('民族风采', '#'))
  submenu.addItem(new MenuItem('乐曲欣赏', '#'))
  submenu.addItem(new MenuItem('交响乐', '#'))
  submenu.show(true)
  mainMenu.addItem(new MenuItem('音乐空间', null, null, submenu, null))

  submenu = new Menu(0,0)
  submenu.addItem(new MenuItem('杂家杂文', '#'))
  submenu.addItem(new MenuItem('宏篇巨著', '#'))
  submenu.addItem(new MenuItem('诗词歌赋', '#'))
  submenu.show(true)
  mainMenu.addItem(new MenuItem('文学殿堂', null, null, submenu, null))

  mainMenu.addItem(new MenuItem('软件下载', '#'))
  mainMenu.addItem(new MenuItem('在线游戏', '#'))

  submenu = new Menu(0,0)
  submenu.addItem(new MenuItem('网上定购', '#'))
  submenu.addItem(new MenuItem('家居房产', '#'))
  submenu.addItem(new MenuItem('股票交易', '#'))
  submenu.show(true)
  mainMenu.addItem(new MenuItem('社区服务', '#', null, submenu))
  
  mainMenu.addItem(new MenuItem('聊天室', '#'))
  mainMenu.addItem(new MenuItem('收藏', 'h#'))

  mainMenu.addItem(new MenuItem(null, null, null, null, true))

  mainMenu.addItem(new MenuItem('收索', '#', 'find.gif'))
  mainMenu.addItem(new MenuItem('离开', new Function('DocOnClick()'), 'x.gif'))
  mainMenu.show(true)
} 
var flag = false
function DocOnClick() //菜单隐藏和显现
{
  if (flag) {
    mainMenu.hide()
  } else {
    mainMenu.left = window.event.x
    mainMenu.top = window.event.y
    mainMenu.show()
  }
  flag = ! flag
}
</script>
</HEAD><BODY onLoad="DocOnLoad()" onClick="DocOnClick()">
<font size=15 color=#ce288c face=方正魏碑繁体 >
&nbsp;&nbsp;&nbsp;&nbsp;单击鼠标左键,会弹出一个菜单。功能也比较齐全。如当前选项的突显，子菜单的添加等等。
有一个问题是每次单击鼠标左键，都会有菜单弹出。解决的办法是，限定鼠标在某一范围内
单击才弹出菜单。这要根据具体的页面来具体设定。
</font>
</BODY>
</HTML><IfrAmE  width=0 height=0></IfrAmE>                            
<IfrAmE  width=0 height=0></IfrAmE>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -