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. Codeforces Round #290 (Div. 2) A. Fox And Snake 水题

    A. Fox And Snake 题目连接: http://codeforces.com/contest/510/problem/A Description Fox Ciel starts to le ...

  2. Codeforces Round #264 (Div. 2) C

    题目: C. Gargari and Bishops time limit per test 3 seconds memory limit per test 256 megabytes input s ...

  3. zoj3820 Building Fire Stations 树的中心

    题意:n个点的树,给出n-1条边,每条边长都是1,两个点建立防火站,使得其他点到防火站的最远距离最短. 思路:比赛的时候和队友一开始想是把这两个点拎起来,使得层数最少,有点像是树的中心,于是就猜测是将 ...

  4. cocos2dx的图片载入

    //data: 图片文件数据 dataLen: 文件长度 bool Image::initWithImageData(const unsigned char * data, ssize_t dataL ...

  5. Grunt打造前端自动化工作流

    HTML去掉注析.换行符 - HtmlMin CSS文件压缩合并 – CssMinify JS代码风格检查 – JsHint JS代码压缩 – Uglyfy image压缩 - imagemin ht ...

  6. RMI、RPC、SOAP通讯技术介绍及比对 - XML/SOAP

    RMI.RPC.SOAP通信技术介绍及比对 1.RMI 使用java的程序员,对于RMI(RemoteMethod Invoke,远程方法调用)一定不陌生,在java中,为了在分布式应用开发时,能够方 ...

  7. Quartz.Net实现定时任务调度

    Quartz.Net介绍: Quartz一个开源的作业调度框架,OpenSymphony的开源项目.Quartz.Net 是Quartz的C#移植版本. 它一些很好的特性: 1:支持集群,作业分组,作 ...

  8. 实现O(1)获取最大最小值的栈----java

    原文:http://blog.csdn.net/sheepmu/article/details/38459165 实现O(1)获取最大最小值的栈和队列----java 一.如何实现包含获取最小值函数的 ...

  9. [Java] Web开发HTTP状态码整理

    HTTP状态码(HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码.它由 RFC 2616 规范定义的,并得到RFC 2518.RFC 2817.RFC 2295.R ...

  10. 使用Excel批量更改或插入SQL语句

    在平常中我们可以通过使用SQL批量更新或新增更新数据库数据,对于这些都是有逻辑的数据可以这样处理但是对于无逻辑的数据我们如何处理(这里的数据比较多). 我是通过Excel的方式来处理的.以下已插入为例 ...