mulmenu.htm 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <link href="../../lib/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" />
  6. <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  7. <script src="../../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
  8. <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
  9. <script src="../../lib/ligerUI/js/plugins/ligerMenu.js" type="text/javascript"></script>
  10. <script type="text/javascript">
  11. var menu1;
  12. var menu2;
  13. function onclick11(item, i)
  14. {
  15. alert(item.text);
  16. }
  17. function onclick112()
  18. {
  19. menu1.hide();
  20. }
  21. $(function ()
  22. {
  23. menu1 = $.ligerMenu({ top: 100, left: 100, width: 120, items:
  24. [
  25. { text: '增加', click: onclick11,icon:'add' },
  26. { text: '修改', click: onclick11,disable:true },
  27. { line: true },
  28. { text: '查看', click: onclick11 },
  29. { text: '关闭', click: onclick112 }
  30. ]
  31. });
  32. menu2 = $.ligerMenu({ top: 100, left: 100, width: 90, items:
  33. [
  34. { text: '打印', click: onclick11 },
  35. { text: '报表', click: onclick11 }
  36. ]
  37. });
  38. $("#div1").bind("contextmenu", function (e)
  39. {
  40. menu1.show({ top: e.pageY, left: e.pageX });
  41. return false;
  42. });
  43. $("#div2").bind("contextmenu", function (e)
  44. {
  45. menu2.show({ top: e.pageY, left: e.pageX });
  46. return false;
  47. });
  48. });
  49. </script>
  50. <style type="text/css">
  51. #menu1,.l-menu-shadow{top:30px; left:50px;}
  52. #menu1{ width:200px;}
  53. </style>
  54. </head>
  55. <body style="padding:20px; overflow:hidden; width:1000px; ">
  56. <div id="div1" style="width:400px; height:400px; margin:4px; background:#f1f1f1; float:left;">
  57. </div>
  58. <div id="div2" style="width:400px; height:400px; margin:4px; background:#fa93f3; float:left;">
  59. </div>
  60. </body>
  61. </html>