使用Tab Pane实现内容卡片式展现

先给大家看张用tab pane做的效果图：

 

看到图左上角的效果吗？卡片式的显示内容，这样做不但可以把零乱内容整合，而且还能动态地显示出各自内容，节省了空间，页面又变得整洁，甚是实用。要实现这个效果并不难，这是利用Tab Pane这东东实现的.

首先去网上下载tab pane的代码文件：Download   里面含有例子，可以根据例子来实现。并且还有比较详细的说明文件，也可以参考。下面简单的介绍一下实现过程：

1、将下载的代码文件解压后，放入工程目录下，比如说：工程/common/js/tabpane/目录下

2、将以下两行代码复制到页面中，我写入的是jsp页面，此根据我的放置目录复制

1. <link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/common/js/tabpane/css/luna/tab.css" />
2. <script type="text/javascript" src="<%=request.getContextPath()%>/common/js/tabpane/js/tabpane.js"></script>

之后便可以将内容写入，按以下格式写入：

1. <DIV class=tab-pane id=tabPane1>
2.                                 <SCRIPT type="text/javascript">
3.                                 tp1 = new WebFXTabPane( document.getElementById( "tabPane1") ,false );
4.                                 </SCRIPT>
5.                                 <DIV class=tab-page id=tabPage1>
6.                                     <H2 class=tab>
7.                                         公文处理单
8.                                     </H2>
9.                                         <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
10.                                           <tr>
11.                                             <td colspan="6" height="50" align="center"><span class="titlefont">* * * 发 文 稿 纸</span></td>
12.                                           </tr>
13.                                             省略  表单数据.................
14.                                 </table></td>
15.                               </tr>
16.                             </table>
17.                                     <SCRIPT type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</SCRIPT>
19.                                 </DIV>
20.                                 <DIV class=tab-page id=tabPage2>
21.                                     <H2 class=tab >
22.                                         处理记录
23.                                     </H2>
24.                                     <SCRIPT type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage2" ) );</SCRIPT>
25.                                     测试2,填充数据
26.                                 </DIV>
27.                                 <DIV class=tab-page id=tabPage3>
28.                                     <H2 class=tab >
29.                                         处理状态
30.                                     </H2>
31.                                     <SCRIPT type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage3" ) );</SCRIPT>
32.                                     测试3,填充数据
33.                                 </div>
34.                             </DIV>

注：

1. <H2 class=tab>Tab 标题</H2>

就这么简单的实现了想要的效果了,根据以上的格式，只要往里面填充数据即可，通过改变CSS样式文件还可以实现几种不同的效果。