📄 contextdemo.html

📁 很漂亮的javascript菜单
💻 HTML
字号:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html>
<head>
<title>Context Menu Demo (WebFX)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- using doc write to read query string
<link type="text/css" rel="StyleSheet" href="skins/officexp/officexp.css" />
-->
<style type="text/css">

html, body {
	border:		0;
	margin:		0;
	padding:	0;
	background:	ThreeDFace;
	overflow:	auto;
	font:		MessageBox;
	font:		message-box;
}

fieldset, legend {
	font:	MessageBox;
	font:	message-box;
}

fieldset {
	padding:	3px;
}

p, fieldset, textarea {
	margin:	10px;
}

p {
	font:	Message-Box;
	font:	MessageBox;
	margin:	10px;
}

.warning {
	color:	red;
}

a {
	color:	blue;
}

</style>
<script type="text/javascript">

var ie55 = /MSIE ((5\.[56789])|([6789]))/.test( navigator.userAgent ) &&
			navigator.platform == "Win32";

if ( !ie55 ) {
	window.onerror = function () {
		return true;
	};
}

function writeNotSupported() {
	if ( !ie55 ) {
		document.write( "<p class=\"warning\">" +
			"This script only works in Internet Explorer 5.5" +
			" or greater for Windows</p>" );
	}
}

</script>
<script type="text/javascript">

function getQueryString( sProp ) {
	var re = new RegExp( sProp + "=([^\\&]*)", "i" );
	var a = re.exec( document.location.search );
	if ( a == null )
		return "";
	return a[1];
};

function changeCssFile( sCssFile ) {
	var loc = String(document.location);
	var search = document.location.search;
	if ( search != "" )
		loc = loc.replace( search, "" );
	loc = loc + "?css=" + sCssFile;
	document.location.replace( loc );
}

var cssFile = getQueryString( "css" );
if ( cssFile == "" )
	cssFile = "skins/winclassic.css";

document.write("<link type=\"text/css\" rel=\"StyleSheet\" href=\"" + cssFile + "\" />" );

</script>

<script type="text/javascript" src="js/poslib.js"></script>
<script type="text/javascript" src="js/scrollbutton.js"></script>
<script type="text/javascript" src="js/menu4.js"></script>

</head>
<body>

<script type="text/javascript">
//<![CDATA[

// set css file to use for menus
Menu.prototype.cssFile = cssFile;

var tmp;

// Build context menu
var cMenu = new Menu();

var openItem, openNewWinItem;

cMenu.add( openItem = new MenuItem( "Open" ) );
openItem.mnemonic = "o";
cMenu.add( openNewWinItem = new MenuItem( "Open in New Window" ) );
openNewWinItem.mnemonic = "n";
openNewWinItem.target = "_blank";	// open in new window

var backItem, forwardItem, refreshItem;

cMenu.add( backItem = new MenuItem( "Back", function () { window.history.go(-1); }, "images/back.png" ) );
backItem.mnemonic = "b";
cMenu.add( forwardItem = new MenuItem( "Forward", function () { window.history.go(1); }, "images/forward.png" ) );
forwardItem.mnemonic = "o";
cMenu.add( refreshItem = new MenuItem( "Refresh", function () { document.location.reload(); }, "images/refresh.png" ) );
refreshItem.mnemonic = "r";

cMenu.add( new MenuSeparator() );

cMenu.add( tmp = new MenuItem( "WebFX Home", "http://webfx.eae.net", "http://webfx.eae.net/images/favicon.gif" ) );

cMenu.add( new MenuSeparator() );

cMenu.add( tmp = new MenuItem( "View Source", function () {	document.location = "view-source:" + document.location; }, "images/notepad.png" ) );
tmp.mnemonic = "v";


// edit menu
var eMenu = new Menu()

var undoItem, cutItem, copyItem, pasteItem, deleteItem, selectAllItem;

// undo is broken in IE
// eMenu.add( undoItem = new MenuItem( "Undo", function () { document.execCommand( "Undo" ); }, "images/undo.small.png" ) );
// undoItem.mnemonic = "u";
//
//
// eMenu.add( new MenuSeparator() );


