一个简单的仿xp的js下拉菜单- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个简单的仿xp的js下拉菜单

Javascript: jQuery中isFunction方法的BUG修复; 将函数的实际参数转换成数组的方法; javascript 删除数组中重复项（uniq）; js 巧妙去除数组中的重复项; javascript下一种表单元素获取方法存在的问题; javascript 三种数组复制方法的性能对比; js 多层叠的TAB选项卡; javascript 自动标记来自搜索结果页的关键字; 起点页面传值js,有空研究学习下; javascript 的Document属性和方法集合; JavaScript 使用简略语法创建对象的代码; 使用JQuery进行跨域请求; jquery 经典动画菜单效果代码; jquery 常用操作方法; js提示信息jtip封装代码，可以是图片或文章; javascript面向对象的方式实现的弹出层效果代码; jquery中的sortable排序之后的保存状态的解决方法; js或css实现滚动广告的几种方案; 使用JavaScript库还是自己写代码？; js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)

No. « ‹ 281 282 283 284 › »

技术文章搜索

关键字

Javascript 中的一个简单的仿xp的js下拉菜单

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-08-10 浏览: 141 ::

收藏到网摘: n/a

VML:经典的图片叠加效果(灰色调) JScript 寫 sortNode

　　一个简单的仿xp的js下拉菜单，本来想用在我的网站的后台管理，但后来发现不实用，还是采用了左右框架的树型菜单，但这个程序既然写出来了，贴出来，希望对其它人有用，有兴趣的朋友可以对快捷键功能进行扩展，目前留有接口，但未实现。

menu.htm（菜单主文件）
<html>
<head>
  <title>Noteless Valley(lijun.org)程序示例</title>
  <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <link href="xp_menu.css" rel="stylesheet" type="text/css">
  <script language="javascript" src="xp_menu.js"></script>
  <script language="javascript" for="document" event="onselectstart">

  </script>
  <script language="javascript" for="document" event="onclick">

  </script>
</head>
<body scroll="no" language="javascript" onresize="return window_onresize()" onload="return window_onload()">
  <script language="javascript">

  </script>
  <table border=0 cellpadding=0 cellspacing=0><tr><td height=27>此部分已经被顶部菜单条覆盖</td></tr></table>
  <p id=lblOutput>信息提示区域</p>
</body>
</html>

xp_menu.css（样式表）
body {
FONT-SIZE: 13px;
MARGIN: 0px;
SCROLLBAR-SHADOW-COLOR: silver;
SCROLLBAR-3DLIGHT-COLOR: silver;
LINE-HEIGHT: 20px;
FONT-FAMILY: Verdana, 宋体;
SCROLLBAR-DARKSHADOW-COLOR: silver;
BACKGROUND-COLOR: #ff99cc;
border: none;
}

