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. Effective C++笔记04：设计与声明

    条款18:让接口easy被正确使用,不易被误用 1,好的接口非常easy被正确使用,不easy被误用.你应该在你的全部接口中努力达成这些性质. 2,"促进正使用"的办法包含接口的一 ...

  2. The sound of silence引发的关于互联网以及教育的利弊思考

    “茫茫人海里,人群跟著人群,我们无时无刻不感到孤寂.停下来让我们好好沟通吧,否则人类的关系将日形恶化,沦为新世纪科技的牺牲品” ------- Simon 说实话,我第一次看<毕业生>应该 ...

  3. [Angular2 Router] Using snapshot in Router

    In the application, we have heros list, when click each hero, will redirect to hero detail view. Tha ...

  4. Map生成器 map适配器如今能够使用各种不同的Generator,iterator和常量值的组合来填充Map初始化对象

    Map生成器 map适配器如今能够使用各种不同的Generator,iterator和常量值的组合来填充Map初始化对象 package org.rui.collection2.map; /** * ...

  5. 信号之sigprocmask函数

    一个进程的信号屏蔽字规定了当前阻塞而不能递送给该进程的信号集.调用函数sigprocmask可以检测或更改其信号屏蔽字,或者在一个步骤中同时执行这两个操作. #include <signal.h ...

  6. Anatomy of the Linux kernel--转

    ref:http://www.ibm.com/developerworks/linux/library/l-linux-kernel/?S_TACT=105AGX52&S_CMP=cn-a-l ...

  7. PHP header 的几种用法

    跳转页面 header('Location:'.$url); //Location和":"之间无空格. 声明content-type header('content-type:te ...

  8. iOS开发 - 一个天真的搜索控制器的独白

    文/Azen(简书作者)原文链接:http://www.jianshu.com/p/6d5327111511著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 正文 一.关于横向模块开发 ...

  9. 2. Android框架和工具之 Volley

    Java基础知识强化之网络编程笔记23:Android网络通信之 Volley(Google开源网络通信库)

  10. 【开源项目6】介绍MenuDrawer这个牛x的控件，实现左右出菜单，上下出菜单

    现在很多应用都很潇洒的从左边屏幕手势一划出个左边的隐藏菜单,右边一划出个隐藏菜单,上边一划出个隐藏菜单,下边一划出个隐藏菜单.或者像android的API16左右的激活列表项的功能.很多人肯定都很着迷 ...