微波EDA网，见证研发工程师的成长！
首页 > 研发问答 > 微波和射频技术 > 微波射频仿真学习讨论 > 漂亮的左侧渐显动态菜单

漂亮的左侧渐显动态菜单

时间：10-02 整理：3721RD 点击：

  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. |--------------------------------------------------*/

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

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


  38. //menu object
  39. function PhenMenu(objName) {

  41. this.config = {

  43. closeSameLevel : true

  45. };
  46. //alert("asdsdf");
  47. this.obj = objName;

  49. this.items = [];

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

  53. };

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

  60. // Outputs the menu to the page
  61. PhenMenu.prototype.toString = function() {
  62. //alert("arrived here");
  63. var str = '<div>\n';

  65. if (document.getElementById) {

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

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

  71. str += '\n</div>';
  72. //alert(str);
  73. //document.write(str);
  74. //alert(this.items[0]._hc);
  75. return str;

  77. };

  79. // Creates the menu structure
  80. PhenMenu.prototype.addItem = function(pItem) {

  82. var str = '';

  84. //var n=0;

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

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

  90. var ci = this.items[n];
  91. //alert(ci.pid);
  92. //alert(ci.id);
  93. this.setHS(ci);
  94. //alert("item:"+ci._hc);
  95. //alert(ci._ls);
  96. str += this.itemCreate(ci, n);

  98. if(ci._ls) break;

  100. }

  102. }

  104. return str;

  106. };

  108. // Creates the node icon, url and text
  109. PhenMenu.prototype.itemCreate = function(pItem, itemId) {
  110. //alert(pItem.type.toLowerCase());
  111. var str = '';

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

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

  119. if (pItem.img) {

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

  123. }
  124. if (pItem.url) {
  125. str += '<a id="s' + this.obj + itemId + '" class="navigation_item" href="' + pItem.url + '"';
  126. if (pItem.title) str += ' title="' + pItem.title + '"';
  127. if (pItem.target) str += ' target="' + pItem.target + '"';
  128. str += ' onmouseover="window.status=\'' + pItem.label + '\';return true;" onmouseout="window.status=\'\';return true;"';
  129. str += '>';
  130. }
  131. str += ' ' + pItem.label;
  132. if (pItem.url) str += '</a>';
  133. str += '</td></tr></table>';
  134. //alert(pItem.url);
  135. //alert(str);
  136. if (pItem._hc) {
  137. str += '<table id="ct' + this.obj + itemId + '" width="100%" style="display:' + ((pItem._io) ? 'block' : 'none') + '; FILTER: blendTrans(Duration=3.0); VISIBILITY: hidden"><tr><td>';
  138. str += this.addItem(pItem);
  139. str += '</td></tr></table>';
  140. //alert(str);
  141. //document.write(str);
  142. }

  144. return str;
  145. };


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

  151. var lastId;

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

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

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

  159. }

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

  163. };

  165. // Toggle Open or close
  166. PhenMenu.prototype.o = function(id) {
  167. //alert(this.items.length);
  168. var ci = this.items[id];
  169. //alert(ci);
  170. //this.setHS(ci);
  171. //alert(this.items[id]._hc);
  172. this.itemStatus(！ci._io, id);

  174. ci._io = ！ci._io;

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

  178. };

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

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

  185. if(status){

  187. cTable.filters.item(0).Apply();
  188. cTable.style.display = 'block';
  189. cTable.style.visibility = "";
  190. cTable.filters.item(0).Play();
  191. }
  192. else
  193. cTable.style.display = 'none';

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

  197. };

  199. // Closes all items on the same level as certain item
  200. PhenMenu.prototype.closeLevel = function(pItem) {
  201. //alert(this.items[0]._hc);
  202. for (var n=0; n<this.items.length; n++) {
  203. //alert(this.items[n]._hc);
  204. if ((this.items[n].pid == pItem.pid) && (this.items[n].id ！= pItem.id) && this.items[n]._hc) {

  206. this.itemStatus(false, n);

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

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

  212. }

  214. }

  216. };

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

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

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

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

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

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

  230. }

  232. }

  234. };
  235. </script>
  236. <style>
  237. .header {
  238. height:25px;
  239. FONT-FAMILY: Arial,Verdana;
  240. background-image:url(images/sideNavCategoryBg.gif);
  241. font-size:11px;
  242. color: #666666;

  244. }
  245. .headerSelected {
  246. height:25px;
  247. FONT-FAMILY: Arial,Verdana;
  248. background-image:url(images/sideNavCategorySelectedBg.gif);
  249. font-size:11px;
  250. background-repeat:repeat-x;
  251. COLOR: #333333;
  252. CURSOR: pointer;
  253. }

  255. .navigation_item {
  256. PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: none
  257. }
  258. .item {
  259. PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px;
  260. }
  261. .itemOver {
  262. PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #333333; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; font-weight:bold; background-color:#EDEDED
  263. }
  264. .itemSelected {
  265. PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: underline;
  266. }

  268. A.headerSelected {
  269. PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 10px
  270. }
  271. </style>
  272. </head>
  273. <body>
  274. <table width="221" border="0" cellspacing="0" cellpadding="0">
  275. <tr>
  276. <td>

  278. Phenix panelbar</p>

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

  282. p = new PhenMenu('p');
  283. //alert("asds");
  284. p.add(0,-1,'label1凤凰','','header','../imgqa/mwt/hfss-cst/hfss-cst-3721rd.com-77101oq1wct2pmhm.gif');
  285. p.add(1,0,'label1.1凤凰','www.sina.com.cn');
  286. p.add(2,0,'label1.2','www.sina.com.cn');
  287. p.add(3,0,'label1.3','www.sina.com.cn');
  288. p.add(4,0,'label1.4','www.sina.com.cn');

  290. p.add(5,-1,'label2','','header','../imgqa/mwt/hfss-cst/hfss-cst-3721rd.com-77102x5zmwb2vpvr.gif');
  291. p.add(6,5,'label2.1','www.seu.edu.cn');
  292. p.add(7,5,'label2.2','www.seu.edu.cn');
  293. p.add(8,5,'label2.3','www.seu.edu.cn');
  294. p.add(9,5,'label2.4','www.seu.edu.cn');

  296. p.add(10,-1,'label3','','header','../imgqa/mwt/hfss-cst/hfss-cst-3721rd.com-77103adzcit5icts.gif');
  297. p.add(11,10,'label3.1','www.seu.edu.cn');
  298. p.add(12,10,'label3.2','www.seu.edu.cn');
  299. p.add(13,10,'label3.3','www.seu.edu.cn');
  300. p.add(14,10,'label3.4','www.seu.edu.cn');

  302. p.add(15,-1,'label4','','header','../imgqa/mwt/hfss-cst/hfss-cst-3721rd.com-77104055rep4fn5s.gif');
  303. p.add(16,15,'label4.1','www.seu.edu.cn');
  304. p.add(17,15,'label4.2','www.seu.edu.cn');
  305. p.add(18,15,'label4.3','www.seu.edu.cn');
  306. p.add(19,15,'label4.4','www.seu.edu.cn');
  307. //alert(p.items.length)
  308. document.write(p);

  310. //p.toString();
  311. //alert(p.items.length);
  312. //delete(p);
  313. </script> </td>
  314. </tr>
  315. </table>
  316. </body>
  317. </html>

复制代码

上一篇：cst中的1d results 有人知道怎么设置曲线的单位？
下一篇：带孔腔体的辐射屏蔽仿真问题

菜单 相关文章：

栏目分类
热门文章

Copyright © 2017-2020 微波EDA网 版权所有

网站地图

Top