当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个简单的javascript菜单

Javascript
Javascript初学者实例教程(10):图像属性
FF与IE下javascript计算屏幕尺寸
可输入的下拉框
超强图片数量上传无限制
提高代码性能技巧谈—以创建千行表格为例
让插入到 innerHTML 中的 script 跑起来的实现代码
自动设为主页
脚本写的IE右键助手
[原创]checkbox实现全选的多种方法 不断更新
Div+CSS+JS树型菜单,可刷新
CSS+JS构建的图片查看器
如何实现iframe(嵌入式帧)的自适应高度
颜色渐变效果
一条一条新闻向上的滚动 不错
模拟抽奖
[原创]用srcElement实现添加效果
获取对象
带Checkbox的列表框
[原创]图片分页查看
[原创]手机号码本地检测

Javascript 中的 一个简单的javascript菜单


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 193 ::
收藏到网摘: n/a

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>AgetimeMenu Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
 .agetime_bar{
  position:absolute;top:0px;left:0px;height:22px;width:100%;border:1px outset;background-color:RGB(212,208,200);z-index:98;
 }
 .agetime_barItem{
  width:60px;height:20px;border:1px solid RGB(212,208,200);text-align:left;padding-left:10px;
  background:RGB(212,208,200);color:#000000;font-size:9pt;
 }
 .agetime_barItemDown{
  width:60px;height:20px;border:1px inset RGB(212,208,200);text-align:left;padding-left:10px;
  background:#F0F0F0;color:#000000;font-size:9pt;
 }
 .agetime_barItemHover{
  width:60px;height:20px;border:1 outset;text-align:left;padding-left:10px;
  background:#F0F0F0;color:#000000;font-size:9pt;
 }
 .agetime_pad{
  cursor:default;font-size:9pt;width:100%;
 }
 .agetime_padItem{
  width:100%;height:18px;border:1px solid RGB(212,208,200);text-align:left;padding-left:10px;
  background:RGB(212,208,200);color:#000000;font-size:9pt;
 }
 .agetime_padItemFalse{
  padding-left:10px;font-size:9pt; color:#808080;
 }
 .agetime_padItemFalseHover{
  padding-left:10px;font-size:9pt; color:#808080;background-color:#333366;
 }
 .agetime_padItemHover{
  width:100%;height:18px;text-align:left;padding-left:10px;
  background-color:#333366;color:#FFFFFF;font-size:9pt;
 }
 .agetime_padItemDown{
  width:100%;height:18px;text-align:left;padding-left:10px;border:1px inset;
  background-color:#9999CC;color:#FFFFFF;font-size:9pt;
 }
 .agetime_hr{
  border:1px inset;
 }
 .agetime_board{
  background-color:RGB(212,208,200);border:2px outset;
 }
</style>
</head>
<body>
<script language="javascript">
 var menu = agetimeMenu("agetime",
  [
   [
    ["文件",null,null,true,"打开文件"],  //显示文字,方法,命令,状态,状栏显示文字
    ["打开",null,null,false,"打开文件"],
    ["--"],
    ["你好","js","alert('Hello')",true,"一声问候"],
    ["新窗口","ABC","about:blank",true,"弹出ABC窗口"],
    ["空白",null,"about:blank",true,"在当前窗口显示空白页"]
   ],
   [
    ["编辑",null,null,false,"打开文件"],
    ["撤消",null,null,true,"打开文件"],
    ["重做",null,null,true,"打开文件"]
   ],
   [
    ["文件","js","alert('无子菜单')",true,"打开文件"]
   ]
  ]
 );
 //方法为"js"时,命令则为javascript语句,为非"js"值时,命令则是一个URL,而打开这个URL的目标位置则是方法所指定的窗口;
 //["你好","js","alert('Hello'),true,"一声问候"];
 //显示文字为"--"是按钮是一个分隔符;

 function agetimeMenu(id,array){
  var menu=this;
  menu.pad=null;     //装载各个子菜单
  menu.barItems=[];    //菜单条的各位按钮
  menu.pads=[];     //每个子菜单为一个table存放于menu.pad上;
  menu.selectedIndex=-1;  //菜单条选中按钮的索引值
  menu.board=null;    //子菜单面板

  //建立菜单条
  this.crtMenuBar=function(){
   var len=array.length;
   menu.bar = document.body.appendChild(document.createElement('div'));
   menu.bar.className=id+"_bar";
   for(var i=0;i<len;i++){
    menu.barItems[i]=menu.addMenuBarItem(array[i][0],i);
    menu.addMenuPad(array[i],i);
   }
  }

  //子菜