原本在寫在 http://www.javazoo.com 的，轉(zhuǎn)過來咯。
使用 YUI 實現(xiàn)右鍵菜單
2006-12-01 08:49:17 / 個人分類：編程設(shè)計
右鍵菜單
是什么? 請看圖
當(dāng)右鍵點在 Test 這個表格框內(nèi)的時候,會彈出? 編輯,復(fù)制,刪除? 這個右鍵菜單,感覺不錯吧? ^_^
?
Yahoo! UI Library 提供了方便的方法來讓你實現(xiàn)這種效果.
?
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Example: ContextMenu (YUI Library)</title><link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css"><scrīpt type="text/javascrīpt" src="../../build/yahoo/yahoo.js"></scrīpt><scrīpt type="text/javascrīpt" src="../../build/event/event.js"></scrīpt><scrīpt type="text/javascrīpt" src="../../build/dom/dom.js"></scrīpt><scrīpt type="text/javascrīpt" src="../../build/animation/animation.js"></scrīpt><scrīpt type="text/javascrīpt" src="../../build/container/container_core.js"></scrīpt><scrīpt type="text/javascrīpt" src="../../build/menu/menu.js"></scrīpt><scrīpt type="text/javascrīpt">
// "load" event handler for the "window" object
YAHOO.example.onWindowLoad = function(p_oEvent) {
// Clone the first ewe so that we can create more later
var ōLI = document.getElementById("test1");
// Define the items for the ewe context menu
var aMenuItems = [
{ text: "編輯", helptext: "Shift + E" },
{ text: "復(fù)制", helptext: "Shift + C" },
{ text: "刪除", helptext: "Shift + D" }
];
// Create the ewe context menu
var ōEweContextMenu = new YAHOO.widget.ContextMenu(
"ewecontextmenu",
{
trigger: document.getElementById("test1"),
itemdata: aMenuItems,
lazyload: true,
effect:{
effect:YAHOO.widget.ContainerEffect.FADE,
duration:0.25
}
}
);
}
// Assign a "load" event handler to the window
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</scrīpt></head><body><table width="208" height="77" border="0" cellpadding="0" cellspacing="1" bordercolor="#00FFFF" bgcolor="#CCCCCC"><tr><td width="97" height="20" bgcolor="#F5F5F5"></td><td width="108" bgcolor="#F5F5F5"></td></tr><tr><td height="20" bgcolor="#F5F5F5"></td><td bgcolor="#F5F5F5" id="test1">test</td></tr><tr><td height="20" bgcolor="#F5F5F5"></td><td bgcolor="#F5F5F5"></td></tr></table></body></html>
這么一點點的代碼就實現(xiàn)了右鍵菜單,是不是很方便,嘿嘿.其實這里邊還有很多沒用的代碼的.當(dāng)然了,這里邊也包含了很多的js文件,這些文件都是要使用的,可不敢隨便就刪除了.
這里邊,
var aMenuItems = [
{ text: "編輯", helptext: "Shift + E" },
{ text: "復(fù)制", helptext: "Shift + C" },
{ text: "刪除", helptext: "Shift + D" }
];
是右鍵菜單數(shù)據(jù),也就是右鍵點擊后展開顯示的內(nèi)容.
var ōEweContextMenu = new YAHOO.widget.ContextMenu 就是具體的定義菜單了.
trigger: document.getElementById("test1"), 是哪些節(jié)點使用右鍵菜單,比如現(xiàn)在是 id 為 test1 的使用,如果想讓多個使用,可以使用xxx.childNodes
具體可以參考 YUI 的 幫助文檔咯.