首页
所有分类
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 相关文章推荐
offsetParent 算法分析
Apr 05 Javascript
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
扩展easyui.datagrid，添加数据loading遮罩效果代码
Nov 02 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
使用vue构建多页面应用的示例
Oct 22 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
数据类型(8) Hash(1) IOC(3) RabbitMQ(3) 入门基础(1) Geospatial(1) XML(1) metaclass(1) Bean(3) 触发器(3)
You might like
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
ThinkPHP安装和设置
2015/07/27 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python中readline判断文件读取结束的方法
2014/11/08 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
python 日期操作类代码
2018/05/05 Python
python 字符串和整数的转换方法
2018/06/25 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
python正则-re的用法详解
2019/07/28 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
python中数字是否为可变类型
2020/07/08 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
购买限量版收藏品、珠宝和礼品：Bradford Exchange
2016/09/23 全球购物
商务邀请函范文
2014/01/14 职场文书
经典毕业生求职信
2014/07/12 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
学习十八大演讲稿
2014/09/15 职场文书
自荐信格式范文
2015/03/04 职场文书
甲午风云观后感
2015/06/02 职场文书
《去年的树》教学反思
2016/02/18 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers