YUI ContextMenu 鼠标左键弹出

最新推荐文章于 2024-01-29 14:42:48 发布
最新推荐文章于 2024-01-29 14:42:48 发布
阅读量1.5k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： yui stylesheet function html null div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TIYILON/article/details/1511424
本文介绍如何使用 YUI 库实现一个简单的上下文菜单功能。通过监听目标 DOM 元素的点击事件，在鼠标位置弹出菜单。文章提供了一个完整的示例代码，包括 HTML 结构、CSS 样式及 JavaScript 逻辑。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

不得不说,YUI的设计结构是蛮奇怪的。用惯了VCL就知道，操作PopupMenu是非常简单的事情，比如有popup(x.y)方法，直接可以指定弹出的目标。但是YUI有的信息，估计要狠看API和源码才能知道它设计在什么地方去了……

所以现在还是一个例子。例子说明一切问题。没有例子寸步难行。古人有云：吃饱没事干，上网博客逛……

原理：侦听目标DOM对象的单击事件 ，然后在鼠标位置弹出菜单。
下面是来自YUI Blog的完整代码:

 

<!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>Context Menu Example</title>

        <!-- Standard reset and fonts -->
        <link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
        <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">

        <!-- CSS for Menu -->
        <link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">

        <!-- Page-specific styles -->
        <style type="text/css">

            #contextmenutarget {
            
                background-color:#ccc;
                width:400px;
                height:400px;
            
            }
            
        </style>

        <!-- Namespace source file -->
        <script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>

        <!-- Dependency source files -->
        <script type="text/javascript" src="../../build/event/event.js"></script>
        <script type="text/javascript" src="../../build/dom/dom.js"></script>

        <!-- Container source file -->
        <script type="text/javascript" src="../../build/container/container_core.js"></script>

        <!-- Menu source file -->
        <script type="text/javascript" src="../../build/menu/menu.js"></script>

        <!-- Page-specific script -->
        <script type="text/javascript">

            // "load" event handler for the "window" object       

            function onWindowLoad(p_oEvent) {

                // Create the context menu

                var oContextMenu = new YAHOO.widget.Menu("contextmenu1", { visible: false } );


                // Add Items
                
                oContextMenu.addItem("Item One");
                oContextMenu.addItem("Item Two");
                oContextMenu.addItem("Item Three");


                // Render the context menu

                oContextMenu.render(document.body);


                // "click" event handler for the "contextmenutarget" DIV

                function onContextMenuTargetClick(p_oEvent) {
    
                    var nX = YAHOO.util.Event.getPageX(p_oEvent);
                    var nY = YAHOO.util.Event.getPageY(p_oEvent);
                
                    oContextMenu.cfg.applyConfig( { x:nX, y:nY, visible:true } );
                    oContextMenu.cfg.fireQueue();
    
                    YAHOO.util.Event.stopEvent(p_oEvent);

                    var oTarget = YAHOO.util.Event.getTarget(p_oEvent);

                    alert(oTarget);
                
                }
                

                // Add a "click" event handler to the "contextmenutarget" DIV

                YAHOO.util.Event.addListener("contextmenutarget", "click", onContextMenuTargetClick);


                // "click" event handler for the "contextmenutarget" div

                function onDocumentClick(p_oEvent) {
                
                    oContextMenu.hide();
                
                }
                

                // Add a "click" event handler to the document

                YAHOO.util.Event.addListener(document, "click", onDocumentClick);                

            }


            // Assign a "load" event handler to the window

            YAHOO.util.Event.addListener(window, "load", onWindowLoad);
                    
        </script>

    </head>
    <body>
        <div id="contextmenutarget">Click me for a "context menu."</div>        
    </body>
</html>


各位可能还要问，我不就一个转贴嘛，为什么还要写那么多废话。原因是……有些细节可以描述一下，大虾不入法眼，小虾自己拣。

注意这点：var oTarget = YAHOO.util.Event.getTarget(p_oEvent); 是获得Dom对象的关键。因为大部分的ContextMenu还要针对Dom对象（依赖于其上的属性、数据）进行下一步的操作，所以这个时候，只能把它变成一个全局的变量，然后在ContextMenu Item的各自点击中去访问这个对象。

接下来又是代码片断啦……

    var oTarget = null ;

                function onContextMenuTargetClick(p_oEvent) {
    
                    var nX = YAHOO.util.Event.getPageX(p_oEvent);
                    var nY = YAHOO.util.Event.getPageY(p_oEvent);
                
                    oContextMenu.cfg.applyConfig( { x:nX, y:nY, visible:true } );
                    oContextMenu.cfg.fireQueue();
    
                    YAHOO.util.Event.stopEvent(p_oEvent);

                    oTarget = YAHOO.util.Event.getTarget(p_oEvent);

                    //alert(oTarget);
                
                }

在菜单项的点击事件中，如下：

 

