免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

[分享] 樹形導航條

  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>漂亮的樹形導航條</title>
  6. <script language="javascript">
  7. //alert("arrived here");
  8. function PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target){

  9. this.id=id;
  10. this.pid=pid;
  11. this.label=label;
  12. this.url=url;
  13. this.title=title;
  14. this.target=target;
  15. this.img=img;
  16. this.over=over;
  17. this.img2=img2;
  18. this.over2=over2;
  19. this.type=type;
  20. //this._ih = false; //is it the head item?
  21. this._hc = false; //has the child item?
  22. this._ls = false; //has sibling item?
  23. this._io = false; //whether the panelbar is open?
  24. };


  25. //menu object
  26. function PhenMenu(objName) {

  27. this.config = {

  28. closeSameLevel : true

  29. };
  30. //alert("asdsdf");
  31. this.obj = objName;

  32. this.items = [];

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

  34. };

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

  39. // Outputs the menu to the page
  40. PhenMenu.prototype.toString = function() {
  41. //alert("arrived here");
  42. var str = '<div>\n';

  43. if (document.getElementById) {

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

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

  46. str += '\n</div>';
  47. //alert(str);
  48. //document.write(str);
  49. //alert(this.items[0]._hc);
  50. return str;

  51. };

  52. // Creates the menu structure
  53. PhenMenu.prototype.addItem = function(pItem) {

  54. var str = '';

  55. //var n=0;

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

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

  58. var ci = this.items[n];
  59. //alert(ci.pid);
  60. //alert(ci.id);
  61. this.setHS(ci);
  62. //alert("item:"+ci._hc);
  63. //alert(ci._ls);
  64. str += this.itemCreate(ci, n);

  65. if(ci._ls) break;

  66. }

  67. }

  68. return str;

  69. };

  70. // Creates the node icon, url and text
  71. PhenMenu.prototype.itemCreate = function(pItem, itemId) {
  72. //alert(pItem.type.toLowerCase());
  73. var str = '';

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

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

  78. if (pItem.img) {

  79. str += ' <img id="i' + this.obj + itemId + '" src="' + pItem.img + '" alt="" />';

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

  100. return str;
  101. };


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

  104. var lastId;

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

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

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

  108. }

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

  110. };

  111. // Toggle Open or close
  112. PhenMenu.prototype.o = function(id) {
  113. //alert(this.items.length);
  114. var ci = this.items[id];
  115. //alert(ci);
  116. //this.setHS(ci);
  117. //alert(this.items[id]._hc);
  118. this.itemStatus(!ci._io, id);

  119. ci._io = !ci._io;

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

  121. };

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

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

  125. if(status){

  126. cTable.filters.item(0).Apply();
  127. cTable.style.display = 'block';
  128. cTable.style.visibility = "";
  129. cTable.filters.item(0).Play();
  130. }
  131. else
  132. cTable.style.display = 'none';

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

  134. };

  135. // Closes all items on the same level as certain item
  136. PhenMenu.prototype.closeLevel = function(pItem) {
  137. //alert(this.items[0]._hc);
  138. for (var n=0; n<this.items.length; n++) {
  139. //alert(this.items[n]._hc);
  140. if ((this.items[n].pid == pItem.pid) && (this.items[n].id != pItem.id) && this.items[n]._hc) {

  141. this.itemStatus(false, n);

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

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

  144. }

  145. }

  146. };

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

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

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

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

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

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

  153. }

  154. }

  155. };
  156. </script>
  157. <style>
  158. .header {
  159. height:25px;
  160. FONT-FAMILY: Arial,Verdana;
  161. background-image:url(images/sideNavCategoryBg.gif);
  162. font-size:11px;
  163. color: #666666;

  164. }
  165. .headerSelected {
  166. height:25px;
  167. FONT-FAMILY: Arial,Verdana;
  168. background-image:url(images/sideNavCategorySelectedBg.gif);
  169. font-size:11px;
  170. background-repeat:repeat-x;
  171. COLOR: #333333;
  172. CURSOR: pointer;
  173. }

  174. .navigation_item {
  175. PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: none
  176. }
  177. .item {
  178. PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px;
  179. }
  180. .itemOver {
  181. PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #333333; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; font-weight:bold; background-color:#EDEDED
  182. }
  183. .itemSelected {
  184. PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: underline;
  185. }

  186. A.headerSelected {
  187. PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 10px
  188. }
  189. </style>
  190. </head>
  191. <body bgcolor="#F7F7F7">
  192. <table width="221" border="0" cellspacing="0" cellpadding="0">
  193. <tr>
  194. <td>
  195. <p><a target="_blank" href="http://n7197.66rt.com/">
  196. <img border="0" src="http://homepage8.seed.net.tw/web@5/n7197/logo.gif"></a></p>

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

  198. p = new PhenMenu('p');
  199. //alert("asds");
  200. p.add(0,-1,'網頁特效','','header','http://homepage8.seed.net.tw/web@5/n7197/20070902e.gif');
  201. p.add(1,0,'窗口特效','http://n7197.66rt.com/');
  202. p.add(2,0,'頁面導航','http://n7197.66rt.com/');
  203. p.add(3,0,'按鈕鏈接','http://n7197.66rt.com/');
  204. p.add(4,0,'文本特效','http://n7197.66rt.com/');

  205. p.add(5,-1,'JS教程','','header','http://homepage8.seed.net.tw/web@5/n7197/20070902e.gif');
  206. p.add(6,5,'最新教程','http://n7197.66rt.com/');
  207. p.add(7,5,'教程排行','http://n7197.66rt.com/');
  208. p.add(8,5,'實際應用','http://n7197.66rt.com/');
  209. p.add(9,5,'基礎教程','http://n7197.66rt.com/');

  210. p.add(10,-1,'特效論壇','','header','http://homepage8.seed.net.tw/web@5/n7197/20070902e.gif');
  211. p.add(11,10,'最新贴子','http://n7197.66rt.com/');
  212. p.add(12,10,'最熱帖子','http://n7197.66rt.com/');
  213. p.add(13,10,'最新會員','http://n7197.66rt.com/');
  214. p.add(14,10,'論壇公告','http://n7197.66rt.com/');

  215. p.add(15,-1,'聯繫方式','','header','http://homepage8.seed.net.tw/web@5/n7197/20070902e.gif');
  216. p.add(16,15,'MSN號碼','http://n7197.66rt.com/');
  217. p.add(17,15,'電話號碼','http://n7197.66rt.com/');
  218. p.add(18,15,'傳真號碼','http://n7197.66rt.com/');
  219. p.add(19,15,'電子信箱','http://n7197.66rt.com/');
  220. //alert(p.items.length)
  221. document.write(p);

  222. //p.toString();
  223. //alert(p.items.length);
  224. //delete(p);
  225. </script> </td>
  226. </tr>
  227. </table>
  228. </body>
  229. </html>
複製代碼
sshot-1.jpg
2012-4-22 01:47

美化了許多,謝謝分享~

TOP

謝謝分享~

TOP

返回列表