demo.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <!-- easyui -->
  7. <link rel="stylesheet" type="text/css" href="../jquery-easyui/themes/gray/easyui.css" />
  8. <link rel="stylesheet" type="text/css" href="../jquery-easyui/themes/icon.css" />
  9. <script type="text/javascript" src="../jquery/jquery.min.js"></script>
  10. <script type="text/javascript" src="../jquery-easyui/jquery.easyui.min.js"></script>
  11. <script type="text/javascript" src="ui.EasyTab.js"></script>
  12. <style type="text/css">
  13. .luEasyTab div div div {
  14. overflow: hidden;
  15. }
  16. </style>
  17. <script type="text/javascript">
  18. var tabs;
  19. function resizeTab() {
  20. var jqElem = $(window);
  21. var jqTab = tabs.jqElem;
  22. jqTab.tabs('resize', {
  23. width: jqElem.width() - 15,
  24. height: jqElem.height() - jqTab.offset().top - 10
  25. });
  26. }
  27. $(function () {
  28. tabs = new ui.EasyTab($('#qw_tabs'), { tools: '#tab-tools', border: false });
  29. $(window).resize(resizeTab);
  30. resizeTab();
  31. tabs.addTabWithContent('首页', '首页', { closable: false });
  32. tabs.addTabWithContent('首页1', '首页1cccc');
  33. tabs.addTabWithContent('首页2', '首页2cccc', { onClose: function () { alert('close me'); } });
  34. tabs.addTabWithContent('首页3', '首页3cccc', { closable: false });
  35. tabs.addTab('baidu', 'http://www.baidu.com');
  36. });
  37. </script>
  38. </head>
  39. <body>
  40. <table style="width:100%">
  41. <tr>
  42. <td>
  43. <div id="dvMenu"></div>
  44. </td>
  45. </tr>
  46. <tr>
  47. <td>
  48. <div>
  49. <div id="qw_tabs">
  50. </div>
  51. <div id="tab-tools">
  52. <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-undo'" onclick="javascript: tabs.switchTab(-1);"></a>
  53. <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'" onclick="javascript: tabs.curTabRefresh();"></a>
  54. <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-redo'" onclick="javascript: tabs.switchTab(1);"></a>
  55. <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'" onclick="javascript: tabs.closeAllTabs();"></a>
  56. </div>
  57. </div>
  58. </td>
  59. </tr>
  60. </table>
  61. </body>
  62. </html>