function onContextMenuClick(p_sType, p_aArgs, p_oMenu){

//如果右键弹出，下面代码可获得Dom对象
var p_oNode = this.contextEventTarget ;
//如果左键弹出，就要拿那个全局对象了……
            if(p_oNode==null){
                p_oNode= oTarget;
            }

//p_oNode 现在就是Dom对象。
//玩命用吧。别浪费了

}
TIYILON
关注
jquery-contextMenu右键（左键）菜单插件
12-26
功能齐全的上下文菜单处理程序，可处理数千个元素。很实用的插件，在网页列表中可实现鼠标右键点击出现操作菜单，提高用户体验。
ContextMenuStrip左键弹出菜单，右键单击无效
06-28
环境：C# 2008 控件：ContextMenuStrip 特效：左键单击按钮，在按钮左下角（可以自己定位）弹出ContextMenuStrip(弹出式菜单)，右键单击无效(不弹出菜单)。 解压密码：lejun1984@163.com 原创辛苦，请大家支持我。欢迎大家来信交流
左键也能弹出菜单
liniu的专栏
04-18 1520
在C#.NET中添加一个弹出式菜单是很简单的事，通过从Windows Form控件拖一个ContextMenu到窗体上，然后为相应的控件指定contextMenu属性，即可在右键点击该控件的的时候弹出菜单，设置方法如图：图1 左键如何也能弹出菜单呢？用ContextMenu.Show方法，显示菜单；Point结构来定义菜单与相关控件的位置。步骤如下(我用的是SharpD
js中contextmenu、click和mousedown的区别在哪？
最新发布
m0_51160509的博客
01-29 2345
contextmenu：在鼠标右键点击时触发。可以在此事件中执行特定的操作，比如显示自定义的右键菜单或者阻止浏览器默认的上下文菜单弹窗。它是为了满足特定场景下对右键点击的定制化处理需求。click事件是通用的鼠标点击事件，不仅包括鼠标左键的点击，也包括鼠标中键和右键的点击。在click事件中，我们可以通过event.button来区分不同的鼠标按键，其中0表示左键，1表示中键，2表示右键。根据event.button的值，我们可以对不同的鼠标按键点击进行不同的处理操作。
yui.zip_YUI aj_ajax_ajax java_javascript_javascript YUI Ajax
09-23
标题中的"yui.zip_YUI aj_ajax_ajax java_javascript_javascript YUI Ajax"指的是YUI（Yahoo! User Interface Library）库的一个版本，该版本重点强调了AJAX（Asynchronous JavaScript and XML）技术的使用，同时也...
YUI.rar_html_javascript YUI_yui_yui javascript
09-14
2. **弹出对话框**：YUI的Dialog组件可以创建可定制的对话框，用于提示信息、确认操作等。 3. **下拉菜单**：YUI的Menu组件可以轻松创建多级下拉菜单，提升网站导航的用户体验。 4. **拖放功能**：YUI的Drag & Drop...
yuicompressor-2.4.8.jar
05-06
《yuicompressor-2.4.8.jar：前端压缩的得力工具》 在Web开发领域，优化前端性能是至关重要的一步，其中一项常见的优化手段就是对JavaScript代码进行压缩。yuicompressor-2.4.8.jar正是这样一个强大的工具，它能够...
yui_2.9.0前端UI
01-08
YUI 库，全称Yahoo! UI Library。是一组工具和控件，用JavaScript写成, 为的是用DOM 脚本，DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议，对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...
yui 资源包
05-12
《深入理解YUI 3.9.0 r2：界面设计与资源优化》 YUI，全称为Yahoo! User Interface Library，是由雅虎公司开发的一个开源JavaScript库，它旨在简化Web...通过深入理解和熟练运用YUI，可以打造出高效、优雅的Web应用。
vue-contextmenu右键点击菜单栏
coolgirljsinw的博客
03-13 1814
在我使用这个插件的的时候，出现了问题，一个是刷新完之后 第一次点击出现的右侧菜单栏 位置是不正确，二是跟随滚动。6.事件操作 （大部分的示例中都没有传点击参数，注意！是我根据自己的数据进行了调整，需注意 ）1.阻止浏览器默认事件 @contextmenu.prevent="show($event)"4.使用插件 <vue-context-menu></vue-context-menu>2.下载包 npm install vue-contextmenu --save。3.在mian.js里面引入。
WPF中鼠标左键单击Button弹出ContextMenu，让其右键ContextMenu失效
Seal203的博客
06-22 5311
在目前的WPF版本中，很多的控件都有一个ContextMenu的属性，可以设置组件的右键菜单，这点确实是很方便，但是有些时候我们可能会需要当单击鼠标左键才弹出这个ContextMenu，而不是单击鼠标右键(即：当单击鼠标右键的时候不弹出该ContextMenu)，这样我们就能很方便的实现类似Flex中设置弹出式菜单的效果... 首先: 然后，设 　　 　　在目前的WPF版本中，很多的控
WPF 左键单击弹出菜单 ContextMenu
weixin_30263073的博客
08-21 749
WPF 左键单击弹出菜单 ContextMenu 原文:WPF 左键单击弹出菜单 ContextMenuWPF中的ContextMenu在XAML中可直接做出来，但是仅限于右键弹出菜单，如果需要添加左键弹出功能，只需要在事件中添加Click事件 XMAL代码如下 <Button x:Name="s" Content="Button...
ContextMenuStrip 控件 鼠标左键弹出菜单如何实现（转载）
weixin_34190136的博客
09-08 982
右键菜单正常设置，左键菜单不通过contextMenuStrip属性设置，在MouseClick事件里实现 C# codeprivate void controlID_MouseClick(object sender, MouseEventArgs e) { if (e.Button == MouseButtons.Left) { contextMenuStrip...
js响应左右键点击的方法
海涛高软
12-12 693
window.addEventListener("click", function(e) { e.preventDefault(); alert("左键点击"); }) window.addEventListener("contextmenu", function(e) { e.preventDefault(); alert("右键点击") }) FR：徐海涛（hunk Xu)
使用YUI压缩工具简化JavaScript文件压缩流程
3. **错误校验**：在压缩的过程中，YUI Compressor 能够检查代码的语法错误，防止压缩后代码出现运行问题。 4. **跨平台兼容性**：由于使用了Java编写，YUI Compressor 可以在任何安装了Java运行环境的系统上运行，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值