left_menuForOutLook.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4. <TITLE> ZTREE DEMO - left_menu for Outlook</TITLE>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
  7. <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
  8. <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
  9. <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
  10. <SCRIPT type="text/javascript">
  11. <!--
  12. var curMenu = null, zTree_Menu = null;
  13. var setting = {
  14. view: {
  15. showLine: false,
  16. showIcon: false,
  17. selectedMulti: false,
  18. dblClickExpand: false,
  19. addDiyDom: addDiyDom
  20. },
  21. data: {
  22. simpleData: {
  23. enable: true
  24. }
  25. },
  26. callback: {
  27. beforeClick: beforeClick
  28. }
  29. };
  30. var zNodes =[
  31. { id:1, pId:0, name:"Folders", open:true},
  32. { id:11, pId:1, name:"Inbox"},
  33. { id:111, pId:11, name:"Inbox1"},
  34. { id:112, pId:111, name:"Inbox2"},
  35. { id:113, pId:112, name:"Inbox3"},
  36. { id:114, pId:113, name:"Inbox4"},
  37. { id:12, pId:1, name:"Junk"},
  38. { id:13, pId:1, name:"Drafts"},
  39. { id:14, pId:1, name:"Sent"},
  40. { id:15, pId:1, name:"Deleted"},
  41. { id:3, pId:0, name:"Quick views"},
  42. { id:31, pId:3, name:"Documents"},
  43. { id:32, pId:3, name:"Photos"}
  44. ];
  45. function addDiyDom(treeId, treeNode) {
  46. var spaceWidth = 5;
  47. var switchObj = $("#" + treeNode.tId + "_switch"),
  48. icoObj = $("#" + treeNode.tId + "_ico");
  49. switchObj.remove();
  50. icoObj.before(switchObj);
  51. if (treeNode.level > 1) {
  52. var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
  53. switchObj.before(spaceStr);
  54. }
  55. }
  56. function beforeClick(treeId, treeNode) {
  57. if (treeNode.level == 0 ) {
  58. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  59. zTree.expandNode(treeNode);
  60. return false;
  61. }
  62. return true;
  63. }
  64. $(document).ready(function(){
  65. var treeObj = $("#treeDemo");
  66. $.fn.zTree.init(treeObj, setting, zNodes);
  67. zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
  68. curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
  69. zTree_Menu.selectNode(curMenu);
  70. treeObj.hover(function () {
  71. if (!treeObj.hasClass("showIcon")) {
  72. treeObj.addClass("showIcon");
  73. }
  74. }, function() {
  75. treeObj.removeClass("showIcon");
  76. });
  77. });
  78. //-->
  79. </SCRIPT>
  80. <style type="text/css">
  81. .ztree * {font-size: 10pt;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}
  82. .ztree li ul{ margin:0; padding:0}
  83. .ztree li {line-height:30px;}
  84. .ztree li a {width:200px;height:30px;padding-top: 0px;}
  85. .ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
  86. .ztree li a span.button.switch {visibility:hidden}
  87. .ztree.showIcon li a span.button.switch {visibility:visible}
  88. .ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}
  89. .ztree li span {line-height:30px;}
  90. .ztree li span.button {margin-top: -7px;}
  91. .ztree li span.button.switch {width: 16px;height: 16px;}
  92. .ztree li a.level0 span {font-size: 150%;font-weight: bold;}
  93. .ztree li span.button {background-image:url("./left_menuForOutLook.png"); *background-image:url("./left_menuForOutLook.gif")}
  94. .ztree li span.button.switch.level0 {width: 20px; height:20px}
  95. .ztree li span.button.switch.level1 {width: 20px; height:20px}
  96. .ztree li span.button.noline_open {background-position: 0 0;}
  97. .ztree li span.button.noline_close {background-position: -18px 0;}
  98. .ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
  99. .ztree li span.button.noline_close.level0 {background-position: -18px -18px;}
  100. </style>
  101. </HEAD>
  102. <BODY>
  103. <h1>Left Menu Like OutLook Style</h1>
  104. <h6>[ File Path: super/left_menuForOutLook.html ]</h6>
  105. <div class="content_wrap">
  106. <div class="zTreeDemoBackground left">
  107. <ul id="treeDemo" class="ztree"></ul>
  108. </div>
  109. <div class="right">
  110. <ul class="info">
  111. <li class="title"><h2>Explanation of implementation method</h2>
  112. <ul class="list">
  113. <li>I make one left menu which resembles outlook.com, so share to everyone.</li>
  114. <li class="highlight_red">1. Please note that the css code of the source of this page.</li>
  115. <li class="highlight_red">2. Please note that the javascript code of the source of this page, especially the switch button is moved into the &lt;a&gt; tag when 'addDiyDom' callback be called</li>
  116. <li class="highlight_red">3. Use the method of add zTree class name to implement the switch button be hidden or showing.</li>
  117. <li>4. Other auxiliary rules, please write code based on your needs.</li>
  118. <li>5. The current rule description:<br/>
  119. &nbsp;&nbsp;Click the root node can control the parent node be expanded or collapsed;<br/>
  120. &nbsp;&nbsp;The parent nodes without root only are only clicked the arrow icon can control be expanded or collapsed;br/>
  121. </li>
  122. </ul>
  123. </li>
  124. </ul>
  125. </div>
  126. </div>
  127. </BODY>
  128. </HTML>