连载:
网页中的自定义右键菜单越来越普遍,自定义右键菜单可以增强用户体验,让用户使用软件更加的简便,今天我们就来基于Bootstrap来开发自己的自定义右键菜单。
一、首先,准备好自定义菜单,供单击右键展示; 菜单默认不可见,可以通过 style="display:block" 进行调试预览;
<ul class="dropdown-menu"> <li> <a href="javascript:;">添加</a> </li> <li> <a href="javascript:;">删除</a> </li> <li> <a href="javascript:;">关于我们</a> </li> </ul>
二、实现点击右键显示自定义菜单;
正确的显示右键菜单,我们需要完成以下3个步骤:
1.右键菜单是一种事件行为; 注册事件,监听浏览器的右键菜单;
2.默认情况下,出现浏览器系统菜单; 阻止浏览器默认事件行为;
3.显示自定义菜单; 根据用户点击的坐标位置,设置自定义菜单的位置,然后进行显示;
$(function(){ //页面文档对象注册上下文(右键)菜单事件 $(document).on("contextmenu",function(event){ var pageX = event.pageX;//鼠标单击的x坐标 var pageY = event.pageY;//鼠标单击的y坐标 //获取菜单并设置菜单的位置 $("#contextMenu").css({ left:pageX+"px",//设置菜单离页面左边距离,left等效于x坐标 top:pageY+"px"//设置菜单离页面上边距离,top等效于y坐标 }).stop().fadeIn(500);//显示使用淡入效果,比如不需要动画可以使用show()替换; event.preventDefault();//阻止浏览器与事件相关的默认行为;此处就是弹出右键菜单 }); });
三、隐藏自定义菜单;当用户点击菜单某一项或点击其他区域进行隐藏;
实现方式:用户使用鼠标的左键或中键都要进行自定义菜单的隐藏;设计思路与默认浏览器隐藏菜单方式一致;
//文档对象注册鼠标按下事件; $(document).on("mousedown",function(event){ //button等于0代表左键,button等于1代表中键 if(event.button==0 || event.button==1){ $("#contextMenu").stop().fadeOut(200);//获取菜单停止动画,进行隐藏使用淡出效果 } });
实现方式:判断横向位置(pageX)+自定义菜单宽度之和,如果超过页面宽度及为溢出,需要特殊处理;
//文档对象注册上下文(右键)菜单事件 $(document).on("contextmenu",function(event){ var pageX = event.pageX;//鼠标单击的x坐标 var pageY = event.pageY;//鼠标单击的y坐标 //获取菜单 var contextMenu = $("#contextMenu"); var cssObj = { top:pageY+"px",//设置菜单离页面上边距离,top等效于y坐标 left:pageX+"px"//设置菜单离页面左边距离,left等效于x坐标 }; //判断横向位置(pageX)+自定义菜单宽度之和,如果超过页面宽度及为溢出,需要特殊处理; var menuWidth = contextMenu.width(); var pageWidth = $(document).width(); if(pageX+contextMenu.width()>pageWidth){ cssObj.left = pageWidth-menuWidth-5+"px"; //-5是预留右边一点空隙,距离右边太紧不太美观; } //设置菜单的位置 $("#contextMenu").css(cssObj).stop().fadeIn(200);//显示使用淡入效果,比如不需要动画可以使用show()替换; event.preventDefault();//阻止浏览器与事件相关的默认行为;此处就是弹出右键菜单 });
如果你是按照本文章步骤进行编写,那么你只需要打开你的自己网页,就可以看到正确的效果了,Over。
相关推荐
右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap...
这是一款基于bootstrap的jquery右键菜单插件。该bootstrap右键菜单使用Bootstrap dropdown组件来制作,并通过tether插件进行定位,具有多级菜单,灵活,响应式等特点。
【Java技术】教你用Bootstrap开发漂亮的前端界面
今天我们要来分享一款很实用的jQuery右键菜单插件,这款右键菜单插件的样式是基于Bootstrap的,因此外观开起来比较简洁清新。这款jQuery右键菜单最大的特点是点击菜单项后,将会在页面右上方弹出很漂亮的提示框,...
这次我们要分享的也是一款JavaScript右键菜单插件,它的外观是基于Bootstrap的,因此UI比之前那款要漂亮许多,另外这款右键菜单插件也支持自定义区域菜单显示功能,你可以在初始化的时候指定需要弹出菜单的网页区域...
就是基于bootstrap的表格样式的右键菜单,里面有几个例子
Bootstrap鼠标右键菜单代码是一款可以在多种元素上触发,也可以配合Font Awesome字体图标一起使用。
bootstrap风格的动态添加tab页 tab页上有右键事件:关闭其他,全部关闭 另可自定义json配置右键菜单
如今Bootstrap这个前端框架已被许多人接受并应用在不同的项目中,其中“开发高效,设备兼容”的特点表现得非常明显。这篇文章主要介绍了使用contextMenu插件实现Bootstrap table弹出右键菜单,需要的朋友可以参考下
基于Bootstrap的jQuery右键上下文菜单插件
Bootstrap Context Menu是一款非常实用的基于Bootstrap的jQuery右键上下文菜单插件。该右键菜单插件可以在多种元素上触发,也可以配合Font Awesome字体图标一起使用,非常的方便。
关于右键菜单,我们介绍得并不多,目前只有介绍过一款jQuery Bootstrap右键菜单 带点击菜单...今天要继续为大家分享一款高大上的jQuery右键菜单,这款右键菜单可以让使用者自定义菜单弹出的区域,因此非常灵活和实用。
jQuery CSS 实现Bootstrap风格带阴影的右键菜单,在这个例子中,在下面的矩形区域内右键点击就可以打开上下文菜单。在指定区域内的任何位置点击右键即可弹出右键菜单。
基于Bootstrap的前端界面含主页,注册,新闻详情页,全是静态页面,需要自各拿走。模仿大公新闻网做的前端界面。
试过用复合控件包含treeview控件,但是失败,这次在右键菜单调用tree的回发js成功可以在页面后台绑定被编辑的节点,后台3个函数都可以编辑用c#传的参数e.mynode就是右键菜单的选中的节点
ztree 右键菜单,html的静态的,js和css都有,下载后直接就可以看到功能介绍,网上可真不好找啊,特此奉献
之前我们分享过几款简单的jQuery右键菜单插件,比如超实用jQuery右键菜单 可自定义菜单弹出区域和基于Bootstrap外观的JavaScript右键菜单插件,都比较实用。这次我们要分享一款基于jQuery的自定义下拉框选择菜单,这...
Bootstrap写的前端页面
Bootstrap鼠标右键下拉菜单特效