为自己的网页制做Tab Pane
来访的人可能都注意到了，在我的侧边样，有个很漂亮的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>之前：
- <script type="text/javascript" src="js/tabpane.js“></script>
- <link type=”text/css” rel=”StyleSheet” href=”css/tab.webfx.css” />
- ?>
其中js/tabpane.js和css/tab.webfx.css部分改成自己的网络链接地址，推荐使用<?php bloginfo(’template_directory’); ?>，这样在更换空间时也不会出错。
之后便可以把自己的Sidebar的代码按照它例子的格式（此例为显示两个Tab－General，Privacy）进行改写。这里省去了原文的一种简单的代码加载方式，虽然简单的格式完全能实现了TabPane的功能，但为了更迅速更稳定的加载各各Tab，请使用下面的代码格式。
- <div class="tab-pane" id="tab-pane-1">
- <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>
注释：
<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只需依照增加代码即可，注意按次序改写。
你的TAG可以用中文字吗》？？？？？？
[Reply]
当然可以啊，我只不过不习惯使用中文的Tag而已。你可以去http://voivo.de/archives/查看，底部有中文Tag的。
[Reply]
你好 看了你30多页的blog 呵呵 受益匪浅！
我正在架自己的wordpress http://tinn.writestyle.cn/
现在有几个问题想请教
一是你的每个联机都有点击数统计是怎么做的？
另外tag是怎么实现的？
打扰了！盼复~谢谢！
[Reply]
你是说页脚的那个６０００多的数字？这就是个访问统计啊。http://www.statcounter.com/，你申请了，加上代码就行了的。
Tag就是使用了那个UTW的Tag插件。在http://voivo.de/wp-plugins/里有介绍。
[Reply]
我说的那个统计是指 你日志中如果有链接 把鼠标移上去以后会提示 此链接今天被点击多少次 这个效果是怎么出来的呢？
另外每篇日志下边的3个标签 都是用table pane做的？
还有就是Collapsible More Link这个插件应怎样设置 我激活后为什么发帖时没有相应按钮？还是在帖子内容中加入相应语句？
这么多问题 麻烦了！：）谢谢！
[Reply]
那个显示点击次数是http://www.mybloglog.com，这个网站的服务，注册后加入代码就行了。
正确，那三个标签是tab pane做的。
在日志中，需要用more来显示的内容前，加入
来实现。
[Reply]
最好一个问题仍然没有解决 加入并保存后 它自动给替换成 没有效果！
[Reply]
没有问题啊，你看主页里我的首篇日志和这篇日志，效果都是有的啊。
安装插件时，分两部分，一部分放到插件目录，一部分要安装到WP的wp-includes/js/…..目录内。
然后使用时，不能使用more标签来添加，而使用如上的代码，即：
如果你想要添加另一个按方便使用，请修改wp-includes/js目录内的quicktags.js文件，在内加入如下代码。（添加时注意加入的位置，参考其它按钮代码段即可）
[Reply]
还有，这样隐藏部分内容，其实还是会加载这些网页内容的，所以这样做只是为了减少页面占用空间，为了美观，而不能加快网站刷新速度，相反因为加载js代码，而会减慢速度的…..
[Reply]
[…] Tab Pane，为blog的sidebar增加标签栏的效果。具体安装和实际效果可以参看E-space写的教程。 sidebar tab pane 侧栏 […]
[Reply]
[…] 看到现在blog的边栏添加的Tab Pane,在这里做的加上WP2.0的更新，blog算是升级结束了. […]
[Reply]
这个tab pane 我真是晕了 加入sidebar之后 出现一大段空白 最下边才出现了tab 不知道是什么原因呢
[Reply]
出现空白应该是你的css定义问题，可能是宽度不够，或者是
[Reply]
[…] 为自己的网页制做Tab Pane at E-space (tags: wordpress) […]
[Reply]
[…] 为自己的网页制做Tab Pane 01/24 11:39, 2006 […]
[Reply]
[…] 为自己的网页制做Tab Pane at E-space (tags: wordpress tab design) […]
[Reply]
[2006/02/12] Carrie也來做網摘…
免費影像處理軟體-PhotoFiltre 02/09 12:03, 2006 (標籤: photo teach) amarylliss。艾瑪[隨處走走] - [製圖] PhotoImpact 點畫特效 02/03 08:36, 2006 (標籤: photoimpact) MultiMedia Player: Stickam and CoolPlayer 02/03 05:11, 2006 (標籤: plugins) 为自己的网页制做Tab Pane 01/…
[Reply]
菜鸟问题：在您的文章中说 “其中粗体部分改成自己的网络链接地址，推荐使用，这样在更换空间时也不会出错。”粗体部分是只哪里啊？
我搞了一天都没有成功！
[Reply]
to alloyli: 不好意思，因为使用了代码框显示，所以没有弄出粗体来，指的就是js/tabpane.js和css/tab.webfx.css这部分，换成自己的网址，也就是http://xxx/…/js/tabpane.js和http://xxxx/…./css/tab.webfx.css。
[Reply]
正在学习使用web pane，如果建设中的网页没有使用template，也没有安装UTW，下载代码文件，压缩后应该放在哪里？^___^，不好意思，我对programming不熟，刚刚开始摸索dyanamic网页。web pane 可以放在 static webpage 上吗？
[Reply]
to jia pei：
如果你只是想在普通的网页中加入Tab Pane，需要将那两行加载JavaScript和css文件的代码放到你的header部分，也就是你网页代码的 之前。
下载的文件你可以放到任何地方，只需要把上面两个文件的路径指明就行了。
Tab Pane可以放到任何网页上，条件是访问的人在用浏览器时打开了java即可。
[Reply]
[…] 技术支持来自: hhalloyy的为自己的网页制做Tab Pane, 写得非常详细的一篇文章, 只是code里的引号一直是老大难问题, 大家copy的时候要小心了… June 3rd, 2006 Posted by Lucifer Filed in Blog Tags: blog tabpane douban […]
[Reply]
[…] 为自己的网页制做Tab Pane at E-space (tags: WP) […]
[Reply]
请问TAB的颜色在那里调整呢
[Reply]
to 小玩之：
tab.webfx.css 文件中修改相应的颜色代码就行了。
[Reply]
看来得找个周末来研究。。。。浏览了一下下，还没明白。。
[Reply]
不错的东东。收藏！
谢谢hhalloyy!
[Reply]
客气了！
[Reply]
剛剛看做出來的效果跟 http://www.dhtmlgoodies.com/ 的效果是一樣的，不過無法因內容的長度而自動調整高度，會跑出scrollbar 。
[Reply]
你说的这个站非常棒！
[Reply]
剛剛仔細研究一下，非常不錯，可以改成依內容的多寡而自動調整高度，Nice!
[Reply]
你的引号….
大家复制时要注意 啊..
[Reply]
嗯，wp在代码输出时引号什么的是会变，标点都有问题的。
[Reply]
我的Wordpress日趋稳定….
First of all，听浅姐的话，我要慢慢用回并习惯中文标点！
大家可能从Blog外表看不出什么变化，其实这么久以来，每天都会花点时间折腾这个Wordpress，改改代码，试用一下插件主题，经过…..
[Reply]
呵呵 那谁知道呢？~
[Reply]
你的美丽梦想将在这里实现
[Reply]
为自己的网页制做Tab Pane…
在E-Spacy看到了漂亮的Tab Pane，于是也给自己的BLOG装了个。
安装方法是参照E-Spacy做的，效果见侧栏 。
到tabpane下载源代码，解压缩后，上传到自己的网页空间，推荐放到WP安装目录的wp-content\t…
[Reply]
[…] 好了, 我们进入主题, 看看是如何实现这个TabPane的(关于TabPane的文章最早是hhalloyy发表的, 详细教程可参考他的文章): […]
[Reply]
又见一末年
[Reply]
日记网页
[Reply]
[…] 为自己的网页制做Tab Pane at E-space (tags: web+design) […]
[Reply]
[…] —————————-教學—————————— E-space http://e-spacy.com/blog/tab-pane-for-website/ […]
[Reply]
你好,非常不錯
[Reply]