jquery.contextmenu.r2.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  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. *
  16. */
  17. (function($) {
  18. var menu, shadow, trigger, content, hash, currentTarget;
  19. var defaults = {
  20. menuStyle: {
  21. listStyle: 'none',
  22. padding: '1px',
  23. margin: '0px',
  24. backgroundColor: '#fff',
  25. border: '1px solid #999',
  26. width: '100px'
  27. },
  28. itemStyle: {
  29. margin: '0px',
  30. color: '#000',
  31. display: 'block',
  32. cursor: 'default',
  33. padding: '3px',
  34. border: '1px solid #fff',
  35. backgroundColor: 'transparent'
  36. },
  37. itemHoverStyle: {
  38. border: '1px solid #0a246a',
  39. backgroundColor: '#b6bdd2'
  40. },
  41. eventPosX: 'pageX',
  42. eventPosY: 'pageY',
  43. shadow : true,
  44. onContextMenu: null,
  45. onShowMenu: null
  46. };
  47. $.fn.contextMenu = function(id, options) {
  48. if (!menu) { // Create singleton menu
  49. menu = $('<div id="jqContextMenu"></div>')
  50. .hide()
  51. .css({position:'absolute', zIndex:'500'})
  52. .appendTo('body')
  53. .bind('click', function(e) {
  54. e.stopPropagation();
  55. });
  56. }
  57. if (!shadow) {
  58. shadow = $('<div></div>')
  59. .css({backgroundColor:'#000',position:'absolute',opacity:0.2,zIndex:499})
  60. .appendTo('body')
  61. .hide();
  62. }
  63. hash = hash || [];
  64. hash.push({
  65. id : id,
  66. menuStyle: $.extend({}, defaults.menuStyle, options.menuStyle || {}),
  67. itemStyle: $.extend({}, defaults.itemStyle, options.itemStyle || {}),
  68. itemHoverStyle: $.extend({}, defaults.itemHoverStyle, options.itemHoverStyle || {}),
  69. bindings: options.bindings || {},
  70. shadow: options.shadow || options.shadow === false ? options.shadow : defaults.shadow,
  71. onContextMenu: options.onContextMenu || defaults.onContextMenu,
  72. onShowMenu: options.onShowMenu || defaults.onShowMenu,
  73. eventPosX: options.eventPosX || defaults.eventPosX,
  74. eventPosY: options.eventPosY || defaults.eventPosY
  75. });
  76. var index = hash.length - 1;
  77. $(this).bind('contextmenu', function(e) {
  78. // Check if onContextMenu() defined
  79. var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
  80. if (bShowContext) display(index, this, e, options);
  81. return false;
  82. });
  83. return this;
  84. };
  85. function display(index, trigger, e, options) {
  86. var cur = hash[index];
  87. content = $('#'+cur.id).find('ul:first').clone(true);
  88. content.css(cur.menuStyle).find('li').css(cur.itemStyle).hover(
  89. function() {
  90. $(this).css(cur.itemHoverStyle);
  91. },
  92. function(){
  93. $(this).css(cur.itemStyle);
  94. }
  95. ).find('img').css({verticalAlign:'middle',paddingRight:'2px'});
  96. // Send the content to the menu
  97. menu.html(content);
  98. // if there's an onShowMenu, run it now -- must run after content has been added
  99. // if you try to alter the content variable before the menu.html(), IE6 has issues
  100. // updating the content
  101. if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);
  102. $.each(cur.bindings, function(id, func) {
  103. $('#'+id, menu).bind('click', function(e) {
  104. hide();
  105. func(trigger, currentTarget);
  106. });
  107. });
  108. menu.css({'left':e[cur.eventPosX],'top':e[cur.eventPosY]}).show();
  109. if (cur.shadow) shadow.css({width:menu.width(),height:menu.height(),left:e.pageX+2,top:e.pageY+2}).show();
  110. $(document).one('click', hide);
  111. }
  112. function hide() {
  113. menu.hide();
  114. shadow.hide();
  115. }
  116. // Apply defaults
  117. $.contextMenu = {
  118. defaults : function(userDefaults) {
  119. $.each(userDefaults, function(i, val) {
  120. if (typeof val == 'object' && defaults[i]) {
  121. $.extend(defaults[i], val);
  122. }
  123. else defaults[i] = val;
  124. });
  125. }
  126. };
  127. })(jQuery);
  128. $(function() {
  129. $('div.contextMenu').hide();
  130. });