evenmenu.htm 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  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/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  6. <script src="../../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
  7. <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
  8. <script src="../../lib/ligerUI/js/plugins/ligerMenu.js" type="text/javascript"></script>
  9. <script type="text/javascript">
  10. var menu;
  11. function f_addItem()
  12. {
  13. var menuitem = {
  14. text: '动态项' + menu.getItemCount(),
  15. click : onclick11
  16. };
  17. menu.addItem(menuitem);
  18. }
  19. function f_addItemLine()
  20. {
  21. var menuitem = {
  22. line:true
  23. };
  24. menu.addItem(menuitem);
  25. }
  26. function f_disableItem()
  27. {
  28. menu.setDisabled('close');
  29. }
  30. function f_removeItem()
  31. {
  32. menu.removeItem('add');
  33. }
  34. function f_enableItem()
  35. {
  36. menu.setEnabled('modify');
  37. }
  38. function onclick11(item, i)
  39. {
  40. alert(item.text);
  41. }
  42. function onclick112()
  43. {
  44. menu.hide();
  45. }
  46. $(function ()
  47. {
  48. menu = $.ligerMenu({ top: 100, left: 100, width: 120, items:
  49. [
  50. { id:'add',text: '增加', click: onclick11 },
  51. { id: 'modify', text: '修改', click: onclick11, disable: true },
  52. { line: true },
  53. { id: 'view', text: '查看', click: onclick11 },
  54. { id: 'close', text: '关闭', click: onclick112 }
  55. ]
  56. });
  57. $(document).bind("contextmenu", function (e)
  58. {
  59. menu.show({ top: e.pageY, left: e.pageX });
  60. return false;
  61. });
  62. });
  63. </script>
  64. <style type="text/css">
  65. #menu1,.l-menu-shadow{top:30px; left:50px;}
  66. #menu1{ width:200px;}
  67. .l-btn2 { float:left; margin-left:10px; width:auto; padding-left:4px; padding-right:4px;}
  68. </style>
  69. </head>
  70. <body style="padding:20px; overflow:hidden; ">
  71. <a href="javascript:f_addItem()" class="l-button l-btn2">增加项</a>
  72. <a href="javascript:f_addItemLine()" class="l-button l-btn2">增加分割线</a>
  73. <a href="javascript:f_removeItem()" class="l-button l-btn2">删除项</a>
  74. <a href="javascript:f_disableItem()" class="l-button l-btn2">设置项不可用</a>
  75. <a href="javascript:f_enableItem()" class="l-button l-btn2">设置项可用</a>
  76. <div id="div1" style="width:400px; height:400px;">
  77. </div>
  78. </body>
  79. </html>