[Xplugins] JQuery ContextMenu Right-click menu

[2012-04-12] Contextmenu Right-click menu v0.1 Release

[Function] Popup Right-click menu in a specific area

[function] can be in the popup right-click menu area, and then block a small area.

[function] There are two ways to add a right-click menu item, parameter configuration to add and specify ID entry.

[Function] Support event callback, there are two, a parameter is configured to correspond to callbacks, specify the ID of the unified callback, can be based on the setting of the link label difference.

[2012-04-29] Contextmenu Right-click menu v0.2 version update

[fix] Fixed a bug where the specified ID was added when the content does not exist.

[new] Added the function that the menu becomes gray and the event callback is invalid.

[Adjust] adjusted part of the CSS, the source code is divided into models, and debugging parts.

Plugin description

Contextmenu is a multi-function, JQuery-based dialog box plugin.

Operating Environment

Compatible with ie6+, Firefox, Chrome, Opera and other mainstream browsers.

Use authorization

Contextmenu permanent free use, if there are good suggestions, please email: [Email protected], Contextmenu perfect need everyone's good advice.

Since the configuration of the overall project development to use the right-click menu, such as tables, Web desktop and so on. Describes the functions of the right-click menu design, which can be learned according to the configuration file annotations.

1. var defaults={
2. offsetx:2,//Mouse on X-axis offset
3. offsety:2,//Mouse on y-axis offset
4. speed:300,//effect Speed
5. flash:!1,//effect is turned on, default does not open
6. Flashmode: ",//special effects mode, with Flash for true use
7. cancel:!1,//exclusion does not appear in the right-click menu area
8. items:[],//menu Items
9. Action:$.noop ()//Free menu item back to Event
10. };

There are two ways to add a right-click menu : One is to add items and have an event callback directly;

2. <script type="Text/javascript">
4. $ (function () {
6. $ (' #WincontextMenu-test '). Wincontextmenu ({
8. Cancel: '. Cancel ',
10. items:[{
12. ID: ' Item1 ',
14. Text: ' Item1 item ',
16. Icon: '. /skins/default/contextmenu/icons/sync.png ',
18. disable:!0,//new additions to True/false
20. Action:function () {alert (' first-item1 ')}//added by item
22. },
24. {
26. ID: ' ITEM2 ',
28. Text: ' ITEM2 item ',
30. Icon: '. /skins/default/contextmenu/icons/calendar.png ',
32. Action:function () {alert (' second-item2 ')}//added by item
34. }],
36. Action:function (e) {alert (e.id);} Free Design Item Event callback
38. });
40. });
42. </Script>

The second is to add an Li tag to the Web page by the specified ID of Wincontextmenu

2. <div id="Wincontextmenu" class="Wincontextmenu" style= "top:100px; left:230px; Display:none; " >
4.   <li><< Span class= "Tag-name" >a id= "copy"  href=" # ">< img src= ". /skins/default/contextmenu/icons/copy.png ">< Span> copy </span> </a></ li>   
6.   <li> <a id= " Create " href=" # "> <img src= >< Span> new </span> </a></ li>   
8.   <div class= "m-split" ></div >   
10. <li><a id="Save" href="#"><img src=". /skins/default/contextmenu/icons/save.png "><span> Save </span> </a></li>
11. <Li><a id= "table"  href= "#"  class= "cmdisable" ><< Span class= "Tag-name" >img src= ". /skins/default/contextmenu/icons/table.png ">< Span> form </span> </a></ li>   
13.   <li> <a id= " Setup " href=" # "> <img src= >< span> set </span ></a> </li>   
15. </div>

The above two additions are listed in the previous row, appended by the specified ID, in the items item.

Seeing is believing, or directly to the source code to go ... This page is available for download.

Code Snippets (4)

File Admininterface-contextmenu (source v0.2). rar ~ 268KB Download (34)

[code] jquery UI ContextMenu Right-click menu

2. /*
4. * Author:antianlu
6. * DATE:2012-04-21
8. * Plugin Name:jQuery.Contextmenu
10. * address:http://www.oschina.net/code/snippet_153403_9880
12. * version:0.2
14. * Email:[email protected]
16. */
18. (function (cm) {
20. jquery.fn.wincontextmenu=Function (options) {
22. var defaults={
24. offsetx:2,//Mouse on X-axis offset
26. offsety:2,//Mouse on y-axis offset
28. speed:300,//effect Speed
30. flash:!1,//effect is turned on, default does not open
32. Flashmode: ",//special effects mode, with Flash for true use
34. cancel:!1,//exclusion does not appear in the right-click menu area
36. items:[],//menu Items
38. Action:$.noop ()//Free menu item back to Event
40. };
42. var opt=cm.extend (true,defaults,options);
44. function Create (e) {
46. var m=cm ('<ul class=' wincontextmenu></ul> '). AppendTo (  Document.body);
48. Cm.each (Opt.items,function (I,ITM) {
50. if (ITM) {
51. Varrow=cm (' ref=" Sitem "  href= "javascript:void (0)" > <span></ span></a ></li> '). AppendTo (m);  
53. ITM.ICON?CM ('<img src= '' +itm.icon+ '> '). InsertBefore (Row.find (' span ')): ';
55. Itm.text?row.find (' span '). Text (Itm.text): ";
57. if (itm.action) {
59. Row.find (' a '). Click (function () {this.classname!= ' cmdisable '? Itm.action (e): null;});
61. }
63. });
65. if (cm (' #WincontextMenu '). html ()!=null) {
67. CM (cm (' #WincontextMenu '). html (). Replace (/#/g, ' javascript:void (0) '). AppendTo (m);}
69. return m;
71. }
73. if (opt.cancel) {//exclude do not appear right-click menu area
75. CM (Opt.cancel). Live (' ContextMenu ', function (e) {return false});
77. This.live (' ContextMenu ', function (e) {
79. var m=Create (E). Show ();
81. var l = E.pagex + opt.offsetx,
83. t = e.pagey+opt.offsety,
85. p={
87. WH:CM (window). Height (),
89. WW:CM (window). Width (),
91. Mh:m.height (),
93. Mw:m.width ()
95. }
97. t= (T+P.MH)>=p.wh? ( t-=p.mh): t;//When the menu is outside the bounds of the window
99. l= (L+P.MW)>=p.ww? (  l-=P.MW): l;
101. M.css ({zindex:1000001, left:l, Top:t}). Live (' ContextMenu ', function () {return false;});
103. M.find (' a '). Click (function (e) {///Call the new menu item added from the page
105. var b=$ (this). attr (' ref ');
107. if (b!= ' Sitem ') {this.classname!= ' cmdisable '? Opt.action (this): null;}
109. E.preventdefault ();
111. });
113. CM (Document.body). Live (' ContextMenu click ', function () {//Prevent dynamically loaded label invalidation issues
115. M.remove ();
117. });
119. return false;
121. });
123. return this;
125. }
127. }) (JQuery);

Original address: http://www.oschina.net/code/snippet_153403_9880

[Xplugins] JQuery ContextMenu Right-click menu