jquery.contextmenu.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. /*
  2. * ContextMenu - jQuery plugin for right-click context menus
  3. *
  4. * Author: Chris Domigan
  5. * Contributors: Dan G. Switzer, II
  6. * Parts of this plugin are inspired by Joern Zaefferer's Tooltip plugin
  7. *
  8. * Dual licensed under the MIT and GPL licenses:
  9. * http://www.opensource.org/licenses/mit-license.php
  10. * http://www.gnu.org/licenses/gpl.html
  11. *
  12. * Version: r2
  13. * Date: 16 July 2007
  14. *
  15. * For documentation visit http://www.trendskitchens.co.nz/jquery/contextmenu/
  16. *
  17. */
  18. (function($) {
  19. var menu, shadow, content, hash, currentTarget;
  20. var defaults = {
  21. menuStyle: {
  22. listStyle: 'none',
  23. padding: '1px',
  24. margin: '0px',
  25. backgroundColor: '#fff',
  26. border: '1px solid #999',
  27. width: '100px'
  28. },
  29. itemStyle: {
  30. margin: '0px',
  31. color: '#000',
  32. display: 'block',
  33. cursor: 'default',
  34. padding: '3px',
  35. border: '1px solid #fff',
  36. backgroundColor: 'transparent'
  37. },
  38. itemHoverStyle: {
  39. border: '1px solid #0a246a',
  40. backgroundColor: '#b6bdd2'
  41. },
  42. eventPosX: 'pageX',
  43. eventPosY: 'pageY',
  44. shadow : true,
  45. onContextMenu: null,
  46. onShowMenu: null
  47. };
  48. $.fn.contextMenu = function(id, options) {
  49. if (!menu) { // Create singleton menu
  50. menu = $('<div id="jqContextMenu"></div>')
  51. .hide()
  52. .css({position:'absolute', zIndex:'500'})
  53. .appendTo('body')
  54. .bind('click', function(e) {
  55. e.stopPropagation();
  56. });
  57. }
  58. if (!shadow) {
  59. shadow = $('<div></div>')
  60. .css({backgroundColor:'#000',position:'absolute',opacity:0.2,zIndex:499})
  61. .appendTo('body')
  62. .hide();
  63. }
  64. hash = hash || [];
  65. hash.push({
  66. id : id,
  67. menuStyle: $.extend({}, defaults.menuStyle, options.menuStyle || {}),
  68. itemStyle: $.extend({}, defaults.itemStyle, options.itemStyle || {}),
  69. itemHoverStyle: $.extend({}, defaults.itemHoverStyle, options.itemHoverStyle || {}),
  70. bindings: options.bindings || {},
  71. shadow: options.shadow || options.shadow === false ? options.shadow : defaults.shadow,
  72. onContextMenu: options.onContextMenu || defaults.onContextMenu,
  73. onShowMenu: options.onShowMenu || defaults.onShowMenu,
  74. eventPosX: options.eventPosX || defaults.eventPosX,
  75. eventPosY: options.eventPosY || defaults.eventPosY
  76. });
  77. var index = hash.length - 1;
  78. $(this).bind('contextmenu', function(e) {
  79. // Check if onContextMenu() defined
  80. var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
  81. currentTarget = e.target;
  82. if (bShowContext) {
  83. display(index, this, e );
  84. return false;
  85. }
  86. });
  87. return this;
  88. };
  89. function display(index, trigger, e ) {
  90. var cur = hash[index];
  91. content = $('#'+cur.id).find('ul:first').clone(true);
  92. content.css(cur.menuStyle).find('li').css(cur.itemStyle).hover(
  93. function() {
  94. $(this).css(cur.itemHoverStyle);
  95. },
  96. function(){
  97. $(this).css(cur.itemStyle);
  98. }
  99. ).find('img').css({verticalAlign:'middle',paddingRight:'2px'});
  100. // Send the content to the menu
  101. menu.html(content);
  102. // if there's an onShowMenu, run it now -- must run after content has been added
  103. // if you try to alter the content variable before the menu.html(), IE6 has issues
  104. // updating the content
  105. if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);
  106. $.each(cur.bindings, function(id, func) {
  107. $('#'+id, menu).bind('click', function() {
  108. hide();
  109. func(trigger, currentTarget);
  110. });
  111. });
  112. menu.css({'left':e[cur.eventPosX],'top':e[cur.eventPosY]}).show();
  113. if (cur.shadow) shadow.css({width:menu.width(),height:menu.height(),left:e.pageX+2,top:e.pageY+2}).show();
  114. $(document).one('click', hide);
  115. }
  116. function hide() {
  117. menu.hide();
  118. shadow.hide();
  119. }
  120. // Apply defaults
  121. $.contextMenu = {
  122. defaults : function(userDefaults) {
  123. $.each(userDefaults, function(i, val) {
  124. if (typeof val == 'object' && defaults[i]) {
  125. $.extend(defaults[i], val);
  126. }
  127. else defaults[i] = val;
  128. });
  129. }
  130. };
  131. })(jQuery);
  132. $(function() {
  133. $('div.contextMenu').hide();
  134. });