利用YUI创建简单的右键菜单

trace

浏览: 125470 次
性别:
来自: 上海

最近访客更多访客>>

tobesn

north0808

429243408

lleelle

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

YUI JavaScript CSS Yahoo 脚本

在页面上实现右键菜单（ContextMenu），效果明显，用途广泛，并且，利用YUI，实现起来也不复杂。我参考了YUI的文档之后，设计了一个简单的实现右键菜单的页面。

首先，看一看没有写js的页面代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ContextMenuTest</title>
<link rel="stylesheet" type="text/css" href="../javascripts/yui/menu/assets/skins/sam/menu.css">
<style type="text/css">
#Workbench {
position:absolute;
left:124px;
top:57px;
width:597px;
height:278px;
z-index:1;
border:#0000FF solid 1px;
}
#TestContextMenu {
position:relative;
width:400px;
height:100px;
border:#FF0000 solid 1px;
left: 10px;
top: 10px;
background-color:#99CC00;
}
body {
font-size: 13px;
}
</style>
</head>
<body class="yui-skin-sam">
<div id="Workbench">
<div id="TestContextMenu"></div>
</div>
</body>
</html>

可以看到，只有两个div和一些CSS样式。下面，开始写js，首先，导入一些要用到的js文件：

<script type="text/javascript" src="../javascripts/yui/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../javascripts/yui/event/event.js"></script>
<script type="text/javascript" src="../javascripts/yui/dom/dom.js"></script>
<script type="text/javascript" src="../javascripts/yui/animation/animation.js"></script>
<script type="text/javascript" src="../javascripts/yui/container/container_core.js"></script>
<script type="text/javascript" src="../javascripts/yui/menu/menu.js"></script>

在这个页面中，可能不会用到上面所有的文件，但都写在这了。
接着，编写页面中的js脚本。先设计一个函数，并让页面加载完成后调用它：

YAHOO.example.testContextMenu_init = function(p_sType) {
// 当载入了yahoo.js之后，就自动产生了YAHOO.example这个名称空间。
// p_sType 目前还不知道是干什么用的，只是照抄文档上的。
}
YAHOO.util.Event.addListener(window, "load", YAHOO.example.testContextMenu_init);

这样就完成了这个功能。接下来，就该写这个函数里面的内容了。首先，产生一个ContextMenu对象：

var target = document.getElementById("TestContextMenu");
var aMenuItems = [
{ text: "编辑", helptext: "Shift + E" },
{ text: "复制", helptext: "Shift + C" },
{ text: "删除", helptext: "Shift + D" }
];
var aContextMenu = new YAHOO.widget.ContextMenu(
"myContextMenu",
{
trigger: target,
itemdata: aMenuItems,
lazyload: true,
effect: {
effect:YAHOO.widget.ContainerEffect.FADE,
duration:0.1
}
}
);

其中的target就是需要响应右键菜单的区域。aMenuItems是菜单项，aContextMenu就是构造的ContextMenu函数。

接着，设计一些事件响应函数：

function onContextMenuClick(p_sType, p_aArgs) {
var oItem = p_aArgs[1]
if(oItem) {
switch(oItem.index) {
case 0:
alert("This is the first Item")
break;
case 1:
alert(oItem)
break;
case 2:
alert(p_aArgs[1])
break;
}
}
}
function onContextMenuRender(p_sType, p_aArgs) {
this.clickEvent.subscribe(onContextMenuClick);
}
aContextMenu.renderEvent.subscribe(onContextMenuRender);

这里的函数布置顺序也是一般的事件注册顺序。现在，就可以跑跑看了。

ps：在YUI的文档中，有一个GetListItemFromEventTarget()函数，可以从触发右键菜单的元素开始向上追溯到指定的父元素，在一般的页面设计中，都是用得到的。另外，菜单的自定义CSS，也可参考YUI的Menu文档。

分享到：