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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-zdy-right-button-menu-style-codes/

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • jquery实现右键菜单插件

    jquery实现右键菜单插件

    今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能.也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容.这样可以拓展右键的功能.实现过程不多说了,写出来的代码和效果如下: js部分: 复制代码 代码如下: //创建右键菜单 var epMenu={     create:function(point,option){         var menuNode=document.getElementById('epMenu');         if(!menuNode){   

  • jQuery右键菜单contextMenu使用实例

    jQuery右键菜单contextMenu使用实例

    在下面我们将设计一个场景,表格grid需要在每行实现鼠标右键,增加,删除,保存操作.grid我就用gridview了,随便用微软提供的样式,测试用例不用搞的多好看嘛,我也不是做美工了,哈哈,偷偷懒. 先上效果图,是有些同志说的有图才有真相嘛: ui代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits=

  • JQuery右键菜单插件ContextMenu使用指南

    JQuery右键菜单插件ContextMenu使用指南

    插件下载地址: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js 压缩版: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js Jquery主页:   http://jquery.com/ 通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式. 复制代码

  • JQuery 动态生成Table表格实例代码

    JQuery动态生成Table表格 主要用到了JQuery中的append和appendto的方法,具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&quo

  • jQuery动态生成表格及右键菜单功能示例

    本文实例讲述了jQuery动态生成表格及右键菜单功能.分享给大家供大家参考,具体如下: 这里用的是 jquery 1.4.1 的库文件,具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

  • jQuery实现右键菜单、遮罩等效果代码

    jQuery实现右键菜单、遮罩等效果代码

    最近要做个某管理系统的界面,然后涉及到右键菜单,因为之前没有做过所以就做了一下~感觉还可以,不过我个人不是很喜欢右键菜单的这种形式. 操作:在固定区域内点击鼠标右键出现菜单,然后选择任意一项后进行对应页面的跳转.刚开始的想法是用catch..case..的方法,对应不同的选项,只改变弹出层里的内容,但是内容都要用jQuery生成拼接,所以选用了比较简单的页面跳转. 下面就只贴上一个示例页面的相关代码. 先上效果图: **index.html主要代码** <div id="myMenu&qu

  • Jquery 动态生成表格示例代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

  • jquery实现在网页指定区域显示自定义右键菜单效果

    jquery实现在网页指定区域显示自定义右键菜单效果

    本文实例讲述了jquery实现在网页指定区域显示自定义右键菜单效果.分享给大家供大家参考.具体如下: 这是一个jquery实现的网页右键菜单效果,与其它自定义的右键菜单不同之处在于,本菜单只在指定区域内才有效,若超出指定区域的话,点击右键后显示的仍是浏览器的右键菜单.运行效果后,请在橘色区域内点击鼠标右键,会弹出一个带图标的自定义右键菜单,和浏览器的右键菜单完全不一样哦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-ar

  • 基于jquery的动态创建表格的插件

    废话少说直接进入主题, 表格功能: 1.添加 2.删除 3.获取值 4.动态填充数据 5.动态设置焦点 6.键盘左右上下键控制单元格焦点 7.单元格添加正则验证功能 WebForm4.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="table.WebForm4" %&

  • jQuery动态生成Bootstrap表格

    jQuery动态生成Bootstrap表格

    效果图如下所示: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+req

  • jquery创建表格(自动增加表格)代码分享

    复制代码 代码如下: <!DOCTYPE html><html dir="ltr" lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width" /><title>jQuery 表格自动增加</title&

  • JQuery Ajax动态生成Table表格

    JQuery Ajax动态生成Table表格

    前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q

随机推荐