style.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>SideMenu Style - 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>SideMenu Style</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. <link rel="stylesheet" type="text/css" href="sidemenu_style.css">
  20. <script type="text/javascript">
  21. var data = [{
  22. text: 'Forms',
  23. iconCls: 'fa fa-wpforms',
  24. state: 'open',
  25. children: [{
  26. text: 'Form Element'
  27. },{
  28. text: 'Wizard'
  29. },{
  30. text: 'File Upload'
  31. }]
  32. },{
  33. text: 'Mail',
  34. iconCls: 'fa fa-at',
  35. selected: true,
  36. children: [{
  37. text: 'Inbox'
  38. },{
  39. text: 'Sent'
  40. },{
  41. text: 'Trash',
  42. children: [{
  43. text: 'Item1'
  44. },{
  45. text: 'Item2'
  46. }]
  47. }]
  48. },{
  49. text: 'Layout',
  50. iconCls: 'fa fa-table',
  51. children: [{
  52. text: 'Panel'
  53. },{
  54. text: 'Accordion'
  55. },{
  56. text: 'Tabs'
  57. }]
  58. }];
  59. function toggle(){
  60. var opts = $('#sm').sidemenu('options');
  61. $('#sm').sidemenu(opts.collapsed ? 'expand' : 'collapse');
  62. opts = $('#sm').sidemenu('options');
  63. $('#sm').sidemenu('resize', {
  64. width: opts.collapsed ? 60 : 200
  65. })
  66. }
  67. </script>
  68. </body>
  69. </html>