Ciao a tutti.Sto cercando di usare quanto suggerito in http://jsfiddle.net/dmitry_far/cgqft4k3.
In pratica vorrei mettere in piedi il contextmenu sulle righe di una tabella.
Semplificando lo script e mettendolo tutto insieme.. non mi funziona proprio.
Dove sto sbagliando? Riuyscite ad aiutarmi?Vi incollo tutto l'html.Grazie mille!
codice HTML:
codice HTML:<!DOCTYPE html> <html> <head> <title>pippo</title> <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"> <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </head> <body> <script type="text/javascript"> (function ($, window) { var menus = {}; $.fn.contextMenu = function (settings) { var $menu = $(settings.menuSelector); $menu.data("menuSelector", settings.menuSelector); if ($menu.length === 0) return; menus[settings.menuSelector] = {$menu: $menu, settings: settings}; //make sure menu closes on any click $(document).click(function (e) { hideAll(); }); $(document).on("contextmenu", function (e) { var $ul = $(e.target).closest("ul"); if ($ul.length === 0 || !$ul.data("menuSelector")) { hideAll(); } }); // Open context menu (function(element, menuSelector){ element.on("contextmenu", function (e) { // return native menu if pressing control if (e.ctrlKey) return; hideAll(); var menu = getMenu(menuSelector); //open menu menu.$menu .data("invokedOn", $(e.target)) .show() .css({ position: "absolute", left: getMenuPosition(e.clientX, 'width', 'scrollLeft'), top: getMenuPosition(e.clientY, 'height', 'scrollTop') }) .off('click') .on('click', 'a', function (e) { menu.$menu.hide(); var $invokedOn = menu.$menu.data("invokedOn"); var $selectedMenu = $(e.target); callOnMenuHide(menu); menu.settings.menuSelected.call(this, $invokedOn, $selectedMenu); }); callOnMenuShow(menu); return false; }); })($(this), settings.menuSelector); function getMenu(menuSelector) { var menu = null; $.each( menus, function( i_menuSelector, i_menu ){ if (i_menuSelector == menuSelector) { menu = i_menu return false; } }); return menu; } function hideAll() { $.each( menus, function( menuSelector, menu ){ menu.$menu.hide(); callOnMenuHide(menu); }); } function callOnMenuShow(menu) { var $invokedOn = menu.$menu.data("invokedOn"); if ($invokedOn && menu.settings.onMenuShow) { menu.settings.onMenuShow.call(this, $invokedOn); } } function callOnMenuHide(menu) { var $invokedOn = menu.$menu.data("invokedOn"); menu.$menu.data("invokedOn", null); if ($invokedOn && menu.settings.onMenuHide) { menu.settings.onMenuHide.call(this, $invokedOn); } } function getMenuPosition(mouse, direction, scrollDir) { var win = $(window)[direction](), scroll = $(window)[scrollDir](), menu = $(settings.menuSelector)[direction](), position = mouse + scroll; // opening menu would pass the side of the page if (mouse + menu > win && menu < mouse) { position -= menu; } return position; } return this; }; })(jQuery, window); $("#myTable tbody tr").contextMenu({ menuSelector: "#contextMenu", menuSelected: function ($invokedOn, $selectedMenu) { var msg = "MENU 1\nYou selected the menu item '" + $selectedMenu.text() + "' (" + $selectedMenu.attr("value") + ") " + " on the value '" + $invokedOn.text() + "'"; alert(msg); }, onMenuShow: function($invokedOn) { var tr = $invokedOn.closest("tr"); $(tr).addClass("warning"); }, onMenuHide: function($invokedOn) { var tr = $invokedOn.closest("tr"); $(tr).removeClass("warning"); } }); $("#myTable tbody td.username").contextMenu({ menuSelector: "#contextMenuUsername", menuSelected: function ($invokedOn, $selectedMenu) { var msg = "MENU 2\nYou selected the menu item '" + $selectedMenu.text() + "' (" + $selectedMenu.attr("value") + ") " + " on the value '" + $invokedOn.text() + "'"; alert(msg); }, onMenuShow: function($invokedOn) { $invokedOn.addClass("success"); }, onMenuHide: function($invokedOn) { $invokedOn.removeClass("success"); } }); </script> <table id="myTable" class="table table-hover"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td class="username">@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td class="username">@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td class="username">@twitter</td> </tr> </tbody> </table> <ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" > <li><a tabindex="-1" href="#" value="menu1:action-1">Action</a></li> <li><a tabindex="-1" href="#" value="menu1:action-2">Another action</a></li> <li><a tabindex="-1" href="#" value="menu1:action-3">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#" value="action-4">Separated link</a></li> </ul> <ul id="contextMenuUsername" class="dropdown-menu" role="menu" style="display:none" > <li><a tabindex="-1" href="#" value="menu2:action-1">User action</a></li> <li><a tabindex="-1" href="#" value="menu2:action-2">Another user action</a></li> </ul> <script type="text/javascript"> window.addEvent('load', function() { }); </script> </body></html>
Rispondi quotando
