一个页面中有太多的内容得拉滚动条才能看到所有的内容,如果使用WebF可以实现漂亮的Tab Pane,用它不但可以把零乱的Sidebar内容整合,而且还能动态地显示出各各内容,节省了空间,页面又变得整洁,甚是实用.
1. 首先需要下载TabPane的源代码, 然后将其中的CSS, JS, LOCAL目录和demo.html, memdemo.html, tabpane.html解压到工程目录中
2.接下来就是把JS和CSS引用进到所要用到的JSP页面,最好添加在head标签之前:
<link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" />
当然, 这里的"src"和"href"后面的地址都要换成你实际存放的位置.在JSP页面某处,最好是一个<table></table>中添加TabPane的模板代码如下:
<script type="text/javascript">
var tabPane1 = new WebFXTabPane( document.getElementById( "tab-pane-1" ) );
</script>
<div class="tab-page" id="tab-page-1">
<h2 class="tab">General</h2>
<script type="text/javascript">
tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );
</script>
This is text of tab 1. This is text of tab 1.
This is text of tab 1. This is text of tab 1.
</div>
<div class="tab-page" id="tab-page-2">
<h2 class="tab">Privacy</h2>
<script type="text/javascript">
tabPane1.addTabPage( document.getElementById( "tab-page-2" ) );
</script>
This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2.
</div>
</div>
3. 这样就可以啦, 如果想进一步更改它的样式, 就修改相应的CSS好了.