• Uncle Liu's Blog
  • 追忆曾经逝去的岁月,在此存放我容易丢失的记忆!
  • 首页
  • 碎语
  • 留言板
  • 登录

  • 左导航、右展开的例子

    [Javascript]
    post by Uncle Liu / 2009-5-29 21:17 Friday

     

    XML/HTML代码
    1. <base href="http://www.blueidea.com/articleimg/2003/09/804/">  
    2. <?xml version="1.0" encoding="gb2312"?>  
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    4. <html xmlns="http://www.w3.org/1999/xhtml">  
    5. <head>  
    6. <title>DWMX Tutor --- A Simple Menu</title>  
    7. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    8. <script>// Example: obj = findObj("image1");   
    9. function findObj(theObj, theDoc)   
    10. {   
    11.   var p, i, foundObj;   
    12.      
    13.   if(!theDoc) theDoc = document;   
    14.   if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)   
    15.   {   
    16.     theDoc = parent.frames[theObj.substring(p+1)].document;   
    17.     theObjtheObj = theObj.substring(0,p);   
    18.   }   
    19.   if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];   
    20.   for (i=0; !foundObj && i < theDoc.forms.length; i++)    
    21.     foundObj = theDoc.forms[i][theObj];   
    22.   for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)    
    23.     foundObj = findObj(theObj,theDoc.layers[i].document);   
    24.   if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);   
    25.      
    26.   return foundObj;   
    27. }   
    28. </script>  
    29. <style type="text/css">  
    30. <!--   
    31. .folder {   
    32.     font-family: "Verdana", "Arial", "Helvetica", "sans-serif";   
    33.     font-size: 10px;   
    34.     background-image: url(e.gif);   
    35.     background-repeat: no-repeat;   
    36.     background-position: left;   
    37.     padding-left: 40px;   
    38.     cursor: hand;   
    39. }   
    40. .collapsedFolder {   
    41.     font-family: "Verdana", "Arial", "Helvetica", "sans-serif";   
    42.     font-size: 10px;   
    43.     background-image: url(c.gif);   
    44.     background-repeat: no-repeat;   
    45.     background-position: left;   
    46.     padding-left: 40px;   
    47.     cursor: hand;   
    48. }   
    49. .submenu {   
    50.     padding-left: 18px;   
    51. }   
    52. .iefile {   
    53.     background-image: url(ie.gif);   
    54.     background-repeat: no-repeat;   
    55.     background-position: left;   
    56.     padding-left: 20px;   
    57.     font-family: "Verdana", "Arial", "Helvetica", "sans-serif";   
    58.     font-size: 9px;   
    59. }   
    60. a {   
    61.     color: #003399;   
    62.     text-decoration: none;   
    63.     border: 1px solid #FFFFFF;   
    64. }   
    65. a:hover {   
    66.     color: #FF0000;   
    67.     background-color: #eeeeee;   
    68.     border: 1px solid #006699;   
    69. }   
    70. body {   
    71.     margin: 0px;   
    72.     background-color: buttonface;   
    73.     overflow: hidden;   
    74.     border: 0px;   
    75. }   
    76. .ctrlbar {   
    77.     border: 1px inset;   
    78. }   
    79. .explorer {   
    80.     background-color: #FFFFFF;   
    81.     border: 1px inset;   
    82. }   
    83. -->  
    84. </style>  
    85. <style type="text/css">  
    86. <!--   
    87. .ctbutton {   
    88.     font-family: Arial, Helvetica, sans-serif;   
    89.     font-size: 8px;   
    90.     background-color: #eeeeee;   
    91.     border-width: 1px;   
    92.     width: 9px;   
    93.     height: 100px;   
    94.     margin-bottom: 100px;   
    95. }   
    96. -->  
    97. </style>  
    98. <base target="browserframe"/>  
    99. </head>  
    100. <body>  
    101. <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">  
    102.   <tr>  
    103.     <td width="150" align="center" valign="top" class="explorer" id="menubar"><br />         
    104.       <img src="logo.gif" width="90" height="27" />      <br />  
    105.       <br />         
    106.       <table width="100%" border="0" cellspacing="0" cellpadding="2" onselectstart="return false">  
    107.       <tr>  
    108.         <td class="folder" onmouseup="with(findObj('blueidea').style){display=display=='none'?'':'none';this.style.backgroundImage=display!='none'?'url(e.gif)':'url(c.gif)'}">Blueidea.com</td>  
    109.       </tr>  
    110.       <tr>  
    111.         <td class="submenu" id="blueidea"><table width="100%" border="0" cellspacing="0" cellpadding="2">  
    112.             <tr>  
    113.               <td class="folder" onmouseup="with(findObj('forums').style){display=display=='none'?'':'none';this.style.backgroundImage=display!='none'?'url(e.gif)':'url(c.gif)'}">Forums</td>  
    114.             </tr>  
    115.             <tr>  
    116.               <td class="submenu" id="forums"><table width="100%" border="0" cellspacing="0" cellpadding="2">  
    117.                   <tr>  
    118.                     <td class="iefile"><a href="http://www.blueidea.com/bbs/list.asp?GroupName=Dreamweaver+%26+Javascript%D7%A8%C0%B8">JS & DWMX</a></td>  
    119.                   </tr>  
    120.                   <tr>  
    121.                     <td class="iefile"><a href="http://www.blueidea.com/bbs/list.asp?GroupName=Dreamweaver%2BMX%2BDeveloper%2B%D3%EB%CA%FD%BE%DD%BF%E2%B1%E0%B3%CC">Developement</a></td>  
    122.                   </tr>  
    123.                   <tr>  
    124.                     <td class="iefile"><a href="http://www.blueidea.com/bbs/list.asp?GroupName=Fireworks%2B%D7%A8%C0%B8">Fireworks</a></td>  
    125.                   </tr>  
    126.                   <tr>  
    127.                     <td class="iefile"><a href="http://www.blueidea.com/bbs/list.asp?GroupName=Flash%2B%D7%A8%C0%B8">Flash</a></td>  
    128.                   </tr>  
    129.                   <tr>  
    130.                     <td class="iefile"><a href="http://www.blueidea.com/bbs/list.asp?GroupName=Adobe%2BPhotoshop%2B%D7%A8%C0%B8">Photoshop</a></td>  
    131.                   </tr>  
    132.                 </table>  
    133.               </td>  
    134.             </tr>  
    135.             <tr>  
    136.               <td class="folder" onmouseup="with(findObj('others').style){display=display=='none'?'':'none';this.style.backgroundImage=display!='none'?'url(e.gif)':'url(c.gif)'}">Others</td>  
    137.             </tr>  
    138.             <tr>  
    139.               <td class="submenu" id="others"><table width="100%" border="0" cellspacing="0" cellpadding="2">  
    140.                   <tr>  
    141.                     <td class="iefile"><a href="http://www.blueidea.com/download/index.asp">Download</a></td>  
    142.                   </tr>  
    143.                   <tr>  
    144.                     <td class="iefile"><a href="http://www.blueidea.com/tech/index.asp">Documents</a></td>  
    145.                   </tr>  
    146.                 </table>  
    147.               </td>  
    148.             </tr>  
    149.             <tr>  
    150.               <td class="iefile"><a href="http://www.blueidea.com/">Homepage</a></td>  
    151.             </tr>  
    152.             <tr>  
    153.               <td class="iefile"><a href="http://www.blueidea.com/bbs/">BBS</a></td>  
    154.             </tr>  
    155.           </table>  
    156.         </td>  
    157.       </tr>  
    158.       <tr>  
    159.         <td class="collapsedFolder" onmouseup="with(findObj('lexrus').style){display=display=='none'?'':'none';this.style.backgroundImage=display!='none'?'url(e.gif)':'url(c.gif)'}">LeXRus.com</td>  
    160.       </tr>  
    161.       <tr>  
    162.         <td class="submenu" id="lexrus" style="display:none"><table width="100%" border="0" cellpadding="2" cellspacing="0">  
    163.             <tr>  
    164.               <td class="iefile"><a href="http://www.lexrus.com/">Homepage</a></td>  
    165.             </tr>  
    166.             <tr>  
    167.               <td class="iefile"><a href="http://lexrus.com/blog/">Blog</a></td>  
    168.             </tr>  
    169.           </table>  
    170.         </td>  
    171.       </tr>  
    172.     </table></td>  
    173.     <td width="1" class="ctrlbar"><button class="ctbutton" onfocus="blur();" onmouseup="with(findObj('menubar').style){display=display=='none'?'':'none';this.innerText=display=='none'?'>':'<'}" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#eeeeee'"><</button></td>  
    174.     <td class="explorer"><iframe name="browserframe" id="browserframe" width="100%" height="100%" scrolling="auto" frameborder="0"></iframe></td>  
    175.   </tr>  
    176. </table>  
    177. </body>  
    178. </html>  
    « emlog sendmail插件 | onclick改变classname»

    引用地址:

    有以下朋友发表了自己的看法：

    Gravatar Coach Factory Outlet
    2011-12-12 15:06
    感谢分享哈。。

    发表评论：

  • 搜索

  • 岁月如梭

  • 分类

    • 心情记事(40) 订阅该分类
    • 经典网文(30) 订阅该分类
    • PHP+MYSQL(40) 订阅该分类
    • Javascript(21) 订阅该分类
    • 电脑网络(33) 订阅该分类
    • emlog(7) 订阅该分类
    • Linux(2) 订阅该分类

  • 日历

  • 随机日志

    • 十条CSS你不知道的秘密
    • 正则表达式常用匹配例子
    • 夜半清醒
    • Lonely people are shameful
    • 男人不成熟的35个标志!

  • 链接

    • TangJun's blog
    • vb.vc个性域名
    • 点滴记忆
    • 奇遇——心情随笔
    • Sfan@Live
    • 乐小北
    • 游戏毁我半生
    • 铁观音茶叶
    • ═╬簡箪√嗳
    • KLLER's Blog
    • Web前端开发
    • 零度自由
    • PHP100中文站论坛
    • Api.im
    • emlog

  • 最新日志

    • 茶汤
    • 操蛋的一年终于过去了
    • 域名城第16届域名大赛 - “非6勿扰”双拼.com域名大赛
    • 永远的兄弟
    • 夜半孤寂茶当酒，一壶独饮到天明

  • soft

    • 分类信息
订阅Rss
Powered by emlog | Loekman 主题 | 沪ICP备09020591号