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

代码：

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

随机推荐

post跨域请求
[名词解释] 跨域:https://developer.mozilla.org/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript 同源策略 ...
Lua 服务器Socket通信实例（转）
local socket = require"socket" local host = "127.0.0.1"local port = "843&qu ...
POJ 2586：Y2K Accounting Bug（贪心）
Y2K Accounting Bug Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10024 Accepted: 4990 D ...
花生壳宣布网站的网址直接绑定到详细的项目——jboss版本
花生壳公布,首先要有域名.然后激活域名,详细的公布就不说了,网上有非常多资料,这里是在jboss下直接将网址与详细的项目相应.做法有点不地道假设跟图上一样配置的话.訪问网址相当于訪问的是http:/ ...
[leetcode] Combination Sum and Combination SumII
Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C wher ...
CSS——（2）与标准流盒模型
部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品 ...
POJ 3691 DNA repair 基于AC自己主动机DP
dp[i][j] 它表示的长度 i 下游前缀 j 更改节点的最小数量. 很清楚dp[0][0] = 0; dp[ i ][ j ] = min(dp[ i ][ j ],dp[i-1][k] + (j ...
XUtils骨架HttpUtils采用Get总是返回请求解决问题的相同信息
如需转载请注明出处:http://blog.csdn.net/itas109 版本号:Xutils 2014年11月11日下载地址:https://github.com/wyouflf/xUtils ...
Jvascript方法
Jvascript实用方法这篇我主要记录一些在工作中常用的.实用的方法. String trim 字符串方法中的trim主要用来去空格使用,很多时候,在后台做参数处理的时候,我们都会使用该方法, ...
跳跃Java一些周期，双跳FOR周期
今天写的代码写在一个双层for周期,目前仍在使用Iterator,大致意思是假定在第二个周期在排位赛中给了整个双回路跳. 刚開始,直接使用break.巴拉巴拉的敲了一堆代码,信心满满的就直接执行.等到 ...

jQuery自定义右键菜单

权限设置

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

随机推荐

热门专题