DIV.MainMenuBG
{
border-right: teal 1px solid;
font-size: 14px;
border-left: #ffffff 1px solid;
cursor: default;
color: #000000;
border-bottom: teal 1px solid;
font-family: Verdana, 宋体;
position: absolute;
background-color: #d6d3ce;
}
DIV.MainMenu
{
border-right: #d6d3ce 1px solid;
padding-right: 8px;
border-top: #d6d3ce 1px solid;
padding-left: 8px;
padding-bottom: 1px;
border-left: #d6d3ce 1px solid;
cursor: default;
padding-top: 1px;
border-bottom: #d6d3ce 1px solid;
position: absolute;
background-color: #d6d3ce;
}
DIV.MainMenuOver
{
border-right: #08246b 1px solid;
padding-right: 8px;
border-top: #08246b 1px solid;
padding-left: 8px;
padding-bottom: 1px;
border-left: #08246b 1px solid;
cursor: default;
padding-top: 1px;
border-bottom: #08246b 1px solid;
position: absolute;
background-color: #b5bed6;
}
DIV.MainMenuClick
{
border-right: #636563 1px solid;
padding-right: 8px;
border-top: #636563 1px solid;
padding-left: 8px;
padding-bottom: 1px;
border-left: #636563 1px solid;
cursor: default;
padding-top: 1px;
border-bottom: #636563 1px solid;
position: absolute;
background-color: #dedbd6;
}
DIV.SubMenuBG
{
border-right: #636563 1px solid;
border-top: #636563 1px solid;
font-size: 14px;
visibility: hidden;
border-left: #636563 1px solid;
color: #000000;
border-bottom: #636563 1px solid;
font-family: Verdana, 宋体;
position: absolute;
background-color: #fffbf7;
}
DIV.SubMenu
{
cursor: default;
position: absolute;
}
DIV.SubMenuOver
{
cursor: default;
position: absolute;
}
TD.ico
{
border-top: #dedbd6 1px solid;
border-left: #dedbd6 1px solid;
border-bottom: #dedbd6 1px solid;
background-color: #dedbd6;
}
TD.icoOver
{
border-top: #08246b 1px solid;
border-left: #08246b 1px solid;
border-bottom: #08246b 1px solid;
background-color: #b5bed6;
border-right-width: 1px;
border-right-color: #08246b;
}
TD.text
{
padding-right: 2px;
border-top: #fffbf7 1px solid;
padding-left: 5px;
border-bottom: #fffbf7 1px solid;
background-color: #fffbf7;
}
TD.textOver
{
padding-right: 2px;
border-top: #08246b 1px solid;
padding-left: 5px;
border-bottom: #08246b 1px solid;
background-color: #b5bed6;
}
TD.skey
{
padding-right: 2px;
border-top: #fffbf7 1px solid;
padding-left: 2px;
border-bottom: #fffbf7 1px solid;
background-color: #fffbf7;
}
TD.skeyOver
{
padding-right: 2px;
border-top: #08246b 1px solid;
padding-left: 2px;
border-bottom: #08246b 1px solid;
background-color: #b5bed6;
}
TD.sub
{
border-right: #fffbf7 1px solid;
border-top: #fffbf7 1px solid;
border-bottom: #fffbf7 1px solid;
background-color: #fffbf7;
}
TD.subOver
{
border-right: #08246b 1px solid;
border-top: #08246b 1px solid;
border-bottom: #08246b 1px solid;
background-color: #b5bed6;
}
DIV.SubMenu TD
{
font-size: 14px;
padding-top: 2px;
}

xp_menu.js（.js包含文件）
<!--
// menu source code

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// 以下为建立菜单的部分
//_______________________________________

//菜单条的结构
function menu_bar(name,ico,text,key,tip,skey,type,cmd) {
  this.name = name;     //名称
  this.ico = ico;      //图标
  this.text = text;     //文字
  this.key = key;      //热键
  this.tip = tip;      //提示
  this.skey = skey;     //快捷键
  this.type = type;     //命令类型，0为弹出下级菜单，1为执行一个命令(跳转到另一个文件)
  this.cmd = cmd;      //下级菜单的名称或命令字符串，根据type的值而定
}

//菜单的结构
function menu(name) {
  this.name = name;      //名称
  this.bar = new Array();   //所包含的菜单条数组
}

//输出一已定义的主菜单，横排的
function popMainMenu(menu,left,top,width,height) {

  var strHTML, posLeft, posTop, i;

  strHTML = "<div id='" + menu.name + "' style='left:" + left + ";top:" + top + ";width:" + width + ";height:" + height + "' class='MainMenuBG'>"
  document.write (strHTML);

  posLeft = 2;
  posTop = 1;
  for (i=0;i<menu.bar.length;i++) {
   strHTML = "<div id='" + menu.bar[i].name + "' nowrap style='left:" + posLeft + ";top:" + posTop + ";' class='MainMenu' " +
        "onmouseover='return menu_onmouseover(this,\"" + menu.bar[i].cmd + "\")' onmouseout='return menu_onmouseout(this)' " +
        "onclick='return menu_onclick(this,\"" + menu.bar[i].cmd + "\")' title='" + menu.bar[i].tip + "'>" + menu.bar[i].text;
   if (menu.bar[i].key!="") {
    strHTML += "(<u>" + menu.bar[i].key + "</u>)";
   }
   strHTML += "</div>";
   document.write (strHTML);
   posLeft += document.all.item(menu.bar[i].name).offsetWidth + 1;
  }

  strHTML = "</div>";
  document.write (strHTML);
}

