先给大家看张用tab pane做的效果图:
看到图左上角的效果吗?卡片式的显示内容,这样做不但可以把零乱内容整合,而且还能动态地显示出各自内容,节省了空间,页面又变得整洁,甚是实用。要实现这个效果并不难,这是利用Tab Pane这东东实现的.
首先去网上下载tab pane的代码文件:Download 里面含有例子,可以根据例子来实现。并且还有比较详细的说明文件,也可以参考。下面简单的介绍一下实现过程:
1、将下载的代码文件解压后,放入工程目录下,比如说:工程/common/js/tabpane/目录下
2、将以下两行代码复制到页面中,我写入的是jsp页面,此根据我的放置目录复制
- <link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/common/js/tabpane/css/luna/tab.css" />
- <script type="text/javascript" src="<%=request.getContextPath()%>/common/js/tabpane/js/tabpane.js"></script>
之后便可以将内容写入,按以下格式写入:
- <DIV class=tab-pane id=tabPane1>
- <SCRIPT type="text/javascript">
- tp1 = new WebFXTabPane( document.getElementById( "tabPane1") ,false );
- </SCRIPT>
- <DIV class=tab-page id=tabPage1>
- <H2 class=tab>
- 公文处理单
- </H2>
- <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
- <tr>
- <td colspan="6" height="50" align="center"><span class="titlefont">* * * 发 文 稿 纸</span></td>
- </tr>
- 省略 表单数据.................
- </table></td>
- </tr>
- </table>
- <SCRIPT type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</SCRIPT>
- </DIV>
- <DIV class=tab-page id=tabPage2>
- <H2 class=tab >
- 处理记录
- </H2>
- <SCRIPT type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage2" ) );</SCRIPT>
- 测试2,填充数据
- </DIV>
- <DIV class=tab-page id=tabPage3>
- <H2 class=tab >
- 处理状态
- </H2>
- <SCRIPT type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage3" ) );</SCRIPT>
- 测试3,填充数据
- </div>
- </DIV>
注:
- <H2 class=tab>Tab 标题</H2>