首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现自定义右键菜单的树状菜单效果

Posted in Javascript onSeptember 02, 2015

本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果。分享给大家供大家参考。具体如下：

这是一款基于jQuery的自定义右键菜单，在树状结构的子节点（下级没有节点）上单击右键才会弹出自定义菜单，而且菜单是自动根据鼠标位置来定位的。当鼠标在菜单以外的任意空白处单击一下后会自动消失。这里想特别说明一点所谓的“菜单以外”，可以有两种解剖方式——1、除了鼠标在菜单区域内的所有位置；2、如下图所示的A、B、C、D四个区域。显然用第一种方法来剖析会更简单直接一点。源码中的!IsInArea就表示此方法。

运行效果截图如下：

jQuery实现自定义右键菜单的树状菜单效果

在线演示地址如下：

具体代码如下：

<!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=gb2312" />
<title>jQuery自定义右键菜单</title>
<style type="text/css">
body {
  font-size: 12px;
  margin: 0px;
  padding: 0px;
}
form,div,ul,li {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  overflow: hidden;
}
h1,h2,h3,h4,h5 {
  font-size: 12px;
  margin: 0px;
  padding: 0px;
}
a {
  text-decoration: none;
}
.layout {
  width: 993px;
  clear: both;
  margin-right: auto;
  margin-left: auto;
  border-top-width: 0px;
  border-right-width: 4px;
  border-bottom-width: 0px;
  border-left-width: 4px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #000000;
  border-right-color: #000000;
  border-bottom-color: #000000;
  border-left-color: #000000;
  overflow: hidden;
}
.layout2 {
  width: 942px;
  margin-right: auto;
  margin-left: auto;
}
.Content {
  background-color: #376285;
}
.contentBg {
  background-color: #173043;
}
div, ul, li {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}
body {
 background-color: #FFFFFF;
 font-size: 12px;
 margin: 0px;
 padding: 0px;
}
#TreeList {
 background-color: #FFFFFF;
 margin-top: 6px;
 margin-right: 9px;
 margin-bottom: 6px;
 margin-left: 9px;
 border: 1px solid #5d7b96;
 padding-bottom: 6px;
 padding-left: 6px;
}
#TreeList .mouseOver {
 background-color: #FAF3E2;
}
#TreeList .ParentNode {
 line-height: 21px;
 height: 21px;
 margin-top: 2px;
 clear: both;
}
#TreeList .ChildNode {
 background-image: url(images/Sys_ModuleIcos.png);
 background-position: 15px -58px;
 padding-left: 39px;
 line-height: 21px;
 background-repeat: no-repeat;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 1px;
 border-left-width: 0px;
 border-top-style: dashed;
 border-right-style: dashed;
 border-bottom-style: dashed;
 border-left-style: dashed;
 border-top-color: #aabdce;
 border-right-color: #aabdce;
 border-bottom-color: #aabdce;
 border-left-color: #aabdce;
 cursor: default;
 clear: both;
 height: 21px;
 color: #314f6a;
}
#TreeList .title {
 float: left;
}
#TreeList .input {
 font-size: 12px;
 line-height: 18px;
 color: #FFF;
 height: 16px;
 background-color: #3F6B8F;
 width: 120px;
 text-align: center;
 margin-top: 1px;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #1F3547;
 border-right-color: #FFF;
 border-bottom-color: #FFF;
 border-left-color: #1F3547;
 float: left;
}
#TreeList .editBT {
 float: left;
 overflow: visible;
}
#TreeList .editBT .ok {
 background-image: url(images/Sys_ModuleIcos.png);
 background-repeat: no-repeat;
 background-position: 0px -89px;
 height: 13px;
 width: 12px;
 float: left;
 margin-left: 3px;
 padding: 0px;
 margin-top: 3px;
 cursor: pointer;
}
#TreeList .editBT .cannel {
 background-image: url(images/Sys_ModuleIcos.png);
 background-repeat: no-repeat;
 background-position: 0px -120px;
 float: left;
 height: 13px;
 width: 12px;
 margin-left: 3px;
 padding: 0px;
 margin-top: 3px;
 cursor: pointer;
}
#TreeList .editArea {
 float: right;
 color: #C3C3C3;
 cursor: pointer;
 margin-right: 6px;
}
#TreeList .editArea span {
 margin: 2px;
}
#TreeList .editArea .mouseOver {
 color: #BD4B00;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #C9925A;
 border-right-color: #E6CFBB;
 border-bottom-color: #E6CFBB;
 border-left-color: #C9925A;
 background-color: #FFFFFF;
 margin: 0px;
 padding: 1px;
}
#TreeList .ParentNode .title {
 color: #314f6a;
 cursor: pointer;
 background-image: url(images/Sys_ModuleIcos.png);
 background-repeat: no-repeat;
 padding-left: 39px;
}
#TreeList .ParentNode.show .title {
 font-weight: bold;
 background-position: 3px -27px;
}
#TreeList .ParentNode.hidden .title {
 background-position: 3px 4px;
}
#TreeList .ParentNode .editArea {
 color: #999; 
}
#TreeList .ParentNode.show {
 background-color: #d1dfeb;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #5d7b96;
 border-right-color: #5d7b96;
 border-bottom-color: #5d7b96;
 border-left-color: #5d7b96;
}
#TreeList .ParentNode.hidden {
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 1px;
 border-left-width: 0px;
 border-top-style: dashed;
 border-right-style: dashed;
 border-bottom-style: dashed;
 border-left-style: dashed;
 border-top-color: #aabdce;
 border-right-color: #aabdce;
 border-bottom-color: #aabdce;
 border-left-color: #aabdce;
}
#TreeList .Row {
 clear: both;
 margin-left: 24px;
 background-image: url(images/Sys_ModuleIcos2.png);
 background-repeat: repeat-y;
 background-position: 7px 0px;
}
h1 {
 font-size: 12px;
 line-height: 24px;
 color: #FFF;
 background-color: #396384;
 text-align: center;
 margin: 0px;
 padding: 0px;
}
#OpLimits_Menu {
 position: absolute;
 width: 70px;
 cursor: default;
 filter: Alpha(Opacity=90);
}
#OpLimits_Menu ul {
 background-color: #d5effc;
 border: 1px solid #3e8dad;
}
#OpLimits_Menu ul li {
 line-height: 18px;
 color: #496D81;
 text-align: center;
 letter-spacing: 0.3em;
 height: 18px;
 cursor: pointer;
}
#OpLimits_Menu ul .onmouse {
 background-image: url(images/bt1.gif);
 background-repeat: repeat-x;
 color: #324A58;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var Mouse_X,Mouse_Y;
