jquery.contextmenu.r2.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. (function ($) {
  2. var menu, shadow, trigger, content, hash, currentTarget;
  3. var defaults = {
  4. menuStyle:{
  5. border: 'none',
  6. padding: '0'
  7. },
  8. itemStyle :{
  9. backgroundColor: '#fcfcfc',
  10. color: '#333',
  11. border: 'none',
  12. padding: '0px',
  13. padding: '6px 0',
  14. borderBottom: '1px solid #eaeaea',
  15. textAlign:'left'
  16. },
  17. itemHoverStyle: {
  18. color: '#333',
  19. backgroundColor: '#fcfcfc',
  20. border: 'none',
  21. borderBottom: '1px solid #eaeaea'
  22. },
  23. eventPosX: 'pageX',
  24. eventPosY: 'pageY',
  25. shadow: true,
  26. onContextMenu: null,
  27. onShowMenu: null,
  28. onLoadMenu: null,
  29. onClick:null
  30. };
  31. $.fn.contextMenu = function (id, options) {
  32. if (!menu) { // Create singleton menu
  33. menu = $('<div id="jqContextMenu"></div>')
  34. .hide()
  35. .css({
  36. position: 'absolute',
  37. zIndex: '500'
  38. })
  39. .appendTo('body')
  40. .bind('click', function (e) {
  41. e.stopPropagation();
  42. });
  43. }
  44. if (!shadow) {
  45. shadow = $('<div></div>')
  46. .css({
  47. backgroundColor: '#000',
  48. position: 'absolute',
  49. opacity: 0,
  50. zIndex: 499
  51. })
  52. .appendTo('body')
  53. .hide();
  54. }
  55. hash = hash || [];
  56. hash.push({
  57. id: id,
  58. menuStyle: $.extend({}, defaults.menuStyle, options.menuStyle || {}),
  59. itemStyle: $.extend({}, defaults.itemStyle, options.itemStyle || {}),
  60. itemHoverStyle: $.extend({}, defaults.itemHoverStyle, options.itemHoverStyle || {}),
  61. bindings: options.bindings || {},
  62. shadow: options.shadow || options.shadow === false ? options.shadow : defaults.shadow,
  63. onContextMenu: options.onContextMenu || defaults.onContextMenu,
  64. onShowMenu: options.onShowMenu || defaults.onShowMenu,
  65. onLoadMenu: options.onLoadMenu || defaults.onLoadMenu,
  66. onClick: options.onClick || defaults.onClick,
  67. eventPosX: options.eventPosX || defaults.eventPosX,
  68. eventPosY: options.eventPosY || defaults.eventPosY
  69. });
  70. var index = hash.length - 1;
  71. var cur = hash[index];
  72. content = $('#' + cur.id).find('ul').clone(true);
  73. content.css(cur.menuStyle).find('li').css(cur.itemStyle).hover(
  74. function () {
  75. $(this).css(cur.itemHoverStyle);
  76. },
  77. function () {
  78. $(this).css(cur.itemStyle);
  79. }
  80. ).find('img').css({
  81. verticalAlign: 'middle',
  82. paddingRight: '2px'
  83. });
  84. menu.html(content);
  85. if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);
  86. $.each(cur.bindings, function (id, func) {
  87. $('#' + id, menu).bind('click', function (e) {
  88. hide();
  89. func(trigger, currentTarget);
  90. });
  91. });
  92. $('#jqContextMenu li').on('mousedown', function (e) {
  93. menu.hide();
  94. shadow.hide();
  95. cur.onClick && cur.onClick($(this));
  96. e.stopPropagation();
  97. e.preventDefault();
  98. });
  99. $(this).bind('contextmenu', function (e) {
  100. // Check if onContextMenu() defined
  101. var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
  102. if (bShowContext) display(index, this, e, options);
  103. return false;
  104. });
  105. return menu;
  106. };
  107. function display(index, trigger, e, options) {
  108. // if there's an onShowMenu, run it now -- must run after content has been added
  109. // if you try to alter the content variable before the menu.html(), IE6 has issues
  110. // updating the content
  111. if(options.checkMenu && options.checkMenu()) return;
  112. var index = hash.length - 1;
  113. var cur = hash[index];
  114. cur.onLoadMenu && cur.onLoadMenu();
  115. var pos = {
  116. x:e[cur.eventPosX],
  117. y:e[cur.eventPosY]
  118. }
  119. if(pos.x + menu.width() > document.body.clientWidth) pos.x -= menu.width();
  120. if(pos.y + menu.height() > document.body.clientHeight) pos.y -= menu.height();
  121. menu.css({
  122. 'left': pos.x,
  123. 'top': pos.y
  124. }).show();
  125. if (cur.shadow) shadow.css({
  126. width: menu.width(),
  127. height: menu.height(),
  128. left: e.pageX + 2,
  129. top: e.pageY + 2
  130. }).show();
  131. $("body").one('mousedown touchstart', hide);
  132. }
  133. function hide(e) {
  134. menu.hide();
  135. shadow.hide();
  136. if (!$("#attrEdit").is(":visible")&&!$("#attrDelete").is(":visible")) {
  137. $('.attribute-box').hide();
  138. }
  139. }
  140. // Apply defaults
  141. $.contextMenu = {
  142. defaults: function (userDefaults) {
  143. $.each(userDefaults, function (i, val) {
  144. if (typeof val == 'object' && defaults[i]) {
  145. $.extend(defaults[i], val);
  146. } else defaults[i] = val;
  147. });
  148. }
  149. };
  150. })(jQuery);
  151. $(function () {
  152. $('div.contextMenu').hide();
  153. });