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 changestyle(obj, cmd)
{
if(obj) try {
var imgobj = obj.children(0).children(0);
if(cmd == 'on') {
obj.children(0).classname = "ltdfocus";
obj.children(1).classname = "mtdfocus";
obj.children(2).classname = "rtdfocus";
if(imgobj)
{
if(imgobj.tagname.touppercase() == "img")
{
imgobj.style.left = "-1px";
imgobj.style.top = "-1px";
}
}
}
else if(cmd == 'out') {
obj.children(0).classname = "ltdexit";
obj.children(1).classname = "mtdexit";
obj.children(2).classname = "rtdexit";
if(imgobj)
{
if(imgobj.tagname.touppercase() == "img")
{
imgobj.style.left = "0px";
imgobj.style.top = "0px";
}
}
}
}
catch (e) {}
}
function showmenu()
{
var x, y, w, h, ox, oy;
x = event.clientx;
y = event.clienty;
var obj = document.getelementbyid("rightmenu");
if (obj == null)
return true;
ox = document.body.clientwidth;
oy = document.body.clientheight;
if(x > ox y > oy)
return false;
w = obj.offsetwidth;
h = obj.offsetheight;
if((x + w) > ox)
x = x - w;
if((y + h) > oy)
y = y - h;
obj.style.posleft = x + document.body.scrollleft;
obj.style.postop = y + document.body.scrolltop;
obj.style.visibility = "visible";
return false;
}
function hidemenu()
{
if(event.button == 0)
{
var obj = document.getelementbyid("rightmenu");
if (obj == null)
return true;
obj.style.visibility = "hidden";
obj.style.posleft = 0;
obj.style.postop = 0;
}
}
function writestyle()
{
var strstyle = "";
strstyle += "<style type=text/css>";
strstyle += "table {font-family: \"tahoma\",\"verdana\",\"宋体\"; font-size: 9pt}";
strstyle += ".mtdfocus {background-color: #ccccff; border-bottom: #000000 1px solid; border-top: #000000 1px solid; cursor: hand}";
strstyle += ".mtdexit {background-color: #ffffff; border-bottom: #ffffff 1px solid; border-top: #ffffff 1px solid}";
strstyle += ".ltdfocus {background-color: #ccccff; border-bottom: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; cursor: hand}";
strstyle += ".ltdexit {background-color: #d0d0ce; border-bottom: #d0d0ce 1px solid; border-top: #d0d0ce 1px solid; border-left: #d0d0ce 1px solid}";
strstyle += ".rtdfocus {background-color: #ccccff; border-bottom: #000000 1px solid; border-top: #000000 1px solid; border-right: #000000 1px solid; cursor: hand}";
strstyle += ".rtdexit {background-color: #ffffff; border-bottom: #ffffff 1px solid; border-top: #ffffff 1px solid; border-right: #ffffff 1px solid}";
strstyle += "</style>";
document.write(strstyle);
}
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>
Java Asp PHP .Net XML C/C++ CGI VB Jsp J2ee J2se J2me EJB Servlet Tomcat Resin Struts Weblogic Eclipse ANT GUI JMS Web servise IDEA Webphere Hibernate Spring Jboss Applet Swing Socket Javamail Perl Ajax P2P 安全 模式 框架 测试 开源 游戏
Windows XP Windows 2000 Windows 2003 Windows Me Windows 9.x Linux UNIX 注册表 操作系统 服务器 应用服务器
