首页
所有分类
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 相关文章推荐
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
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
嵌套(1) 二维数组(2) 查找算法(1) 装饰器(1) 分块(1) 循环(3) decorator(1) 移动开发(2) android studio(3) 安卓(1)
You might like
PHP 5.0 Pear安装方法
2006/12/06 PHP
php的正则处理函数总结分析
2008/06/20 PHP
php中的比较运算符详解
2013/10/28 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
学习vue.js计算属性
2016/12/03 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
浅析JavaScript中的平稳退化（graceful degradation）
2017/07/24 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
js实现抽奖功能
2020/11/24 Javascript
Flask框架学习笔记（一）安装篇（windows安装与centos安装）
2014/06/25 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python字典的遍历3种方法详解
2019/08/10 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
生物科学系大学生的自我评价
2013/12/20 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
2014年城管工作总结
2014/11/20 职场文书
职工年度考核评语
2014/12/31 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
上下班时间调整通知
2015/04/23 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
喜迎建国70周年：有关爱国的名言名句
2019/09/24 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python