模范IE的收藏夹

提示:一个模仿IE收藏夹的例子，做得与IE收藏夹是一模一样的，如果你正在开发用于网上存放收藏夹的脚本的话，这个脚本你一定不要错过！

网页制作

闪客帝国

蓝色理想

闪盟在线

织梦地带

设计地带

点燃灵感

风的论坛

多级目录

二级目录

三级目录

doc 3.1

doc 3.2

doc 2.1

doc 2.2

doc 1

doc 2

二级目录

doc 2.1

doc 2.2

三级目录

doc 3.1

doc 3.2

doc 3

doc 4

计划任务

我们尽力做到最好！

无忧主页

将下面的代码复制到<head> 内并把相应的脚本文件与CSS文件放到相应的目录下

将下面的代码复制到<body> 内

<div class="outer" style="width: 180px;margin: 10px;">
<div class="inner" style="width: 180px;">
<div class="favMenu" id="aMenu">
 <div class="topFolder" id="samples"><img class="icon" 
  src="imgs/foldericon.gif" WIDTH="16" HEIGHT="16">网页制作</div>
  <div class="sub" id="samplesSub">
  <div class="subItem" href="http://www.flashempire.com" 
  title="(Updated: 980701)"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">闪客帝国</div>
  <div class="subItem" href="http://www.blueidea.com" title="(Updated: 
  980701)"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">蓝色理想</div>
  <div class="subItem" href="http://www.flashsun.com" title="(Updated: 
  980630)"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">闪盟在线</div>
  <div class="subItem" href="http://jet.cnnf.net" title="(Updated: 
  980628)"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">织梦地带</div>
  <div class="subItem" href="http://www.design-z.net" title="(Updated: 
  980605)"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">设计地带</div>
  <div class="subItem" href="http://www.fwcn.com" title="Uses 
  one &lt;TEXTAREA&gt; and one &lt;IFRAME&gt; for preview. (Updated: 
  980318)"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">点燃灵感</div>
  <div class="subItem" href="http://www.windstudio.net" 
  title="Use rich text tooltips. (Updated: Way back!)"><img class="icon" 
  src="imgs/htmlicon.gif" WIDTH="16" HEIGHT="16">风的论坛</div>
  </div>
 <div class="topFolder" id="docs"><img class="icon" 
  src="imgs/foldericon.gif" WIDTH="16" HEIGHT="16">多级目录</div>
  
  <div class="sub" id="docsSub">
  <div class="subFolder" id="subdocs"><img class="icon" 
  src="imgs/foldericon.gif" WIDTH="16" HEIGHT="16">二级目录</div>
  
  <div class="sub" id="subdocsSub">
  <div class="subFolder" id="evendocs"><img class="icon" 
  src="imgs/foldericon.gif" WIDTH="16" HEIGHT="16">三级目录</div>
  <div class="sub" id="evendocsSub">
  <div class="subItem"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">doc 3.1</div>
  <div class="subItem"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">doc 3.2</div>
  </div>
  <div class="subItem"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">doc 2.1</div>
  <div class="subItem"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">doc 2.2</div>

</div>
  <div class="subItem"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">doc 1</div>
  <div class="subItem"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">doc 2</div>
 <div class="subFolder" id="subdocs2"><img class="icon" 
  src="imgs/foldericon.gif" WIDTH="16" HEIGHT="16">二级目录</div>
  
  <div class="sub" id="subdocs2Sub">
  <div class="subItem"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">doc 2.1</div>
  <div class="subItem"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">doc 2.2</div>
  <div class="subFolder" id="evendocs2"><img class="icon" 
  src="imgs/foldericon.gif" WIDTH="16" HEIGHT="16">三级目录</div>
  
  <div class="sub" id="evendocs2Sub">
  <div class="subItem"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">doc 3.1</div>
  <div class="subItem"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">doc 3.2</div>
  </div>

</div>
  
  <div class="subItem"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">doc 3</div>
  <div class="subItem"><img class="icon" src="imgs/htmlicon.gif" 
  WIDTH="16" HEIGHT="16">doc 4</div>

</div>
 
 <div class="topFolder" id="todo" style="font-weight: 
  bold;"><img class="icon" src="imgs/sched.gif" 
  WIDTH="16" HEIGHT="16">计划任务</div>
  <div class="sub" id="todoSub" style="padding-left: 
  22px;">
  <div>我们尽力做到最好！</div>
  </div>
  
  <div class="topItem" href="http://www.51js.com/"><img 
  class="icon" src="imgs/home.gif" style="height: 17px" 
  WIDTH="16" HEIGHT="17">无忧主页</div>
</div>
</div>
</div>
<div id="aMenuUp" class="scrollButton">5</div>	
  
  <div id="aMenuDown" class="scrollButton">6</div>

至此你已经可以做出一个实例了

如何改变收藏夹的内容

留意上方的代码片段，你应注意到内容是由Div标签加某个风格class来定义其类型的，有以下几种
topFolder, topItem, subFolder, subItem 与 sub

这里是一个简单的例子

<div class="topFolder" id="test">This is a folder</div>
<div class="sub" id="testSub">
<div class="subItem">This is a sub item</div>
</div>

注意当加入icon时请为img标签加上class风格名称为icon