免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [分享] 樹形導航條 [打印本頁]
作者: n7197    時間: 2012-4-22 01:47     標題: 樹形導航條

  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){

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


  28. //menu object
  29. function PhenMenu(objName) {

  31. this.config = {

  33. closeSameLevel : true

  35. };
  36. //alert("asdsdf");
  37. this.obj = objName;

  39. this.items = [];

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

  43. };

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

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

  55. if (document.getElementById) {

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

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

  61. str += '\n</div>';
  62. //alert(str);
  63. //document.write(str);
  64. //alert(this.items[0]._hc);
  65. return str;

  67. };

  69. // Creates the menu structure
  70. PhenMenu.prototype.addItem = function(pItem) {

  72. var str = '';

  74. //var n=0;

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

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

  80. var ci = this.items[n];
  81. //alert(ci.pid);
  82. //alert(ci.id);
  83. this.setHS(ci);
  84. //alert("item:"+ci._hc);
  85. //alert(ci._ls);
  86. str += this.itemCreate(ci, n);

  88. if(ci._ls) break;

  90. }

  92. }

  94. return str;

  96. };

  98. // Creates the node icon, url and text
  99. PhenMenu.prototype.itemCreate = function(pItem, itemId) {
  100. //alert(pItem.type.toLowerCase());
  101. var str = '';

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

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

  109. if (pItem.img) {

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

  113. }
  114. if (pItem.url) {
  115. str += '<a id="s' + this.obj + itemId + '" class="navigation_item" href="' + pItem.url + '"';
  116. if (pItem.title) str += ' title="' + pItem.title + '"';
  117. if (pItem.target) str += ' target="' + pItem.target + '"';
  118. str += ' onmouseover="window.status=\'' + pItem.label + '\';return true;" onmouseout="window.status=\'\';return true;"';
  119. str += '>';
  120. }
  121. str += ' ' + pItem.label;
  122. if (pItem.url) str += '</a>';
  123. str += '</td></tr></table>';
  124. //alert(pItem.url);
  125. //alert(str);
  126. if (pItem._hc) {
  127. str += '<table id="ct' + this.obj + itemId + '" width="100%" style="display:' + ((pItem._io) ? 'block' : 'none') + '; FILTER: blendTrans(Duration=3.0); VISIBILITY: hidden"><tr><td>';
  128. str += this.addItem(pItem);
  129. str += '</td></tr></table>';
  130. //alert(str);
  131. //document.write(str);
  132. }

  134. return str;
  135. };


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

  141. var lastId;

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

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

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

  149. }

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

  153. };

  155. // Toggle Open or close
  156. PhenMenu.prototype.o = function(id) {
  157. //alert(this.items.length);
  158. var ci = this.items[id];
  159. //alert(ci);
  160. //this.setHS(ci);
  161. //alert(this.items[id]._hc);
  162. this.itemStatus(!ci._io, id);

  164. ci._io = !ci._io;

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

  168. };

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

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

  175. if(status){

  177. cTable.filters.item(0).Apply();
  178. cTable.style.display = 'block';
  179. cTable.style.visibility = "";
  180. cTable.filters.item(0).Play();
  181. }
  182. else
  183. cTable.style.display = 'none';

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

  187. };

  189. // Closes all items on the same level as certain item
  190. PhenMenu.prototype.closeLevel = function(pItem) {
  191. //alert(this.items[0]._hc);
  192. for (var n=0; n<this.items.length; n++) {
  193. //alert(this.items[n]._hc);
  194. if ((this.items[n].pid == pItem.pid) && (this.items[n].id != pItem.id) && this.items[n]._hc) {

  196. this.itemStatus(false, n);

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

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

  202. }

  204. }

  206. };

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

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

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

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

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

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

  220. }

  222. }

  224. };
  225. </script>
  226. <style>
  227. .header {
  228. height:25px;
  229. FONT-FAMILY: Arial,Verdana;
  230. background-image:url(images/sideNavCategoryBg.gif);
  231. font-size:11px;
  232. color: #666666;

  234. }
  235. .headerSelected {
  236. height:25px;
  237. FONT-FAMILY: Arial,Verdana;
  238. background-image:url(images/sideNavCategorySelectedBg.gif);
  239. font-size:11px;
  240. background-repeat:repeat-x;
  241. COLOR: #333333;
  242. CURSOR: pointer;
  243. }

  245. .navigation_item {
  246. PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: none
  247. }
  248. .item {
  249. PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px;
  250. }
  251. .itemOver {
  252. PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #333333; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; font-weight:bold; background-color:#EDEDED
  253. }
  254. .itemSelected {
  255. PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: underline;
  256. }

  258. A.headerSelected {
  259. PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 10px
  260. }
  261. </style>
  262. </head>
  263. <body bgcolor="#F7F7F7">
  264. <table width="221" border="0" cellspacing="0" cellpadding="0">
  265. <tr>
  266. <td>
  267. <p><a target="_blank" href="http://n7197.66rt.com/">
  268. <img border="0" src="http://homepage8.seed.net.tw/web@5/n7197/logo.gif"></a></p>

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

  272. p = new PhenMenu('p');
  273. //alert("asds");
  274. p.add(0,-1,'網頁特效','','header','http://homepage8.seed.net.tw/web@5/n7197/20070902e.gif');
  275. p.add(1,0,'窗口特效','http://n7197.66rt.com/');
  276. p.add(2,0,'頁面導航','http://n7197.66rt.com/');
  277. p.add(3,0,'按鈕鏈接','http://n7197.66rt.com/');
  278. p.add(4,0,'文本特效','http://n7197.66rt.com/');

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

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

  292. p.add(15,-1,'聯繫方式','','header','http://homepage8.seed.net.tw/web@5/n7197/20070902e.gif');
  293. p.add(16,15,'MSN號碼','http://n7197.66rt.com/');
  294. p.add(17,15,'電話號碼','http://n7197.66rt.com/');
  295. p.add(18,15,'傳真號碼','http://n7197.66rt.com/');
  296. p.add(19,15,'電子信箱','http://n7197.66rt.com/');
  297. //alert(p.items.length)
  298. document.write(p);

  300. //p.toString();
  301. //alert(p.items.length);
  302. //delete(p);
  303. </script> </td>
  304. </tr>
  305. </table>
  306. </body>
  307. </html>
複製代碼
sshot-1.jpg

圖片附件: sshot-1.jpg (2012-4-22 01:47, 18.77 KB) / 下載次數 1321
http://hotbbs.info/discuz/attachment.php?aid=2344&k=b200d1fcb39018b5f54d053d2ef8acf6&t=1732408080&sid=42kdhp

作者: 0857    時間: 2012-4-22 16:34

美化了許多，謝謝分享~
作者: cflingyu    時間: 2012-5-20 12:40

謝謝分享~



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://hotbbs.info/discuz/) Powered by Discuz! 7.2