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 377A. Puzzles 水题

    A. Puzzles Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset/problem/33 ...

  2. Shadow Mapping 的原理与实践（一）

    早在上世纪七十年代末,Williams在他的“Casting Curved Shadows on Curved Surface”一文中提出了名为Shadow Map的阴影生成技术.之后,他人在此基础上 ...

  3. android activity 跳转传值问题研究

    intent = new Intent(); intent.setClass(LoginActivity.this, RegActivity.class); startActivity(intent) ...

  4. Spark目录

    1. Spark1.0.0 应用程序部署工具spark-submit 2. Spark Streaming的编程模型 3. 使用java api操作HDFS文件 4. 用SBT编译Spark的Word ...

  5. 【优先队列】HDU 1873——看病找医生

    来源:点击打开链接 看路径记录的BFS之前,再看一遍优先队列的用法. 优先队列的排序规则可以用运算符重载的方式完成,通常意义下,应该用friend bool operator <进行重载. #i ...

  6. Android系统中设置TextView等的行间距

    1.android:lineSpacingExtra 设置行间距,如”2dp”. 2.android:lineSpacingMultiplier 设置行间距的倍数,如”2″.

  7. 小白日记45：kali渗透测试之Web渗透-SqlMap自动注入（三）-sqlmap参数详解-Optimization,Injection,Detection,Techniques,Fingerprint

    sqlmap自动注入 Optimization [优化性能参数,可提高效率] -o:指定前三个参数(--predict-output.--keep-alive.--null-connection) - ...

  8. CSS 之 控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...

  9. Android 高级UI设计笔记14：Gallery（画廊控件）之 3D图片浏览

    1. 利用Gallery组件实现 3D图片浏览器的功能,如下: 2. 下面是详细的实现过程如下: (1)这里我是测试性代码,我的图片是自己添加到res/drawable/目录下的,如下: 但是开发中不 ...

  10. (六)u-boot2013.01.01 for TQ210：《精简u-boot文件目录，定制自己的目标板》

    1. 删改U-boot代码结构 把不用到的和与我们s5pv210移植无关的硬件平台代码统统删除,眼不见为净.这样代码看起来就干净利落多了. 1.1.进入arch目录,删掉除arm以外的目录 处理前: ...