论坛首页 → Web前端技术论坛 →

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

浏览 4468 次
锁定老帖子 主题：利用YUI创建简单的右键菜单
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • trace
  • 等级: 一星会员
  • 性别:
  • 文章: 52
  • 积分: 115
  • 来自: 上海
   发表时间：2007-09-18  
 在页面上实现右键菜单（ContextMenu），效果明显，用途广泛，并且，利用YUI，实现起来也不复杂。我参考了YUI的文档之后，设计了一个简单的实现右键菜单的页面。

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

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <title>ContextMenuTest</title>  
  5.   
  6. <!-- CSS for Menu -->  
  7. <!--具体链接需自己修改-->  
  8. <link rel="stylesheet" type="text/css" href="../javascripts/yui/menu/assets/skins/sam/menu.css">  
  9.   
  10. <style type="text/css">  
  11. #Workbench {  
  12.     position:absolute;  
  13.     left:124px;  
  14.     top:57px;  
  15.     width:597px;  
  16.     height:278px;  
  17.     z-index:1;  
  18.     border:#0000FF solid 1px;  
  19. }  
  20. #TestContextMenu {  
  21.     position:relative;  
  22.     width:400px;  
  23.     height:100px;  
  24.     border:#FF0000 solid 1px;  
  25.     left: 10px;  
  26.     top: 10px;  
  27.     background-color:#99CC00;  
  28. }  
  29. body {  
  30.     font-size: 13px;  
  31. }
  32. </style>  
  33. </head>  
  34.   
  35. <body class="yui-skin-sam">  
  36.     <div id="Workbench">  
  37.         <div id="TestContextMenu"></div>  
  38.     </div>  
  39. </body>  
  40. </html>  

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

  1. <!--具体链接需自己修改-->  
  2. <!-- Namespace source file -->  
  3. <script type="text/javascript" src="../javascripts/yui/yahoo/yahoo.js"></script>  
  4.   
  5. <!-- Dependency source files -->  
  6. <script type="text/javascript" src="../javascripts/yui/event/event.js"></script>  
  7. <script type="text/javascript" src="../javascripts/yui/dom/dom.js"></script>  
  8. <script type="text/javascript" src="../javascripts/yui/animation/animation.js"></script>  
  9.   
  10. <!-- Container source file -->  
  11. <script type="text/javascript" src="../javascripts/yui/container/container_core.js"></script>  
  12.   
  13. <!-- Menu source file -->  
  14. <script type="text/javascript" src="../javascripts/yui/menu/menu.js"></script>  

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

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

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

  1. var target = document.getElementById("TestContextMenu");  
  2.   
  3. var aMenuItems = [  
  4.   
  5.            { text: "编辑", helptext: "Shift + E" },   
  6.            { text: "复制", helptext: "Shift + C" },   
  7.            { text: "删除", helptext: "Shift + D" }  
  8.           
  9.    ];  
  10.   
  11. var aContextMenu = new YAHOO.widget.ContextMenu(  
  12.   
  13.             "myContextMenu",   
  14.             {  
  15.                  trigger: target,  
  16.                  itemdata: aMenuItems,  
  17.                  lazyload: true,  
  18.                  effect: {   
  19.                      effect:YAHOO.widget.ContainerEffect.FADE,  
  20.                      duration:0.1  
  21.                  }                                                   
  22.              }   
  23.             
  24.     ); 

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

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

  1. function onContextMenuClick(p_sType, p_aArgs) {  
  2.   
  3.     var oItem = p_aArgs[1]  
  4.       
  5.     if(oItem) {  
  6.       
  7.         switch(oItem.index) {  
  8.           
  9.             case 0:  
  10.                 alert("This is the first Item")  
  11.             break;  
  12.               
  13.             case 1:  
  14.                 alert(oItem)  
  15.             break;  
  16.               
  17.             case 2:  
  18.                 alert(p_aArgs[1])     
  19.             break;  
  20.               
  21.         }  
  22.           
  23.     }  
  24.       
  25. }  
  26.                                       
  27. function onContextMenuRender(p_sType, p_aArgs) {  
  28.      
  29.        this.clickEvent.subscribe(onContextMenuClick);  
  30.                  
  31.    }  
  32.               
  33. aContextMenu.renderEvent.subscribe(onContextMenuRender);  

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

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

跳转论坛:
Global site tag (gtag.js) - Google Analytics