为自己的网页制做Tab Pane

viahttp://voivo.de/blog/444.html

 

来访的人可能都注意到了，在我的侧边样，有个很漂亮的Tab Pane，用它不但可以把零乱的Sidebar内容整合，而且还能动态地显示出各各内容，节省了空间，页面又变得整洁，甚是实用。

其实改版前一直使用的一种收缩的侧边栏，目的也是为了减少页面空间，使其整洁。但在浏览到http://www.komodomedia.com/这个Blog后，它的侧边栏效果深深吸引了我。但查看源文件，始终不得其解。最后在Google里查找近似的应用，发现了这么一个叫做Tab Pane的东东。

浏览过很多Blog，使用这种Tab Pane的微乎其微，中文Blog圈内更是没有了。所以一出现便吸引了很多人，好多朋友在Wordpress的QQ群上问怎么做，我只是提供给了原文章的地址，叫大家摸索，可还是好多人想要个教学，那么我只好再次献丑了，希望没有什么错误的地方来误人子弟。

原文地址：Tab Pane

在原文处的Download下载代码文件，解压缩后，上传到自己的网页空间，推荐放到WP安装目录的wp-content\themes内。

然后把此两行代码复制到模板文件的header.php内，</head>之前：

1. <script type="text/javascript" src="js/tabpane.js"></script>
2. <link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" />

其中粗体部分改成自己的网络链接地址，推荐使用<?php bloginfo('template_directory'); ?>，这样在更换空间时也不会出错。

之后便可以把自己的Sidebar的代码按照它例子的格式（此例为显示两个Tab－General，Privacy）进行改写。这里省去了原文的一种简单的代码加载方式，虽然简单的格式完全能实现了TabPane的功能，但为了更迅速更稳定的加载各各Tab，请使用下面的代码格式。

1. <div class="tab-pane" id="tab-pane-1">
2. <script type="text/javascript">var tabPane1 = new WebFXTabPane( document.getElementById( "tab-pane-1" ) );</script>   
3.  
4. <div class="tab-page" id="tab-page-1">     
5. <h2 class="tab">General</h2>     
6. <script type="text/javascript">      tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );      </script>     
7. This is text of tab 1. This is text of tab 1.     
8. This is text of tab 1. This is text of tab 1.   
9. </div> 
10.  
11. <div class="tab-page" id="tab-page-2">     
12. <h2 class="tab">Privacy</h2>     
13. <script type="text/javascript">      tabPane1.addTabPage( document.getElementById( "tab-page-2" ) );      </script>   
14.   This is text of tab 2. This is text of tab 2.     
15. This is text of tab 2. This is text of tab 2.   
16. </div>
17.  
18. </div>

注释：

<h2  class="tab"></h2>之间的部分即为Tab的标题 This is text of tab 1. This is text of tab 1. This is text of tab 1. This is text of tab 1. 此部分为Tab的内容。

在实现自己侧边栏的TabPane效果时只需要把这些代码替换成sidebar.php里的各各内容即可，添加更多Tab只需依照增加代码即可，注意按次序改写。