PeterChan's Own Space

 

Yahoo! UI Library 使用笔记

原本在写在 http://www.javazoo.com 的，转过来咯。

使用 YUI 实现右键菜单

2006-12-01 08:49:17 / 个人分类：编程设计

右键菜单 是什么? 请看图
当右键点在 Test 这个表格框内的时候,会弹出  编辑,复制,删除  这个右键菜单,感觉不错吧? ^_^
 
Yahoo! UI Library 提供了方便的方法来让你实现这种效果.
 
 

<!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"><!-- Namespace source file --><scrīpt type="text/javascrīpt" src="../../build/yahoo/yahoo.js"></scrīpt><!-- Dependency source files --><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><!-- Container source file --><scrīpt type="text/javascrīpt" src="../../build/container/container_core.js"></scrīpt><!-- Menu source file --><scrīpt type="text/javascrīpt" src="../../build/menu/menu.js"></scrīpt><!-- Page-specific 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: "复制", 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>

这么一点点的代码就实现了右键菜单,是不是很方便,嘿嘿.其实这里边还有很多没用的代码的.当然了,这里边也包含了很多的js文件,这些文件都是要使用的,可不敢随便就删除了.

这里边, 

var aMenuItems = [
                        { text: "编辑", helptext: "Shift + E" }, 
                        { text: "复制", helptext: "Shift + C" }, 
                        { text: "删除", helptext: "Shift + D" }
                    ];

是右键菜单数据,也就是右键点击后展开显示的内容.
var ōEweContextMenu = new YAHOO.widget.ContextMenu 就是具体的定义菜单了.
trigger: document.getElementById("test1"), 是哪些节点使用右键菜单,比如现在是 id 为 test1 的使用,如果想让多个使用,可以使用xxx.childNodes
具体可以参考 YUI 的 帮助文档咯.

posted on 2006-12-21 16:14 PeterChan 阅读(1192) 评论(0)  编辑  收藏 所属分类: Ajax


只有注册用户登录后才能发表评论。
网站导航:
 

导航

统计

常用链接

留言簿(1)

随笔分类

随笔档案

文章分类

友情链接

推荐网站

搜索

最新评论

阅读排行榜

评论排行榜