xp风格菜单|萝卜系统下载站

xp风格菜单

context.js

<!--
/**
*@context menu with xp style
*@author: LiXinGang avlee@163.com 2002.3.25
*@version v1.0
*/

// menu object
function contextMenu()
{
this.items = new Array();

this.addItem = function (item)
{
this.items[this.items.length] = item;
}

this.show = function (oDoc)
{
  var strShow = "";
  var i;

  strShow = "<div id=\"rightmenu\" style=\"BACKGROUND-COLOR: #ffffff; BORDER: #000000 1px solid; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; Z-INDEX: 10\">";
  strShow += "<table border=\"0\" height=\"";
  strShow += this.items.length * 20;
  strShow += "\" cellpadding=\"0\" cellspacing=\"0\">";
  strShow += "<tr height=\"3\"><td bgcolor=\"#d0d0ce\" width=\"2\"></td><td>";
  strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=0 cellspacing=0 bgcolor=\"#ffffff\">";
  strShow += "<tr><td bgcolor=\"#d0d0ce\" width=\"23\"></td><td><img src=\" \" height=\"1\" border=\"0\"></td></tr></table>";
  strShow += "</td><td width=\"2\"></td></tr>";
  strShow += "<tr><td bgcolor=\"#d0d0ce\"></td><td>";
  strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=3 cellspacing=0 bgcolor=\"#ffffff\">";
  oDoc.write(strShow);
  for(i=0; i<this.items.length; i++)
  {
   this.items[i].show(oDoc);
  }
  strShow = "</table></td><td></td></tr>";
  strShow += "<tr height=\"3\"><td bgcolor=\"#d0d0ce\"></td><td>";
  strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=0 cellspacing=0 bgcolor=\"#ffffff\">";
  strShow += "<tr><td bgcolor=\"#d0d0ce\" width=\"23\"></td><td><img src=\" \" height=\"1\" border=\"0\"></td></tr></table>";
  strShow += "</td><td></td></tr>";
  strShow += "</table></div>\n";
  oDoc.write(strShow);
}
}

// menu Item object
function contextItem(text, icon, cmd, type)
{
this.text = text ? text : "";
this.icon = icon ? icon : "";
this.cmd = cmd ? cmd : "";
this.type = type ? type : "menu";

this.show = function (oDoc)
{
  var strShow = "";

  if(this.type == "menu")
  {
   strShow += "<tr ";
   strShow += "onmouseover=\"changeStyle(this, 'on');\" ";
   strShow += "onmouseout=\"changeStyle(this, 'out');\" ";
   strShow += "onclick=\"";
   strShow += this.cmd;
   strShow += "\">";
   strShow += "<td class=\"ltdexit\" width=\"16\">";
   if (this.icon == "")
    strShow += " ";
   else {
    strShow += "<img border=\"0\" src=\"";
    strShow += this.icon;
    strShow += "\" width=\"16\" height=\"16\" style=\"POSITION: relative\"></img>";
   }
   strShow += "</td><td class=\"mtdexit\">";
   strShow += this.text;
   strShow += "</td><td class=\"rtdexit\" width=\"5\"> </td></tr>";
  }
  else if (this.type == "separator")
  {
   strShow += "<tr><td class=\"ltdexit\"> </td>";
   strShow += "<td class=\"mtdexit\" colspan=\"2\"><hr color=\"#000000\" size=\"1\"></td></tr>";
  }

  oDoc.write(strShow);
}
}

function makeMenu()
{
var myMenu, item;

var homepage_cmd = "this.style.behavior='url(#default#homepage)';this.setHomePage('http://gamethinking.yeah.net/'); return false;";
var favorate_cmd = "window.external.addFavorite('http://gamethinking.yeah.net/','游戏思想'); return false;";
var viewcode_cmd = "window.location = 'view-source:' + window.location.href";

myMenu = new contextMenu();

item = new contextItem("返回主页", "images/main.gif", "top.location='http://gamethinking.yeah.net/';", "menu");
myMenu.addItem(item);

item = new contextItem("设为主页", "images/myhome.gif", homepage_cmd, "menu");
myMenu.addItem(item);

item = new contextItem("添加到收藏夹", "images/fav_add.gif", favorate_cmd, "menu");
myMenu.addItem(item);

item = new contextItem("联系作者", "images/mail.gif", "location.href='mailto:avlee@163.com'", "menu");
myMenu.addItem(item);

item = new contextItem("", "", "", "separator");
myMenu.addItem(item);

item = new contextItem("察看源码", "images/edit.gif", viewcode_cmd, "menu");
myMenu.addItem(item);

myMenu.show(this.document);

delete item;
delete myMenu;
}

function toggleMenu(isEnable)
{
if(isEnable)
document.oncontextmenu = showMenu;
else
document.oncontextmenu = new function() {return true;};
}

writeStyle();
makeMenu();
document.onclick = hideMenu;
document.oncontextmenu = showMenu;
file://-->

menutest.htm

<HTML>
<HEAD>
<TITLE></TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<META content="MSHTML 5.00.2920.0" name=GENERATOR>
<SCRIPT language="Javascript" src="js/context.js"></SCRIPT>
</HEAD>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="3">
<tr><td valign="top">
  <div id="docBoard" style="width: 100%">
   xp风格的右键菜单<br>
   欢迎使用
  </div>
</td>
<td valign="top" align="right">
  <p><input type="checkbox" name="closerm" onclick="toggleMenu(!this.checked);">关闭右键菜单</p>
</td>
</tr>
</table>
</body>
</HTML>

……

标签:xp风格菜单