jQuery自定义Web页面鼠标右键菜单

右键菜单是固定的,很多时候，我们需要自定义web页面自定义菜单，指定相应的功能。

　　自定义的原理是：jQuery封装了鼠标右键的点击事件（“contextmenu”），首先屏蔽浏览器原始的点击事件，接着，写自己的需要的显示的右键菜单最后，就是什么时候隐藏显示出的右键菜单了。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

<title>jQuery制作Web页面鼠标右键美化菜单</title>

<style type="text/css">

body{ position:relative;}

ul,li{ margin:0; padding:0; list-style:none; font-size:12px;}

.split{border-bottom: 1px solid gray;}

.popup_menu{position:absolute; z-index:90; border:1px solid #AEAEAE; padding:2px; width:120px;border-radius: 2px;}

.popup_menu a{ display:block; color:#325B8E; text-indent:12px; text-decoration:none; height:26px; line-height:25px; padding-right:5px;}

.popup_menu a:hover{ background:#57B4E4; color:#fff; border-radius: 2px;}

</style>

</head>

<body>

<script type="text/javascript">

var kyPopupMenu={};

kyPopupMenu = (function(){

    return {

        right: function (obj) {

            $('.popup_menu').remove();

            var menu = '<div class="popup_menu app-menu"><ul><li><a url="http://www.cnblogs.com/mini-firework/">firework</a></li><li class="split"></li><li><a url="http://blog.csdn.net/e_real">疯狂的土豆专栏</a></li><li><a url="http://blog.163.com/qiuyg_yc_it/">网易博客</a></li></ul></div>';

            popupMenuApp = $(menu)

            .find('a').attr('href','javascript:;')

            .end().appendTo('body');

            //绑定事件

            $('.app-menu a').on('click', function (){

                window.location.href=$(this).attr("url");

            });

            return popupMenuApp;

        }

    };

})();

//取消右键

$('html').on('contextmenu', function (){return false;}).click(function(){

    $('.popup_menu').hide();

});

//桌面点击右击

$('html').on('contextmenu',function (e){

    var popupmenu = kyPopupMenu.right();

      l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;

      t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;

      popupmenu.css({left: l,top: t}).show();

      return false;

});

</script>

</body>

</html>

效果展示：

jQuery自定义Web页面鼠标右键菜单的更多相关文章

  1. JavaScript 自定义html元素鼠标右键菜单

    自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...

  2. Jquery如何禁止鼠标右键菜单

    jquery中使用contextmenu事件,如果返回true,则允许右键菜单:如果返回false,则禁止右键菜单 导入文件 <script type="text/javascript ...

  3. js自定义鼠标右键菜单

    document.oncontextmenu = function(e) { return false; } document.onmousedown = function(e) { switch(e ...

  4. OpenLayers 3 之 加入地图鼠标右键菜单

    加入右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu.当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...

  5. 如何在C#添加鼠标右键菜单

    C#添加鼠标右键方法步骤: 1 选中要添加右键功能的Form或者控件,打开控件的设计页面. 2 从工具箱中找到ContextMenuStrip控件,将这个控件拖曳到Form或者控件的设计页面上.这时系 ...

  6. jquery-11 如何制作鼠标右键菜单

    jquery-11 如何制作鼠标右键菜单 一.总结 一句话总结:核心原理:找到右键菜单事件contextmenu,return false去掉默认事件,然后判断用户是否点的右键,然后在鼠标的位置显示菜 ...

  7. Qt creator 创建鼠标右键菜单 (不新建类)

    界面 步骤 打开你的界面文件并选中你要添加右键的控件,选择“CustomContextMenu” 右键选择“转到槽...” -> customContextMenuRequested 插入下面代 ...

  8. 将EmEditor加入到鼠标右键菜单

    在清理系统的时候,无意中将EmEditor的鼠标右键功能给清理掉了,在EmEditor的配置中又没有找到如何加入到鼠标右键菜单的方法,只好使用导入注册表功能了,以下的代码,拷贝到记事本中,保存为EmE ...

  9. JAVA GUI学习 - JPopupMenu鼠标右键菜单组件学习

    public class JPopmenuKnow { public void test() { //为表格添加鼠标右键菜单 JMenuItem jMenuItemFileInfo = new JMe ...

随机推荐

  1. C#程序通过模板自动创建Word文档

    引言:前段时间有项目要用c#生成Word格式的计算报告,通过网络查找到很多内容,但是都很凌乱,于是自己决定将具体的步骤总结整理出来,以便于更好的交流和以后相似问题可以迅速的解决! 现通过具体的示例演示 ...

  2. C#将html导出到word（基于wps）

    由于客户需要,我们需要实现将网页导出到word中的功能,在此过程中,尝试使用过openoffice.itext.wordapi等各种方法,都不尽如人意.openoffice导出的问题图片信息在word ...

  3. UTF-8 BOM(EF BB BF)

    原标题:link标签和script标签跑到body下面,网页顶部有空白,出现“锘匡豢”乱码,UTF-8 BOM,EF BB BF 来自:http://tunps.com/link-and-script ...

  4. Some tips on using HashSet<T> and List<T>

    This article is written based on my colleague's review Most of the times, when I want to use a colle ...

  5. Center OS mongodb安装

    一.下载        1.#cd /usr/local/src     2.#wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2. ...

  6. Javascript Date原型方法

    // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占 ...

  7. app 性能优化的那些事

    来源:树下的老男孩 链接:http://www.jianshu.com/p/5cf9ac335aec iPhone上面的应用一直都是以流畅的操作体验而著称,但是由于之前开发人员把注意力更多的放在开发功 ...

  8. Aggressive cows 二分不仅仅是查找

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7083   Accepted: 3522 Description Farme ...

  9. 互联网时代的社会语言学：基于SNS的文本数据挖掘

    今年上半年,我在人人网实习了一段时间,期间得到了很多宝贵的数据,并做了一些还算有意义的事情,在这里和大家一块儿分享.感谢人人网提供的数据 与工作环境,感谢赵继承博士.詹卫东老师的支持和建议.在这项工作 ...

  10. [Java] 关键字final、static使用总结

    一.final 根据程序上下文环境,Java关键字final有“这是无法改变的”或者“终态的”含义,它可以修饰非抽象类.非抽象类成员方法和变量.你可能出于两种理解而需要阻止改变:设计或效率.final ...