eMenu.add( cutItem = new MenuItem( "Cut", function () { document.execCommand( "Cut" ); }, "images/cut.small.png" ) );
cutItem.mnemonic = "t";

eMenu.add( copyItem = new MenuItem( "Copy", function () { document.execCommand( "Copy" ); }, "images/copy.small.png" ) );
copyItem.mnemonic = "c";

eMenu.add( pasteItem = new MenuItem( "Paste", function () { document.execCommand( "Paste" ); }, "images/paste.small.png" ) );
pasteItem.mnemonic = "p";

eMenu.add( deleteItem = new MenuItem( "Delete", function () { document.execCommand( "Delete" ); }, "images/delete.small.png" ) );
deleteItem.mnemonic = "d";


eMenu.add( new MenuSeparator() );


eMenu.add( selectAllItem = new MenuItem( "Select All", function () { document.execCommand( "SelectAll" ); } ) );
selectAllItem.mnemonic = "a";




var oldOpenState = null;	// used to only change when needed
var lastKeyCode = 0;

function rememberKeyCode() {
	lastKeyCode = window.event.keyCode;
}

function showContextMenu() {

	var el = window.event.srcElement;

	// check for edit
	var showEditMenu = el != null &&
						(el.tagName == "INPUT" || el.tagName == "TEXTAREA");

	// check for anchor
	while ( el != null && el.tagName != "A" )
		el = el.parentNode;

	var showOpenItems = el != null && el.tagName == "A";

	if ( showOpenItems != oldOpenState ) {
		openItem.visible		= showOpenItems;
		openNewWinItem.visible	= showOpenItems;
		backItem.visible		= !showOpenItems;
		forwardItem.visible		= !showOpenItems;
		refreshItem.visible		= !showOpenItems;
		oldOpenState = showOpenItems;
	}

	if ( showOpenItems ) {
		openItem.action = openNewWinItem.action = el.href;
	}

	// find left and top
	var left, top;

	if ( showEditMenu )
		el = window.event.srcElement;
	else if ( !showOpenItems )
		el = document.documentElement;

	if ( lastKeyCode == 93 ) {	// context menu key
		left = posLib.getScreenLeft( el );
		top = posLib.getScreenTop( el );
	}
	else {
		left = window.event.screenX;
		top = window.event.screenY;
	}

	if ( showEditMenu ) {

		// undo is broken in IE
		// undoItem.disabled =			!document.queryCommandEnabled( "Undo" );
		cutItem.disabled =			!document.queryCommandEnabled( "Cut" );
		copyItem.disabled =			!document.queryCommandEnabled( "Copy" );
		pasteItem.disabled =		!document.queryCommandEnabled( "Paste" );
		deleteItem.disabled =		!document.queryCommandEnabled( "Delete" );
		selectAllItem.disabled =	!document.queryCommandEnabled( "SelectAll" );

		eMenu.invalidate();
		eMenu.show( left, top );
	}
	else {
		cMenu.invalidate();
		cMenu.show( left, top );
	}

	event.returnValue = false;
	lastKeyCode = 0
};

document.attachEvent( "oncontextmenu", showContextMenu );
document.attachEvent( "onkeyup", rememberKeyCode );

//]]>
</script>

<script type="text/javascript">
writeNotSupported();
</script>

<fieldset>
	<legend>Select Look &amp; Feel</legend>
	<select id="cssSelect">
		<option value="skins/winclassic.css">Windows Classic</option>
		<option value="skins/winxp.css">Windows XP</option>
		<option value="skins/office.css">Office</option>
		<option value="skins/officexp/officexp.css">Office XP</option>
		<option value="skins/qnx/qnx.css">QNX</option>
		<option value="skins/lcars/lcars.css">LCARS</option>
	</select>
	&nbsp;
	<button onclick="changeCssFile( document.getElementById('cssSelect').value )" ID=Button1>Change</button>
</fieldset>

<p>
<a href="#"
	onclick="window.open( document.location,'','toolbar=0,resizable=1,width=270,height=170'); return false">New Win</a>.
	Normal <a href="http://webfx.eae.net">link to http://webfx.eae.net</a>.
</p>

<textarea>
Textarea to test focus
</textarea>

<p>Try bringing up the context menu in the textarea as well.</p>

</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -