Home > Developer > JavaScript
JQuery right-click menu plug-in ContextMenu User Guide, jquerycontextmenu
Plugin:
Http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js
Compressed version:
Http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js
Jquery home: http://jquery.com/
With this plug-in, you can create a contextmenu in different html elements and customize styles.
Copy codeThe Code is as follows:
<HTML>
<HEAD>
<TITLE> JQuery right-click menu </TITLE>
<Script src = "jquery-1.2.6.min.js"> </script>
<Script src = "jquery. contextmenu. r2.js"> </script>
</HEAD>
<BODY>
<Span class = "demo1" style = "color: green;">
Right click here
</Span>
<Hr/>
<Div id = "demo2">
Right click here
</Div>
<Hr/>
<Div class = "demo3" id = "dontShow">
Not Displayed
</Div>
<Hr/>
<Div class = "demo3" id = "showOne">
Show first item
</Div>
<Hr/>
<Div class = "demo3" id = "showAll">
Show all
</Div>
<Hr/>
<! -- Right-click the menu source -->
<Div class = "contextMenu" id = "myMenu1">
<Ul>
<Li id = "open"> open </li>
<Li id = "email"> email </li>
<Li id = "save"> save </li>
<Li id = "delete"> disable </li>
</Ul>
</Div>
<Div class = "contextMenu" id = "myMenu2">
<Ul>
<Li id = "item_1"> Option 1 </li>
<Li id = "item_2"> Option 2 </li>
<Li id = "item_3"> Option 3 </li>
<Li id = "item_4"> Option 4 </li>
</Ul>
</Div>
<Div class = "contextMenu" id = "myMenu3">
<Ul>
<Li id = "item_1"> csdn </li>
<Li id = "item_2"> javaeye </li>
<Li id = "item_3"> itpub </li>
</Ul>
</Div>
</BODY>
<Script>
// The context menu is bound to all span labels whose class is demo1.
$ ('Span. demo1'). contextMenu ('mymenu1 ',
{
Bindings:
{
'Open': function (t ){
Alert ('triggers was' + t. id + '\ nAction was open ');
},
'Email ': function (t ){
Alert ('triggers was' + t. id + '\ nAction was Email ');
},
'Save': function (t ){
Alert ('triggers was' + t. id + '\ nAction was save ');
},
'Delete': function (t ){
Alert ('triggers was' + t. id + '\ nAction was delete ');
}
}
});
// All html elements whose id is demo2 are bound to this right-click menu
$ ('# Demo2'). contextMenu ('mymenu2 ',{
// Menu style
MenuStyle :{
Border: '2px solid #000'
},
// Menu item Style
ItemStyle :{
FontFamily: 'verdana ',
BackgroundColor: 'green ',
Color: 'white ',
Border: 'none ',
Padding: '1px'
},
// Place the menu item cursor over the style
ItemHoverStyle :{
Color: 'blue ',
BackgroundColor: 'red ',
Border: 'none'
},
// Event
Bindings:
{
'Item _ 1': function (t ){
Alert ('triggers was' + t. id + '\ nAction was item_1 ');
},
'Item _ 2': function (t ){
Alert ('triggers was' + t. id + '\ nAction was item_2 ');
},
'Item _ 3': function (t ){
Alert ('triggers was' + t. id + '\ nAction was item_3 ');
},
'Item _ 4': function (t ){
Alert ('triggers was' + t. id + '\ nAction was item_4 ');
}
}
});
// All the div labels whose class is demo3 are bound to this right-click menu
$ ('Div. demo3'). contextMenu ('mymenu3 ',{
// Override onContextMenu and onShowMenu events
OnContextMenu: function (e ){
If (((e.tar get). attr ('id') = 'dontshow ') return false;
Else return true;
},
OnShowMenu: function (e, menu ){
If (((e.tar get). attr ('id') = 'showone '){
$ ('# Item_2, # item_3', menu). remove ();
}
Return menu;
}
});
</Script>
</HTML>
:
It's fun and cool-looking. Let's add it to your project.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
