當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

java 树右键菜单_jQuery实现自定义右键菜单的树状菜单效果

發布時間：2023/12/19 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 java 树右键菜单_jQuery实现自定义右键菜单的树状菜单效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文實例講述了jQuery實現自定義右鍵菜單的樹狀菜單效果。分享給大家供大家參考。具體如下：

這是一款基于jQuery的自定義右鍵菜單，在樹狀結構的子節點(下級沒有節點)上單擊右鍵才會彈出自定義菜單，而且菜單是自動根據鼠標位置來定位的。當鼠標在菜單以外的任意空白處單擊一下后會自動消失。這里想特別說明一點所謂的“菜單以外”，可以有兩種解剖方式——1、除了鼠標在菜單區域內的所有位置；2、如下圖所示的A、B、C、D四個區域。顯然用第一種方法來剖析會更簡單直接一點。源碼中的!IsInArea就表示此方法。

運行效果截圖如下：

在線演示地址如下：

具體代碼如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jQuery自定義右鍵菜單

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-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-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-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-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-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-repeat: repeat-x;

color: #324A58;

}

var Mouse_X,Mouse_Y;

var TMenu_X0,TMenu_Y0;

var MousePostion;

$(document).ready(function(e) {

var PrentNodeClass = 'ParentNode';//父節點的標識

var ChildNodeClass = 'ChildNode';//沒有下級子節點的標識

var ChildrenListClass = 'Row';//子節點被包著的外層樣式

var TModuleNode,TChildNode,TModuleNodeName;

TModuleNode = $('#TreeList .'+PrentNodeClass);//頂層節點

TChildNode = $('.'+ChildNodeClass);

TModuleNodeName = $('#TreeList .' + PrentNodeClass + ' .title');//頂層節點名稱

function TNode_MouseDown(e,Obj){

if(e.which==3){

if(Obj.hasClass(ChildNodeClass)){//沒有子節點才需要有權限設置菜單

MousePostion(e,1);

with($('#OpLimits_Menu')){

css('left',Mouse_X);

css('top',Mouse_Y);

css('display','block');

}

//-------------禁用系統的右鍵功能-----------

$(document).bind('contextmenu',function(e){

return false;

});

var LimitsMenu_Width,LimitsMenu_Height;

LimitsMenu_Width = $('#OpLimits_Menu').width();

LimitsMenu_Height = $('#OpLimits_Menu').height();

var LimitsSetting_Width,LimitsSetting_Height;

LimitsSetting_Width = $('#OpLimitsSetting').width();

LimitsSetting_Height = $('#OpLimitsSetting').height();

TChildNode.mousedown(function(e){

TNode_MouseDown(e,$(this));

});

$(this).mousedown(function(e){

if(Mouse_X && Mouse_Y){

MousePostion(e,0);

var IsInArea = Mouse_X>TMenu_X0 && Mouse_XTMenu_Y0 && Mouse_Y

if(e.which==1 && !IsInArea){

with($('#OpLimits_Menu')){

css('display','none');

}

});

//-----------------------------------------

//計算坐標函數

MousePostion = function(e,tag){

mouse = new MouseEvent(e);

Mouse_X = mouse.x;

Mouse_Y = mouse.y;

if(tag==1){

TMenu_X0 = Mouse_X;

TMenu_Y0 = Mouse_Y;

}

//獲取鼠標坐標函數

var MouseEvent = function(e) {

this.x = e.pageX

this.y = e.pageY

}

//----------------------------------------

with($('#OpLimits_Menu li')){

mouseover(function(){

$(this).addClass('onmouse');

});

mouseout(function(){

$(this).removeClass('onmouse');

});

click(function(){

with($('#OpLimits_Menu')){

css('display','none');

}

});

}

});

酷站欣賞歐美酷站日韓酷站國內酷站婚慶攝影餐飲食品

權限設置

查看
添加
修改
刪除

希望本文所述對大家的jquery程序設計有所幫助。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的java 树右键菜单_jQuery实现自定义右键菜单的树状菜单效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python程序员实现表白代码的案例
下一篇： jmeter更改java内存,jmete

编程问答

java 树 右键菜单_jQuery实现自定义右键菜单的树状菜单效果

權限設置

總結

java 树右键菜单_jQuery实现自定义右键菜单的树状菜单效果