index.htm 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  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>jQuery ligerUI Demos导航主页</title>
  5. <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  6. <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
  7. <script src="lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
  8. <script src="indexdata.js" type="text/javascript"></script>
  9. <script type="text/javascript">
  10. var tab = null;
  11. var accordion = null;
  12. var tree = null;
  13. $(function ()
  14. {
  15. //布局
  16. $("#layout1").ligerLayout({ leftWidth: 190, height: '100%',heightDiff:-34,space:4, onHeightChanged: f_heightChanged });
  17. var height = $(".l-layout-center").height();
  18. //Tab
  19. $("#framecenter").ligerTab({ height: height });
  20. //面板
  21. $("#accordion1").ligerAccordion({ height: height - 24, speed: null });
  22. $(".l-link").hover(function ()
  23. {
  24. $(this).addClass("l-link-over");
  25. }, function ()
  26. {
  27. $(this).removeClass("l-link-over");
  28. });
  29. //树
  30. $("#tree1").ligerTree({
  31. data : indexdata,
  32. checkbox: false,
  33. slide: false,
  34. nodeWidth: 120,
  35. attribute: ['nodename', 'url'],
  36. onSelect: function (node)
  37. {
  38. if (!node.data.url) return;
  39. var tabid = $(node.target).attr("tabid");
  40. if (!tabid)
  41. {
  42. tabid = new Date().getTime();
  43. $(node.target).attr("tabid", tabid)
  44. }
  45. f_addTab(tabid, node.data.text, node.data.url);
  46. }
  47. });
  48. tab = $("#framecenter").ligerGetTabManager();
  49. accordion = $("#accordion1").ligerGetAccordionManager();
  50. tree = $("#tree1").ligerGetTreeManager();
  51. $("#pageloading").hide();
  52. });
  53. function f_heightChanged(options)
  54. {
  55. if (tab)
  56. tab.addHeight(options.diff);
  57. if (accordion && options.middleHeight - 24 > 0)
  58. accordion.setHeight(options.middleHeight - 24);
  59. }
  60. function f_addTab(tabid,text, url)
  61. {
  62. tab.addTabItem({ tabid : tabid,text: text, url: url });
  63. }
  64. </script>
  65. <style type="text/css">
  66. body,html{height:100%;}
  67. body{ padding:0px; margin:0; overflow:hidden;}
  68. .l-link{ display:block; height:26px; line-height:26px; padding-left:10px; text-decoration:underline; color:#333;}
  69. .l-link2{text-decoration:underline; color:white; margin-left:2px;margin-right:2px;}
  70. .l-layout-top{background:#102A49; color:White;}
  71. .l-layout-bottom{ background:#E5EDEF; text-align:center;}
  72. #pageloading{position:absolute; left:0px; top:0px; background:white url('loading.gif') no-repeat center; width:100%; height:100%;z-index:99999;}
  73. .l-link{ display:block; line-height:22px; height:22px; padding-left:16px;border:1px solid white; margin:4px;}
  74. .l-link-over{ background:#FFEEAC; border:1px solid #DB9F00;}
  75. .l-winbar{ background:#2B5A76; height:30px; position:absolute; left:0px; bottom:0px; width:100%; z-index:99999;}
  76. .space{ color:#E7E7E7;}
  77. /* 顶部 */
  78. .l-topmenu{ margin:0; padding:0; height:31px; line-height:31px; background:url('lib/images/top.jpg') repeat-x bottom; position:relative; border-top:1px solid #1D438B; }
  79. .l-topmenu-logo{ color:#E7E7E7; padding-left:35px; line-height:26px;background:url('lib/images/topicon.gif') no-repeat 10px 5px;}
  80. .l-topmenu-welcome{ position:absolute; height:24px; line-height:24px; right:30px; top:2px;color:#070A0C;}
  81. .l-topmenu-welcome a{ color:#E7E7E7; text-decoration:underline}
  82. </style>
  83. </head>
  84. <body style="padding:0px;background:#EAEEF5;">
  85. <div id="pageloading"></div>
  86. <div id="topmenu" class="l-topmenu">
  87. <div class="l-topmenu-logo">jQuery ligerUI Demos导航主页</div>
  88. <div class="l-topmenu-welcome">
  89. <a href="index.aspx" class="l-link2">服务器版本</a>
  90. <span class="space">|</span>
  91. <a href="https://me.alipay.com/daomi" class="l-link2" target="_blank">捐赠</a>
  92. <span class="space">|</span>
  93. <a href="http://bbs.ligerui.com" class="l-link2" target="_blank">论坛</a>
  94. </div>
  95. </div>
  96. <div id="layout1" style="width:99.2%; margin:0 auto; margin-top:4px; ">
  97. <div position="left" title="主要菜单" id="accordion1">
  98. <div title="功能列表" class="l-scroll">
  99. <ul id="tree1" style="margin-top:3px;">
  100. </div>
  101. <div title="应用场景">
  102. <div style=" height:7px;"></div>
  103. <a class="l-link" href="javascript:f_addTab('listpage','列表页面','demos/case/listpage.htm')">列表页面</a>
  104. <a class="l-link" href="demos/dialog/win7.htm" target="_blank">模拟Window桌面</a>
  105. </div>
  106. <div title="实验室">
  107. <div style=" height:7px;"></div>
  108. <a class="l-link" href="lab/generate/index.htm" target="_blank">表格表单设计器</a>
  109. </div>
  110. </div>
  111. <div position="center" id="framecenter">
  112. <div tabid="home" title="我的主页" style="height:300px" >
  113. <iframe frameborder="0" name="home" id="home" src="welcome.htm"></iframe>
  114. </div>
  115. </div>
  116. </div>
  117. <div style="height:32px; line-height:32px; text-align:center;">
  118. Copyright © 2011-2012 www.ligerui.com
  119. </div>
  120. <div style="display:none"></div>
  121. </body>
  122. </html>