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

代码：

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

随机推荐

Hello World! 2010年山东省第一届ACM大学生程序设计竞赛
Hello World! Time Limit: 1000MS Memory limit: 65536K 题目描述 We know that Ivan gives Saya three problem ...
hdu2377Bus Pass(构建更复杂的图+spfa)
主题链接: 啊哈哈,点我点我思路: 题目是给了非常多个车站.然后要你找到一个社区距离这些车站的最大值最小..所以对每一个车站做一次spfa.那么就得到了到每一个社区的最大值,最后对每一个社区扫描一次 ...
Spring4.0MVC学习资料,ApplicationContext中的方法具体解释(三)
做为java开源的一部分,spring框架一直排在老大的位置.Spring4.0 是 Spring 推出的一个重大版本号升级,进一步加强了 Spring 作为 Java 领域第一开源平台的地位.Spr ...
JavaEE SSH集成框架(两) struts2 本地加载dtd文件，action组态
1. 载入中struts2的dtd文件.使struts.xml网络无法验证,和eclipse有技巧在src在创建struts.xml: <? xmlversion="1.0" ...
NFS 配置服务
NFS 配置服务北京市海淀区张俊浩一.NFS.即网络文件系统(Network File System,NFS).一种使用于分散式文件系统的协议,由升阳公司开发.于1984年向外发布.功能是通过 ...
Java中使用Lua脚本语言(转)
Lua是一个实用的脚本语言,相对于Python来说,比较小巧,但它功能并不逊色,特别是在游戏开发中非常实用(WoW采用的就是Lua作为脚本的).Lua在C\C++的实现我就不多说了,网上随便一搜,到处 ...
hdu 4454 Stealing a Cake(三分之二)
pid=4454" target="_blank" style="">题目链接:hdu 4454 Stealing a Cake 题目大意:给定 ...
【Linux探索之旅】开宗明义+第一部分第一课：什么是Linux？
内容简介 1.课程大纲 2.第一部分第一课:什么是Linux? 3.第一部分第二课预告:下载Linux,免费的噢! 开宗明义我们总听到别人说:Linux挺复杂的,是给那些追求逼格的程序员用的.咱 ...
ATL 创COM物
我原来以前写dll创建过程,而直接使用LoadLibrary加载动态库. 但ATL提出了一个非常重要的特点是引入COM对象的概念. 首先. ATL active template library该活动 ...
【Java基础】“数三退一”问题的代码实现
现在有500个小孩,编号为0-499,手牵手连成一个圈,从第一个小孩开始"123123..."报数,数到三的小孩退出,求剩下的最后一个小孩的编号. public static vo ...

jQuery自定义右键菜单

权限设置

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

随机推荐

热门专题