Advertisement
Guest User

contextMenu for dynamically added elements

a guest
Aug 10th, 2011
1,234
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // jQuery Context Menu Plugin
  2. //
  3. // Version 1.01
  4. //
  5. // Cory S.N. LaViska
  6. // A Beautiful Site (http://abeautifulsite.net/)
  7. //
  8. // More info: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/
  9. //
  10. // Terms of Use
  11. //
  12. // This plugin is dual-licensed under the GNU General Public License
  13. //   and the MIT License and is copyright A Beautiful Site, LLC.
  14. //
  15. if(jQuery)( function() {
  16.     $.extend($.fn, {
  17.        
  18.         contextMenu: function(o, callback) {
  19.             // Defaults
  20.             if( o.menu == undefined ) return false;
  21.             if( o.inSpeed == undefined ) o.inSpeed = 150;
  22.             if( o.outSpeed == undefined ) o.outSpeed = 75;
  23.             // 0 needs to be -1 for expected results (no fade)
  24.             if( o.inSpeed == 0 ) o.inSpeed = -1;
  25.             if( o.outSpeed == 0 ) o.outSpeed = -1;
  26.             // Loop each context menu
  27.             $(this).live("mousedown", function(e) {
  28.                 var el = $(this);
  29.                 var offset = $(el).offset();
  30.                 // Add contextMenu class
  31.                 $('#' + o.menu).addClass('contextMenu');
  32.                
  33.                 var evt = e;
  34.                 evt.stopPropagation();
  35.                 $(this).mouseup( function(e) {
  36.                     e.stopPropagation();
  37.                     var srcElement = $(this);
  38.                     $(this).unbind('mouseup');
  39.                     if( evt.button == 2 ) {
  40.                         // Hide context menus that may be showing
  41.                         $(".contextMenu").hide();
  42.                         // Get this context menu
  43.                         var menu = $('#' + o.menu);
  44.                        
  45.                         if( $(el).hasClass('disabled') ) return false;
  46.                        
  47.                         // Detect mouse position
  48.                         var d = {}, x, y;
  49.                         if( self.innerHeight ) {
  50.                             d.pageYOffset = self.pageYOffset;
  51.                             d.pageXOffset = self.pageXOffset;
  52.                             d.innerHeight = self.innerHeight;
  53.                             d.innerWidth = self.innerWidth;
  54.                         } else if( document.documentElement &&
  55.                             document.documentElement.clientHeight ) {
  56.                             d.pageYOffset = document.documentElement.scrollTop;
  57.                             d.pageXOffset = document.documentElement.scrollLeft;
  58.                             d.innerHeight = document.documentElement.clientHeight;
  59.                             d.innerWidth = document.documentElement.clientWidth;
  60.                         } else if( document.body ) {
  61.                             d.pageYOffset = document.body.scrollTop;
  62.                             d.pageXOffset = document.body.scrollLeft;
  63.                             d.innerHeight = document.body.clientHeight;
  64.                             d.innerWidth = document.body.clientWidth;
  65.                         }
  66.                         (e.pageX) ? x = e.pageX : x = e.clientX + d.scrollLeft;
  67.                         (e.pageY) ? y = e.pageY : y = e.clientY + d.scrollTop;
  68.                        
  69.                         // Show the menu
  70.                         $(document).unbind('click');
  71.                         $(menu).css({ top: y, left: x }).fadeIn(o.inSpeed);
  72.                         // Hover events
  73.                         $(menu).find('A').mouseover( function() {
  74.                             $(menu).find('LI.hover').removeClass('hover');
  75.                             $(this).parent().addClass('hover');
  76.                         }).mouseout( function() {
  77.                             $(menu).find('LI.hover').removeClass('hover');
  78.                         });
  79.                        
  80.                         // Keyboard
  81.                         $(document).keypress( function(e) {
  82.                             switch( e.keyCode ) {
  83.                                 case 38: // up
  84.                                     if( $(menu).find('LI.hover').size() == 0 ) {
  85.                                         $(menu).find('LI:last').addClass('hover');
  86.                                     } else {
  87.                                         $(menu).find('LI.hover').removeClass('hover').prevAll('LI:not(.disabled)').eq(0).addClass('hover');
  88.                                         if( $(menu).find('LI.hover').size() == 0 ) $(menu).find('LI:last').addClass('hover');
  89.                                     }
  90.                                 break;
  91.                                 case 40: // down
  92.                                     if( $(menu).find('LI.hover').size() == 0 ) {
  93.                                         $(menu).find('LI:first').addClass('hover');
  94.                                     } else {
  95.                                         $(menu).find('LI.hover').removeClass('hover').nextAll('LI:not(.disabled)').eq(0).addClass('hover');
  96.                                         if( $(menu).find('LI.hover').size() == 0 ) $(menu).find('LI:first').addClass('hover');
  97.                                     }
  98.                                 break;
  99.                                 case 13: // enter
  100.                                     $(menu).find('LI.hover A').trigger('click');
  101.                                 break;
  102.                                 case 27: // esc
  103.                                     $(document).trigger('click');
  104.                                 break
  105.                             }
  106.                         });
  107.                        
  108.                         // When items are selected
  109.                         $('#' + o.menu).find('A').unbind('click');
  110.                         $('#' + o.menu).find('LI:not(.disabled) A').click( function() {
  111.                             $(document).unbind('click').unbind('keypress');
  112.                             $(".contextMenu").hide();
  113.                             // Callback
  114.                             if( callback ) callback( $(this).attr('href').substr(1), $(srcElement), {x: x - offset.left, y: y - offset.top, docX: x, docY: y} );
  115.                             return false;
  116.                         });
  117.                        
  118.                         // Hide bindings
  119.                         setTimeout( function() { // Delay for Mozilla
  120.                             $(document).click( function() {
  121.                                 $(document).unbind('click').unbind('keypress');
  122.                                 $(menu).fadeOut(o.outSpeed);
  123.                                 return false;
  124.                             });
  125.                         }, 0);
  126.                     }
  127.                 });
  128.                
  129.                 // Disable text selection
  130.                 if( $.browser.mozilla ) {
  131.                     $('#' + o.menu).each( function() { $(this).css({ 'MozUserSelect' : 'none' }); });
  132.                 } else if( $.browser.msie ) {
  133.                     $('#' + o.menu).each( function() { $(this).bind('selectstart.disableTextSelect', function() { return false; }); });
  134.                 } else {
  135.                     $('#' + o.menu).each(function() { $(this).bind('mousedown.disableTextSelect', function() { return false; }); });
  136.                 }
  137.                 // Disable browser context menu (requires both selectors to work in IE/Safari + FF/Chrome)
  138.                 $(el).add($('UL.contextMenu')).bind('contextmenu', function() { return false; });
  139.                
  140.             });
  141.             return $(this);
  142.         },
  143.        
  144.         // Disable context menu items on the fly
  145.         disableContextMenuItems: function(o) {
  146.             if( o == undefined ) {
  147.                 // Disable all
  148.                 $(this).find('LI').addClass('disabled');
  149.                 return( $(this) );
  150.             }
  151.             $(this).each( function() {
  152.                 if( o != undefined ) {
  153.                     var d = o.split(',');
  154.                     for( var i = 0; i < d.length; i++ ) {
  155.                         $(this).find('A[href="' + d[i] + '"]').parent().addClass('disabled');
  156.                        
  157.                     }
  158.                 }
  159.             });
  160.             return( $(this) );
  161.         },
  162.        
  163.         // Enable context menu items on the fly
  164.         enableContextMenuItems: function(o) {
  165.             if( o == undefined ) {
  166.                 // Enable all
  167.                 $(this).find('LI.disabled').removeClass('disabled');
  168.                 return( $(this) );
  169.             }
  170.             $(this).each( function() {
  171.                 if( o != undefined ) {
  172.                     var d = o.split(',');
  173.                     for( var i = 0; i < d.length; i++ ) {
  174.                         $(this).find('A[href="' + d[i] + '"]').parent().removeClass('disabled');
  175.                        
  176.                     }
  177.                 }
  178.             });
  179.             return( $(this) );
  180.         },
  181.        
  182.         // Disable context menu(s)
  183.         disableContextMenu: function() {
  184.             $(this).each( function() {
  185.                 $(this).addClass('disabled');
  186.             });
  187.             return( $(this) );
  188.         },
  189.        
  190.         // Enable context menu(s)
  191.         enableContextMenu: function() {
  192.             $(this).each( function() {
  193.                 $(this).removeClass('disabled');
  194.             });
  195.             return( $(this) );
  196.         },
  197.        
  198.         // Destroy context menu(s)
  199.         destroyContextMenu: function() {
  200.             // Destroy specified context menus
  201.             $(this).each( function() {
  202.                 // Disable action
  203.                 $(this).unbind('mousedown').unbind('mouseup');
  204.             });
  205.             return( $(this) );
  206.         }
  207.        
  208.     });
  209. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement