官方淘宝店 易迪拓培训 旧站入口
首页 > 仿真设计 > 射频仿真设计学习 > 漂亮的左侧渐显动态菜单

漂亮的左侧渐显动态菜单

05-08

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>Phenix PanelBar</title>
  6. <script language="javascript">
  7. /*--------------------------------------------------|
  8. | Phenix PanelBar | www.seu.edu.cn |
  9. |---------------------------------------------------|
  10. | |
  11. | I believe one day I can fly like phenix! |
  12. | |
  13. | Finished: 17.11.2004 |
  14. |--------------------------------------------------*/

  15. //item object
  16. //alert("arrived here");
  17. function PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target){

  18. this.id=id;
  19. this.pid=pid;
  20. this.label=label;
  21. this.url=url;
  22. this.title=title;
  23. this.target=target;
  24. this.img=img;
  25. this.over=over;
  26. this.img2=img2;
  27. this.over2=over2;
  28. this.type=type;
  29. //this._ih = false; //is it the head item?
  30. this._hc = false; //has the child item?
  31. this._ls = false; //has sibling item?
  32. this._io = false; //whether the panelbar is open?
  33. };


  34. //menu object
  35. function PhenMenu(objName) {

  36. this.config = {

  37. closeSameLevel : true

  38. };
  39. //alert("asdsdf");
  40. this.obj = objName;

  41. this.items = [];

  42. this.root = new PhenItem(-1);

  43. };

  44. //add a new item to the item array
  45. PhenMenu.prototype.add = function(id,pid,label,url,type,img,over,img2,over2,title,target){
  46. this.items[this.items.length] = new PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target);
  47. };

  48. // Outputs the menu to the page
  49. PhenMenu.prototype.toString = function() {
  50. //alert("arrived here");
  51. var str = '<div>\n';

  52. if (document.getElementById) {

  53. str += this.addItem(this.root);

  54. } else str += 'Browser not supported.';

  55. str += '\n</div>';
  56. //alert(str);
  57. //document.write(str);
  58. //alert(this.items[0]._hc);
  59. return str;

  60. };

  61. // Creates the menu structure
  62. PhenMenu.prototype.addItem = function(pItem) {

  63. var str = '';

  64. //var n=0;

  65. for (var n=0; n<this.items.length; n++) {

  66. if(this.items[n].pid == pItem.id){

  67. var ci = this.items[n];
  68. //alert(ci.pid);
  69. //alert(ci.id);
  70. this.setHS(ci);
  71. //alert("item:"+ci._hc);
  72. //alert(ci._ls);
  73. str += this.itemCreate(ci, n);

  74. if(ci._ls) break;

  75. }

  76. }

  77. return str;

  78. };

  79. // Creates the node icon, url and text
  80. PhenMenu.prototype.itemCreate = function(pItem, itemId) {
  81. //alert(pItem.type.toLowerCase());
  82. var str = '';

  83. if(pItem.type == 'header')
  84. str = '<table width="100%" class="header" valign="middle" onmouseover="this.className=\'headerSelected\'" onmouseout="this.className=\'header\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>';

  85. else
  86. str = '<table width="100%" class="item" valign="middle" onmouseover="this.className=\'itemOver\'" onmouseout="this.className=\'item\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>';

  87. if (pItem.img) {

  88. str += ' <img src="' + pItem.img + '" alt="" / onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">';

  89. }
  90. if (pItem.url) {
  91. str += '<a id="s' + this.obj + itemId + '" class="navigation_item" href="' + pItem.url + '"';
  92. if (pItem.title) str += ' title="' + pItem.title + '"';
  93. if (pItem.target) str += ' target="' + pItem.target + '"';
  94. str += ' onmouseover="window.status=\'' + pItem.label + '\';return true;" onmouseout="window.status=\'\';return true;"';
  95. str += '>';
  96. }
  97. str += ' ' + pItem.label;
  98. if (pItem.url) str += '</a>';
  99. str += '</td></tr></table>';
  100. //alert(pItem.url);
  101. //alert(str);
  102. if (pItem._hc) {
  103. str += '<table id="ct' + this.obj + itemId + '" width="100%" style="display:' + ((pItem._io) ? 'block' : 'none') + '; FILTER: blendTrans(Duration=3.0); VISIBILITY: hidden"><tr><td>';
  104. str += this.addItem(pItem);
  105. str += '</td></tr></table>';
  106. //alert(str);
  107. //document.write(str);
  108. }

  109. return str;
  110. };


  111. // Checks whether a item has child and if it is the last sibling
  112. PhenMenu.prototype.setHS = function(pItem) {

  113. var lastId;

  114. for (var n=0; n<this.items.length; n++) {

  115. if (this.items[n].pid == pItem.id) pItem._hc = true;

  116. if (this.items[n].pid == pItem.pid) lastId = this.items[n].id;

  117. }

  118. if (lastId==pItem.id) pItem._ls = true;

  119. };

  120. // Toggle Open or close
  121. PhenMenu.prototype.o = function(id) {
  122. //alert(this.items.length);
  123. var ci = this.items[id];
  124. //alert(ci);
  125. //this.setHS(ci);
  126. //alert(this.items[id]._hc);
  127. this.itemStatus(!ci._io, id);

  128. ci._io = !ci._io;

  129. if (this.config.closeSameLevel) this.closeLevel(ci);

  130. };

  131. // Change the status of a item(open or closed)
  132. PhenMenu.prototype.itemStatus = function(status, id) {

  133. cTable = document.getElementById('ct' + this.obj + id);

  134. if(status){

  135. cTable.filters.item(0).Apply();
  136. cTable.style.display = 'block';
  137. cTable.style.visibility = "";
  138. cTable.filters.item(0).Play();
  139. }
  140. else
  141. cTable.style.display = 'none';

  142. //cDiv.style.display = (status) ? 'block': 'none';

  143. };

  144. // Closes all items on the same level as certain item
  145. PhenMenu.prototype.closeLevel = function(pItem) {
  146. //alert(this.items[0]._hc);
  147. for (var n=0; n<this.items.length; n++) {
  148. //alert(this.items[n]._hc);
  149. if ((this.items[n].pid == pItem.pid) && (this.items[n].id != pItem.id) && this.items[n]._hc) {

  150. this.itemStatus(false, n);

  151. this.items[n]._io = false;

  152. this.closeAllChildren(this.items[n]);

  153. }

  154. }

  155. };

  156. PhenMenu.prototype.closeAllChildren = function(pItem) {

  157. for (var n=0; n<this.items.length; n++) {

  158. if (this.items[n].pid == pItem.id && this.items[n]._hc) {

  159. if (this.items[n]._io) this.itemStatus(false, n);

  160. this.items[n]._io = false;

  161. this.closeAllChildren(this.items[n]);

  162. }

  163. }

  164. };
  165. </script>
  166. <style>
  167. .header {
  168. height:25px;
  169. FONT-FAMILY: Arial,Verdana;
  170. background-image:url(images/sideNavCategoryBg.gif);
  171. font-size:11px;
  172. color: #666666;

  173. }
  174. .headerSelected {
  175. height:25px;
  176. FONT-FAMILY: Arial,Verdana;
  177. background-image:url(images/sideNavCategorySelectedBg.gif);
  178. font-size:11px;
  179. background-repeat:repeat-x;
  180. COLOR: #333333;
  181. CURSOR: pointer;
  182. }

  183. .navigation_item {
  184. PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: none
  185. }
  186. .item {
  187. PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px;
  188. }
  189. .itemOver {
  190. PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #333333; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; font-weight:bold; background-color:#EDEDED
  191. }
  192. .itemSelected {
  193. PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: underline;
  194. }

  195. A.headerSelected {
  196. PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 10px
  197. }
  198. </style>
  199. </head>
  200. <body>
  201. <table width="221" border="0" cellspacing="0" cellpadding="0">
  202. <tr>
  203. <td>

  204. Phenix panelbar</p>

  205. <script type="text/javascript">

  206. p = new PhenMenu('p');
  207. //alert("asds");
  208. p.add(0,-1,'label1凤凰','','header','img/mwt/AWR/HFSS-CST-133301ztbe3aaata.gif');
  209. p.add(1,0,'label1.1凤凰','www.sina.com.cn');
  210. p.add(2,0,'label1.2','www.sina.com.cn');
  211. p.add(3,0,'label1.3','www.sina.com.cn');
  212. p.add(4,0,'label1.4','www.sina.com.cn');

  213. p.add(5,-1,'label2','','header','img/mwt/AWR/HFSS-CST-13331lj3dmra0uuz.gif');
  214. p.add(6,5,'label2.1','www.seu.edu.cn');
  215. p.add(7,5,'label2.2','www.seu.edu.cn');
  216. p.add(8,5,'label2.3','www.seu.edu.cn');
  217. p.add(9,5,'label2.4','www.seu.edu.cn');

  218. p.add(10,-1,'label3','','header','img/mwt/AWR/HFSS-CST-133325od4wwffmpp.gif');
  219. p.add(11,10,'label3.1','www.seu.edu.cn');
  220. p.add(12,10,'label3.2','www.seu.edu.cn');
  221. p.add(13,10,'label3.3','www.seu.edu.cn');
  222. p.add(14,10,'label3.4','www.seu.edu.cn');

  223. p.add(15,-1,'label4','','header','img/mwt/AWR/HFSS-CST-13333ptzgp5fhikw.gif');
  224. p.add(16,15,'label4.1','www.seu.edu.cn');
  225. p.add(17,15,'label4.2','www.seu.edu.cn');
  226. p.add(18,15,'label4.3','www.seu.edu.cn');
  227. p.add(19,15,'label4.4','www.seu.edu.cn');
  228. //alert(p.items.length)
  229. document.write(p);

  230. //p.toString();
  231. //alert(p.items.length);
  232. //delete(p);
  233. </script> </td>
  234. </tr>
  235. </table>
  236. </body>
  237. </html>

复制代码

Top