jQuery右键菜单插件contextmenu.js
HTML:
<
div
id
=
"demo2"
> 右键点此</
div
>
<!--以下就是右键demo2后弹出的菜单项-->
<
div
class
=
"contextMenu"
id
=
"myMenu2"
>
<
ul
>
<
li
id
=
"item_1"
>选项一</
li
>
<
li
id
=
"item_2"
>选项二</
li
>
<
li
id
=
"item_3"
>选项三</
li
>
<
li
id
=
"item_4"
>选项四</
li
>
</
ul
>
</
div
>
$(
'#demo2'
).contextMenu(
'myMenu2'
, {
//菜单样式
menuStyle: {
border:
'2px solid #000'
},
//菜单项样式
itemStyle: {
fontFamily:
'verdana'
,
backgroundColor:
'green'
,
color:
'white'
,
border:
'none'
,
padding:
'1px'
},
//菜单项鼠标放在上面样式
itemHoverStyle: {
color:
'blue'
,
backgroundColor:
'red'
,
border:
'none'
},
//事件
bindings: {
'item_1'
:
function
(t) {
alert(
'Trigger was '
+ t.id +
'\nAction was item_1'
);
},
'item_2'
:
function
(t) {
alert(
'Trigger was '
+ t.id +
'\nAction was item_2'
);
},
'item_3'
:
function
(t) {
alert(
'Trigger was '
+ t.id +
'\nAction was item_3'
);
},
'item_4'
:
function
(t) {
alert(
'Trigger was '
+ t.id +
'\nAction was item_4'
);
}
}
})