If you do not understand it, you can see it clearly. If you do not understand it, it will flash. [Javascript] $ (function () {document. oncontextmenufunction () {returnfalse;} // right-click document. onmousemovemouseMove; // record the mouse position}); varmx0, my0; fun...
If you do not understand it, you can see it clearly. If you do not understand it, it will flash.
[Javascript] $ (function (){
Document. oncontextmenu = function () {return false;} // right-click to block
Document. onmousemove = mouseMove; // record the mouse position
});
Var mx = 0, my = 0;
Function mouseMove (ev) {Ev = ev | window. event; var mousePos = mouseCoords (Ev); mx = mousePos. x; my = mousePos. y ;}
Function mouseCoords (ev ){
If (ev. pageX | ev. pageY) {return {x: ev. pageX, y: ev. pageY };}
Return {x: ev. clientX, y: ev. clientY + $ (document). scrollTop ()};
}
$. Fn. extend ({RightMenu: function (id, options) {options = $. extend ({menuList: []}, options); var menuCount = options. menuList. length;
If (! $ ("#" + Id) [0]) {
Var divMenuList ="
";
For (var I = 0; I DivMenuList + ="
- "+ Options. menuList [I]. menuName +"
";
}
DivMenuList + ="
";
$ ("Body"). append (divMenuList). find ("#" + id). hide (). find ("li ")
. Bind ("mouseover", function () {$ (this). addClass ("RM_mouseover ");})
. Bind ("mouseout", function () {$ (this). removeClass ("RM_mouseover ");});
$ (Document). click (function () {$ ("#" + id). hide ();});
}
Return this. each (function (){
This. oncontextmenu = function (){
Var mw = $ ('body'). width (), mhh = $ ('html'). height (), mbh = $ ('body'). height (),
W = $ ('#' + id). width (), h = $ ('#' + id). height (),
Mh = (mhh> mbh )? Mhh: mbh; // the maximum height of the html and body
If (mh If (mw $ ("#" Incluid).hide().css ({top: my, left: mx}). show ();
}
});
}
});
$ (Function (){
Document. oncontextmenu = function () {return false;} // right-click to block
Document. onmousemove = mouseMove; // record the mouse position
});
Var mx = 0, my = 0;
Function mouseMove (ev) {Ev = ev | window. event; var mousePos = mouseCoords (Ev); mx = mousePos. x; my = mousePos. y ;}
Function mouseCoords (ev ){
If (ev. pageX | ev. pageY) {return {x: ev. pageX, y: ev. pageY };}
Return {x: ev. clientX, y: ev. clientY + $ (document). scrollTop ()};
}
$. Fn. extend ({RightMenu: function (id, options) {options = $. extend ({menuList: []}, options); var menuCount = options. menuList. length;
If (! $ ("#" + Id) [0]) {
Var divMenuList ="
";
For (var I = 0; I DivMenuList + ="
- "+ Options. menuList [I]. menuName +"
";
}
DivMenuList + ="
";
$ ("Body"). append (divMenuList). find ("#" + id). hide (). find ("li ")
. Bind ("mouseover", function () {$ (this). addClass ("RM_mouseover ");})
. Bind ("mouseout", function () {$ (this). removeClass ("RM_mouseover ");});
$ (Document). click (function () {$ ("#" + id). hide ();});
}
Return this. each (function (){
This. oncontextmenu = function (){
Var mw = $ ('body'). width (), mhh = $ ('html'). height (), mbh = $ ('body'). height (),
W = $ ('#' + id). width (), h = $ ('#' + id). height (),
Mh = (mhh> mbh )? Mhh: mbh; // the maximum height of the html and body
If (mh If (mw $ ("#" Incluid).hide().css ({top: my, left: mx}). show ();
}
});
}
});
If you do not understand it, you can see it clearly. If you do not understand it, it will flash.
[Css] * {font-size: 12px; margin: 0; padding: 0 ;}
. Div_RightMenu {position: absolute; list-style: none; width: 100px ;}
. Div_RightMenu div {background: # bbb; position: relative ;}
. Div_RightMenu ul {position: relative; background: # fff; border: 1px solid #999; left:-2px; top:-2px; margin: 0; padding: 1px 0 ;}
. Div_RightMenu ul li {list-style: none; margin: 0 1px; padding: 0; line-height: 20px; height: 20px; text-indent: 25px; background-image: url (images/t.gif); background-repeat: no-repeat; cursor: pointer; border-width: 1px; border-style: solid; border-color: # fff ;}
. Div_RightMenu ul li. RMli_1 {background-position: 0 0 ;}
. Div_RightMenu ul li. RMli_2 {background-position: 0-20px ;}
. Div_RightMenu ul li. RMli_3 {background-position: 0-40px ;}
. Div_RightMenu ul li. RMli_4 {background-position: 0-60px ;}
. Div_RightMenu ul li. RMli_5 {background-position: 0-80px ;}
. Div_RightMenu ul li. RMli_6 {background-position: 0-100px ;}
. Div_RightMenu ul li. RMli_7 {background-position: 0-120px ;}
. Div_RightMenu ul li. RMli_8 {background-position: 0-140px ;}
. Div_RightMenu ul li. RMli_9 {background-position: 0-160px ;}
. Div_RightMenu ul li. RMli_10 {background-position: 0-180px ;}
. Div_RightMenu ul li. RMli_11 {background-position: 0-200px ;}
. Div_RightMenu ul li. RMli_12 {background-position: 0-220px ;}
. Div_RightMenu ul li. RMli_13 {background-position: 0-240px ;}
. Div_RightMenu ul li. RMli_14 {background-position: 0-260px ;}
. Div_RightMenu ul li. RMli_15 {background-position: 0-280px ;}
. Div_RightMenu ul li. RMli_16 {background-position: 0-300px ;}
. Div_RightMenu ul li. RM_mouseover {background-color: # B6BDD2; border-color: # 0A246A ;}
Tr. selected {background: # B6BDD2 ;}
* {Font-size: 12px; margin: 0; padding: 0 ;}
. Div_RightMenu {position: absolute; list-style: none; width: 100px ;}
. Div_RightMenu div {background: # bbb; position: relative ;}
. Div_RightMenu ul {position: relative; background: # fff; border: 1px solid #999; left:-2px; top:-2px; margin: 0; padding: 1px 0 ;}
. Div_RightMenu ul li {list-style: none; margin: 0 1px; padding: 0; line-height: 20px; height: 20px; text-indent: 25px; background-image: url (images/t.gif); background-repeat: no-repeat; cursor: pointer; border-width: 1px; border-style: solid; border-color: # fff ;}
. Div_RightMenu ul li. RMli_1 {background-position: 0 0 ;}
. Div_RightMenu ul li. RMli_2 {background-position: 0-20px ;}
. Div_RightMenu ul li. RMli_3 {background-position: 0-40px ;}
. Div_RightMenu ul li. RMli_4 {background-position: 0-60px ;}
. Div_RightMenu ul li. RMli_5 {background-position: 0-80px ;}
. Div_RightMenu ul li. RMli_6 {background-position: 0-100px ;}
. Div_RightMenu ul li. RMli_7 {background-position: 0-120px ;}
. Div_RightMenu ul li. RMli_8 {background-position: 0-140px ;}
. Div_RightMenu ul li. RMli_9 {background-position: 0-160px ;}
. Div_RightMenu ul li. RMli_10 {background-position: 0-180px ;}
. Div_RightMenu ul li. RMli_11 {background-position: 0-200px ;}
. Div_RightMenu ul li. RMli_12 {background-position: 0-220px ;}
. Div_RightMenu ul li. RMli_13 {background-position: 0-240px ;}
. Div_RightMenu ul li. RMli_14 {background-position: 0-260px ;}
. Div_RightMenu ul li. RMli_15 {background-position: 0-280px ;}
. Div_RightMenu ul li. RMli_16 {background-position: 0-300px ;}
. Div_RightMenu ul li. RM_mouseover {background-color: # B6BDD2; border-color: # 0A246A ;}
Tr. selected {background: # B6BDD2 ;}
If you do not understand it, you can see it clearly. If you do not understand it, it will flash.
Jquery is used. Download the specific version by yourself.
An image is used as follows:
Foreground reference:
[Html]
Jquery short right-click menu