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

代码：

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

随机推荐

POJ 1798 Truck History
Description Advanced Cargo Movement, Ltd. uses trucks of different types. Some trucks are used for v ...
WebCollector 2.x 新手教程
WebCollector爬虫官网:https://github.com/CrawlScript/WebCollector 技术讨论群:250108697 WebCollector 2.x教程列表 We ...
ASIHTTPRequest 对GET POST 请求简包
1.ASIHTTPRequest一个简短的引论 github下载链接https://github.com/pokeb/asi-http-request 2.ASIHTTPRequest 对GET和PO ...
Chapter 1 Securing Your Server and Network(2):管理服务的SIDs
原文出处:http://blog.csdn.net/dba_huangzj/article/details/37927319 ,专题文件夹:http://blog.csdn.net/dba_huang ...
vuejs 相关资料
官网 http://vuejs.org/ 中文网站 http://cn.vuejs.org/ Vue.js——60分钟快速入门 http://www.cnblogs.com/keepfool/p/56 ...
Java 内存架构
a) 执行. main()作为该程序的初始线的起点.无论由线程开始在其他线程. JVM有两个内螺纹:守护线程和非守护线程,main()它是一个非守护线程.常由JVM自己使用.java程序 ...
OCEANIAERP对接-code盘点机并存储实时库存计划和方案的使用，实时库存，云清查方案
1. PDA手持设备按键说明 [Tab]键:使输入焦点在控件上切换. [ESC]键:弹出是否退出确认对话框,退出操作界面或程序. [OK]键:确认输入或选择,进入下一步操作. [C]键:删除键 ...
COC+RTS+MOR游戏开发一（游戏特色分析，和实践）
本场比赛的临时名称游戏特色(-):COC风格 ,塔防养成类游戏. 一款史诗般的战斗策略游戏.玩家须要建立村庄,成千上万的网友训练玩家的军队和战斗. 游戏中玩家须要不断的提高军队的作 ...
HTTP工作原理
HTTP工作过程 HTTP协议定义Webclient怎样从Webserver请求Web页面,以及server怎样把Web页面传送给client.HTTP协议採用了请求/响应模型. client向 ...
[WebGL入门]四，渲染准备
注意:文章翻译http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家 ...

jQuery自定义右键菜单

权限设置

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

随机推荐

热门专题