var TMenu_X0,TMenu_Y0;
var MousePostion;
$(document).ready(function(e) {
 var PrentNodeClass = 'ParentNode';//父节点的标识
 var ChildNodeClass = 'ChildNode';//没有下级子节点的标识
 var ChildrenListClass = 'Row';//子节点被包着的外层样式
 var TModuleNode,TChildNode,TModuleNodeName;
 TModuleNode = $('#TreeList .'+PrentNodeClass);//顶层节点
 TChildNode = $('.'+ChildNodeClass);
 TModuleNodeName = $('#TreeList .' + PrentNodeClass + ' .title');//顶层节点名称
 function TNode_MouseDown(e,Obj){
 if(e.which==3){
 if(Obj.hasClass(ChildNodeClass)){//没有子节点才需要有权限设置菜单
 MousePostion(e,1);
 with($('#OpLimits_Menu')){
  css('left',Mouse_X);
  css('top',Mouse_Y);
  css('display','block');
 }
 }
 }
 }
 //-------------禁用系统的右键功能-----------
 $(document).bind('contextmenu',function(e){ 
 return false; 
 }); 
 var LimitsMenu_Width,LimitsMenu_Height;
 LimitsMenu_Width = $('#OpLimits_Menu').width();
 LimitsMenu_Height = $('#OpLimits_Menu').height();
 var LimitsSetting_Width,LimitsSetting_Height;
 LimitsSetting_Width = $('#OpLimitsSetting').width();
 LimitsSetting_Height = $('#OpLimitsSetting').height();
 TChildNode.mousedown(function(e){
 TNode_MouseDown(e,$(this));
 });
 $(this).mousedown(function(e){
 if(Mouse_X && Mouse_Y){
 MousePostion(e,0);
 var IsInArea = Mouse_X>TMenu_X0 && Mouse_X<TMenu_X0+LimitsMenu_Width && Mouse_Y>TMenu_Y0 && Mouse_Y<TMenu_Y0+LimitsMenu_Height;
 if(e.which==1 && !IsInArea){
  with($('#OpLimits_Menu')){
  css('display','none');
  }
 }
 }
 });
 //-----------------------------------------
 //计算坐标函数
 MousePostion = function(e,tag){
 mouse = new MouseEvent(e);
 Mouse_X = mouse.x;
 Mouse_Y = mouse.y;
 if(tag==1){
 TMenu_X0 = Mouse_X;
 TMenu_Y0 = Mouse_Y;
 }
 }
 //获取鼠标坐标函数
 var MouseEvent = function(e) {
 this.x = e.pageX
 this.y = e.pageY
 }
 //---------------------------------------- 
 with($('#OpLimits_Menu li')){
 mouseover(function(){
 $(this).addClass('onmouse');
 });
 mouseout(function(){
 $(this).removeClass('onmouse');
 });
 click(function(){ 
 with($('#OpLimits_Menu')){
 css('display','none');
 }
 });
 }
});
</script>
</head>
<body>
<div id="TreeList">
 <div class="ParentNode show">
  <div class="title">酷站欣赏</div>
 </div>
 <div class="Row">
  <div class="ChildNode">
  <div class="title">欧美酷站</div>
  </div>
  <div class="ChildNode">
  <div class="title">日韩酷站</div>
  </div>
  <div class="ChildNode">
  <div class="title">国内酷站</div>
  </div>
  <div class="ChildNode">
  <div class="title">婚庆摄影</div>
  </div>
  <div class="ChildNode">
  <div class="title">餐饮食品</div>
  </div>
 </div>
</div>
<div id="OpLimits_Menu" style="display:none">
 <h1>权限设置</h1>
 <ul>
  <li value="1">查看</li>
  <li value="2">添加</li>
  <li value="3">修改</li>
  <li value="4">删除</li>
 </ul>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

jQuery实现自定义右键菜单的树状菜单效果

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
js实现延迟加载的方法
Jun 24 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 #Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 #Javascript
JavaScript对象学习小结
Sep 02 #Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 #Javascript
jquery实现华丽的可折角广告代码
Sep 02 #Javascript
javascript学习总结之js使用技巧
Sep 02 #Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 #Javascript
exec(1) OpenGL(1) 三角函数(1) seata(1) 迪杰斯特拉(1) MyBatis(5) nacos(1) Flask Web(1) cv2(1) Android Studio(4)
You might like
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
php发送post请求函数分享
2014/03/06 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
[01:10]为家乡而战！完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
Elemis美国官网：英国的第一豪华护肤品牌
2018/03/15 全球购物
项目合作意向书范本
2014/04/01 职场文书
《假如》教学反思
2014/04/17 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
微电影大赛策划方案
2014/06/05 职场文书
2015年三万活动总结
2015/03/25 职场文书
债务追讨律师函
2015/06/24 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android