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

代码：

 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 ...

随机推荐

effective c++ 条款7 declare virtual destructor for polymophyc base class
这似乎很明显. 如果base class的destructor不是virtual,当其derived class作为基类使用,析构的时候derived class的数据成员将不会被销毁. 举个例子我 ...
AndroidAnnotations说明—AndroidAnnotations它是如何工作的？
AndroidAnnotations它的工作原理很easy,它使用标准java注塑加工工具,自己主动加她一个额外的步骤生成源代码编译. 源代码是什么?每个增强的类.比方每个用@EAct ...
MySQL与逻辑模块
启动MySQL 1.初始化模块运行&&存储引擎初始化运行 2.1中运行完毕后 ---->连接管理模块接手 3.连接管理模块启动处理client连接请求的监听程序(tcp/ip 网 ...
玩转Web之easyui(三)-----easy ui dataGird 重新指定url以获取不同数据源信息
如果已经写了一个dataGird并且已经通过url绑定数据源,能不能在其他地方改变url使其从不同数据源获取信息,从而实现查询等操作?答案当然是肯定的,而且仅需要几行代码 $('#btnq').bin ...
LeetCode :: Validate Binary Search Tree[具体分析]
Assume a BST is defined as follows: The left subtree of a node contains only nodes with keys less th ...
.NET 4 并行（多核）编程系列之二从Task开始
原文:.NET 4 并行(多核)编程系列之二从Task开始 .NET 4 并行(多核)编程系列之二从Task开始前言:我们一步步的从简单的开始讲述,还是沿用我一直的方式:慢慢演化,步步为营. ...
Python计算&绘图——曲线拟合问题（转）
题目来自老师的课后作业,如下所示.很多地方应该可以直接调用函数,但是初学Python,对里面的函数还不是很了解,顺便带着学习的态度,尽量自己动手code. 测试版代码,里面带有很多注释和测试代码: # ...
Android 4.4环境搭建——Android SDK下载与安装
学习开发Android应用程序,须要下载安装Android SDK.在Android的官方站点的二级域名http://developer.android.com/index.html中.能够下载到完整 ...
Spring.Net控制翻转、依赖注入、面向切面编程
Spring.Net快速入门:控制翻转.依赖注入.面向切面编程 Spring.Net主要功能: 1.IoC:控制翻转(Inversion of Control) 理解成抽象工厂翻转控制:就是创建对象 ...
C# WinForm 拖动无边框窗体改变无边框窗体尺寸
经常遇到这种情况.窗体的边框去掉了.然后种种问题就出来了:不能拖动.不能改变窗体大小.不能．．．．．．当然.肯定有解决方案滴*^_^*今天的目标就是:可以直接拖动没有边框的窗体.可以直接拉拽窗体改变其 ...

jQuery自定义右键菜单

权限设置

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

随机推荐

热门专题