首先看下效果，效果在最下面：

代码：

 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(/jscss/demoimg/201205/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(/jscss/demoimg/201205/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(/jscss/demoimg/201205/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(/jscss/demoimg/201205/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(/jscss/demoimg/201205/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(/jscss/demoimg/201205/bt1.gif);

  background-repeat: repeat-x;

  color: #324A58;

 }

<div id="TreeList">

   <div class="ParentNode show">

      <div class="title">title</div>

    </div>

    <div class="Row">

      <div class="ChildNode">

        <div class="title">这是一个li</div>

      </div>

      <div class="ChildNode">

        <div class="title">这是一个li</div>

      </div>

      <div class="ChildNode">

        <div class="title">这是一个li</div>

      </div>

      <div class="ChildNode">

        <div class="title">这是一个li</div>

      </div>

      <div class="ChildNode">

        <div class="title">这是一个li</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>

js:

     $(function(){

   /*首先禁用需要操作区域的右键功能*/

     $("#TreeList").on("contextmenu", function (e) {

         var pointX = e.pageX;

         //这里可以得到鼠标Y坐标

         var pointY = e.pageY;

         var $div = $("div#OpLimits_Menu"); // 右击自定义div

         $div.show().css({ "left": pointX, "top": pointY });

         return false;

     })

     /*鼠标右键事件判定 e.which 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键*/

     var $child = $("#TreeList").find("div.ChildNode");

     $(document).on("mousedown", function (e) {

         var $div = $("div#OpLimits_Menu"); // 右击自定义div

         if (e.which != 3) {  // 判断是右击事件执行if里面的操作

             $div.hide()//

         }

     })

这就是最终的效果：

title

这是一个li

权限设置

查看
添加
修改
删除

jQuery自定义右键菜单的更多相关文章

jquery 自定义右键菜单
如果要自定义右键菜单,那么就需要禁止原本的右键菜单,代码如下 document.oncontextmenu = new Function("return false;");//禁止 ...
js进阶 12-18 jquery如何实现自定义右键菜单（把问题分细）
js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细) 一.总结一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...
自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]
许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单首先来创建JSP页面 <%@ page language=&q ...
ASP.NET Aries 入门开发教程8：树型列表及自定义右键菜单
前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...
JavaScript自定义右键菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JS简单实现自定义右键菜单
RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...
antd Tree组件中，自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...
AS3.0 自定义右键菜单类
AS3.0 自定义右键菜单类: /** * 自定义右键菜单类 * 自定义菜单项不得超过15个,每个标题必须至少包含一个可见字符. * 标题字符不能超过100个,并且开头的空白字符会被忽略. * 与任何 ...
js之自定义右键菜单
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

UVa 524 Prime Ring Problem（DFS , 回溯）
题意把1到n这n个数以1为首位围成一圈输出全部满足随意相邻两数之和均为素数的全部排列直接枚举排列看是否符合肯定会超时的 n最大为16 利用回溯法边生成边推断就要快非常多了 #inc ...
JSplitPane demo
package example; import java.awt.BorderLayout; import java.awt.Color; import java.awt.Dimension; imp ...
oracle 选择最频繁出现之前，５文章数据
SELECT * FROM ( SELECT PROJECT_LISTING.MATERIAL, COUNT (*) AS "出现次数" FROM PROJECT_LISTING ...
MATLAB描绘极坐标图像——polar
polar可用于描绘极坐标图像. 最简单而经常使用的命令格式:POLAR(THETA, RHO) 当中,THETA是用弧度制表示的角度,RHO是相应的半径. 例: a=-2*pi:.001:2*pi ...
网络基础知识系列：阐述VLAN和Trunk
网络性能是影响的效率的重要因素. 大的广播域分割方法,旨在提高网络性能.一个接口上,可是,路由器的LAN接口数量有限,它的主要功能是在网络间数据传输,而不是对终端设备提供网络接入. 訪问LAN的功能还 ...
读书时间《JavaScript高级程序设计》四：BOM，客户端检测
隔了一段时间,现在开始看第8章. 第8章:BOM BOM提供了很多对象,用于访问浏览器的功能.BOM的核心对象是window,它表示浏览器的一个实例. window对象是通过javascript访问浏 ...
有一个NSStirng类型，retain时尚宣言name财产setter内部方法的每一行代码的作用?
- (void)setName:(NSString *)name { 推断原有对象和新对象是否是同一个对象,假设是同一个,就没有必要再又一次赋值,否则会先release 再retain, ...
Java 信号 Semaphore 简介
Semaphore当前在多线程环境下被扩放使用.操作系统的信号量是个非常重要的概念,在进程控制方面都有应用. Java 并发库的Semaphore 能够非常轻松完毕信号量控制,Semaphore能够 ...
与我一起extjs5(09--其定义菜单2)
跟我一起学extjs5(09--自己定义菜单2) 这一节来定义另外三种类型的菜单类. 首先定义菜单button类.文件放于app/view/main/region文件夹以下,文件名称为 ...
C# 闭包问题
C# 闭包问题-你被”坑“过吗? 引言闭包是什么?以前看面试题的时候才发现这个名词. 闭包在实际项目中会有什么问题?现在就让我们一起来看下这个不太熟悉的名词. 如果在实际工作中用到了匿名函数和lam ...

jQuery自定义右键菜单

权限设置

jQuery自定义右键菜单的更多相关文章

随机推荐

热门专题