//输出一个已定义的子菜单，竖排的
function popSubMenu(menu) {

  var strHTML, posLeft, posTop, i;

  strHTML = "<div id='" + menu.name + "' style='left:20;top:30;width:244;height:300;' class='SubMenuBG'>"
  document.write (strHTML);

  posLeft = 1;
  posTop = 1;

  for (i=0;i<menu.bar.length;i++) {
   if (menu.bar[i].name!="\-") {    //如果名称不是“\-”，表示是一个普通菜单条
    strHTML = "<div id='" + menu.bar[i].name + "' style='left:" + posLeft + ";top:" + posTop + ";' class='SubMenu' " +
         "title='" + menu.bar[i].tip + "' " +
         "onmouseover='return bar_onmouseover(this," + menu.bar[i].type + ",\"" + menu.bar[i].cmd + "\")' " +
         "onmouseout='return bar_onmouseout(this," + menu.bar[i].type + ",\"" + menu.bar[i].cmd + "\")' " +
         "onclick='return bar_onclick(this," + menu.bar[i].type + ",\"" + menu.bar[i].cmd + "\")'>" +
         " <table border=0 cellspacing=0 cellpadding=0 width=240>" +
         "    <tr>" +
         "      <td nowrap align=center width=20 id='" + menu.bar[i].name + "_ico' class='ico'>";
    if (menu.bar[i].ico!="") {
     strHTML += "<img border=0 width=16 height=16 src='" + menu.bar[i].ico + "'>";
    }else {
     strHTML += " ";
    }
    strHTML += "</td>" +
         "      <td nowrap id='" + menu.bar[i].name + "_text' class='text'>" + menu.bar[i].text;
    if (menu.bar[i].key!="") { strHTML = strHTML + "(<u>" + menu.bar[i].key + "</u>)"; }
    strHTML += "</td>" +
         "<td nowrap align=right id='" + menu.bar[i].name + "_skey' class='skey'>";
    if (menu.bar[i].skey!="") {
     strHTML += menu.bar[i].skey;
    }else {
     strHTML += " ";
    }
    strHTML += "     </td>" +
         "      <td nowrap align=center width=20 id='" + menu.bar[i].name + "_sub' class='sub'>";
    if (menu.bar[i].type==0) {
     strHTML += "→";
    }else {
     strHTML += "  ";
    }
    strHTML += "</td>" +
         "    </tr>" +
         " </table>" +
         "</div>";
    document.write (strHTML);
    posTop += document.all.item(menu.bar[i].name).offsetHeight;
   }else {       //如果名称是“\-”，表示是一条分隔线
    strHTML = "<div style='left:" + posLeft + ";top:" + posTop + ";' class='SubMenu'>" +
         " <table border=0 cellpadding=0 cellspacing=0 width=240>" +
         "    <tr>" +
         "      <td nowrap style='background-color: #dedbd6;' width=21></td>" +
         "      <td nowrap style='padding-left:5px;padding-top:1px;padding-bottom:1px;'>" +
         "        <table border=0 cellpadding=0 cellspacing=0 width=100%>" +
         "          <tr><td height=1 bgcolor='#636563'></td></tr>" +
         "        </table>" +
         "      </td>" +
         "    </tr>" +
         " </table>" +
         "</div>";
    document.write (strHTML);
    posTop += 3;
   }
  }

  strHTML = "</div>"
  document.write (strHTML);
  document.all.item(menu.name).style.height = posTop+3;    //重设子菜单背景框
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// 以下为操纵菜单的部分
//_________________________________________________

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// 以下为与主文件有关的控制部分，具体使用时需要关注的也仅仅这部分而已
//_____________________________________________________________

var doc_width;    //当前窗口的宽度，随窗口大小改变而改变
var doc_height;    //当前窗口的高度，随窗口大小改变而改变

var mClick = false;   //一级菜单是否被点击，初始一级菜单是未被点击状态
var bMenuClick = false;    //单击是否是在一个菜单上，初始单击不是在一个菜单上
var mnuPrev = new Array();   //当前显示的菜单ID数组，初始为空

function document_onselectstart() {
return false; //屏蔽内容选择功能
}

function window_onresize() {
  //当窗口尺寸变化时改变相应变量的值
  doc_height = window.document.body.offsetHeight;
  doc_width = window.document.body.offsetWidth;
}

function window_onload() {
  //初始化窗口尺寸
  doc_height = window.document.body.offsetHeight;
  doc_width = window.document.body.offsetWidth;
}

//-->

VML:经典的图片叠加效果(灰色调) JScript 寫 sortNode

Javascript 中的 一个简单的仿xp的js下拉菜单

评论 (0) All

Javascript 中的一个简单的仿xp的js下拉菜单