menubar.htm 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  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. <link href="../../lib/ligerUI/skins/ligerui-icons.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 src="../../lib/ligerUI/js/plugins/ligerMenuBar.js" type="text/javascript"></script>
  11. <script src="../../lib/ligerUI/js/plugins/ligerToolBar.js" type="text/javascript"></script>
  12. <script type="text/javascript">
  13. var menu1 = { width: 120, items:
  14. [
  15. { text: '保存', click: itemclick },
  16. { text: '列存为', click: itemclick },
  17. { line: true },
  18. { text: '关闭', click: itemclick }
  19. ]
  20. };
  21. var menu2 = { width: 120, items:
  22. [
  23. {
  24. text: '文件', children:
  25. [
  26. { text: 'Excel', click: itemclick },
  27. { text: 'Word', click: itemclick },
  28. { text: 'PDF', click: itemclick },
  29. { text: 'TXT', click: itemclick },
  30. { line: true },
  31. { text: 'XML', click: itemclick }
  32. ]
  33. },
  34. ]
  35. };
  36. function itemclick(item)
  37. {
  38. alert(item.text);
  39. }
  40. $(function ()
  41. {
  42. $("#topmenu").ligerMenuBar({ items: [
  43. { text: '文件', menu: menu1 },
  44. { text: '导出', menu: menu2 }
  45. ]
  46. });
  47. $("#toptoolbar").ligerToolBar({ items: [
  48. { text: '增加', click: itemclick , icon:'add'},
  49. { line:true },
  50. { text: '修改', click: itemclick },
  51. { line:true },
  52. { text: '删除', click: itemclick }
  53. ]
  54. });
  55. });
  56. </script>
  57. <style type="text/css">
  58. #menu1,.l-menu-shadow{top:30px; left:50px;}
  59. #menu1{ width:200px;}
  60. </style>
  61. </head>
  62. <body style="padding:0px; overflow:hidden; ">
  63. <div id="topmenu"></div>
  64. <div id="toptoolbar"></div>
  65. </body>
  66. </html>