basic.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Basic SideMenu - jQuery EasyUI Demo</title>
  6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  8. <link rel="stylesheet" type="text/css" href="../demo.css">
  9. <script type="text/javascript" src="../../jquery.min.js"></script>
  10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
  11. </head>
  12. <body>
  13. <h2>Basic SideMenu</h2>
  14. <p>Collapse the side menu to display the main icon.</p>
  15. <div style="margin:20px 0;">
  16. <a href="javascript:;" class="easyui-linkbutton" onclick="toggle()">Toggle</a>
  17. </div>
  18. <div id="sm" class="easyui-sidemenu" data-options="data:data"></div>
  19. <script type="text/javascript">
  20. var data = [{
  21. text: 'Item1',
  22. iconCls: 'icon-sum',
  23. state: 'open',
  24. children: [{
  25. text: 'Option1'
  26. },{
  27. text: 'Option2'
  28. },{
  29. text: 'Option3',
  30. children: [{
  31. text: 'Option31'
  32. },{
  33. text: 'Option32'
  34. }]
  35. }]
  36. },{
  37. text: 'Item2',
  38. iconCls: 'icon-more',
  39. children: [{
  40. text: 'Option4'
  41. },{
  42. text: 'Option5'
  43. },{
  44. text: 'Option6'
  45. }]
  46. }];
  47. function toggle(){
  48. var opts = $('#sm').sidemenu('options');
  49. $('#sm').sidemenu(opts.collapsed ? 'expand' : 'collapse');
  50. opts = $('#sm').sidemenu('options');
  51. $('#sm').sidemenu('resize', {
  52. width: opts.collapsed ? 60 : 200
  53. })
  54. }
  55. </script>
  56. </body>
  57. </html>