xp风格菜单

　2007-11-27 17:44:42　来源：WEB开发网　　　

核心提示：网易的个人主页收费了，顺便把以前写的一些东西贴出来，xp风格菜单，或许可以用用，xp风格菜单context.js<!--/** *@context menu with xp style *@author: LiXinGang avlee@163.com 2002.3.25 *@version v1.0 *//

网易的个人主页收费了，顺便把以前写的一些东西贴出来，或许可以用用。

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>