首页
所有分类
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 相关文章推荐
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
浅谈Node.js：fs文件系统模块
Dec 08 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
JavaScript经典案例之简易计算器
Aug 24 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) 比利时购物网站(33) 瑞典购物网站(55) 阿根廷购物网站(9) 荷兰购物网站(99) 挪威购物网站(7) 葡萄牙购物网站(13) 芬兰购物网站(10) 肯尼亚购物网站(2) 欧洲购物网站(15)
You might like
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
PHP下利用shell后台运行PHP脚本，并获取该脚本的Process ID的代码
2011/09/19 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
Python设计模式之单例模式实例
2014/04/26 Python
基于Python的接口测试框架实例
2016/11/04 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
详解Anconda环境下载python包的教程（图形界面+命令行＋pycharm安装）
2019/11/11 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
python打包生成so文件的实现
2020/10/30 Python
全球度假村：Club Med
2017/11/27 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
优秀士兵个人事迹材料
2014/01/19 职场文书
绿色环保演讲稿
2014/05/10 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
给领导的感谢信范文
2015/01/23 职场文书
爱的教育观后感
2015/06/17 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis