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. sqlserver 各种判断是否存在(表名、函数、存储过程等)

    库是否存在 if exists(select * from master..sysdatabases where name=N'库名') print 'exists'elseprint 'not ex ...

  2. 【JavaScript】关于js的一些理解

    嵌套函数即作用域链:嵌套函数即闭包 函数表达式即延迟执行 匿名函数----------->实现块级作用域 call会切换到调用的对象参数环境.

  3. Android端百度地图API使用详解

    百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. 百度地图移动版A ...

  4. listen和accept函数

    listen函数是用来设置监听连接的句柄和队列 当listen函数执行完成以后,服务端就已经可以接受客户端来的新连接了,新连接完成以后listen会把客户端的ip,port和连接句柄放在监听队列里面, ...

  5. IDEA 升级14.1提示org/hibernate/build/gradle/publish/auth/maven/AuthenticationManager:Unsupported major.minor version 51.0

    在看到“Unsupported major.minor version 51.0”这样的错误描述时,就基本可以肯定是jdk版本不正确导致.但是提示的类非业务系统,而是来自IDEA.因此去其官网检索了下 ...

  6. jackson使用示例

    Jackson可以轻松的将Java对象转换成json对象和xml文档,同样也可以将json.xml转换成Java对象. Jackson 2.x版提供了三个JAR包供下载: 1. Core库:strea ...

  7. PHP｜开发必知的良好实践

    过滤.验证.转义 所有这些外部资源都不能完全相信 $_GET $_POST $_REQUEST $_COOKIE $argv php://stdin php://input file_get_cont ...

  8. GCC 编译选项(转)

    转:http://www.cnblogs.com/xmphoenix/archive/2011/03/21/1989944.html gcc提供了大量的警告选项,对代码中可能存在的问题提出警 告,通常 ...

  9. A SQLite client library written in Modern C++

    smartdb是一个纯c++11开发,header-only,简洁高效的sqlite封装库. github地址:https://github.com/chxuan/smartdb,如果您觉得不错,请不 ...

  10. LeetCode28 Implement strStr()

    题目: Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if ne ...