为自己的网页制做Tab Pane

E-Spacy看到了漂亮的Tab Pane,于是也给自己的BLOG装了个。

安装方法是参照E-Spacy做的,效果见侧栏 。

tabpane下载源代码,解压缩后,上传到自己的网页空间,推荐放到WP安装目录的wp-content\themes内。

然后把此两行代码复制到模板文件的header.php内,head之间:

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

其中js/tabpane.jscss/tab.webfx.css部分改成自己的网络链接地址,推荐使用

1
<?php bloginfo('template_directory'); ?>

这样在更换空间时也不会出错。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<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.
</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.
</div>
</div>

注释:

1
<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只需依照增加代码即可,注意按次序改写。

为自己的网页制做Tab Pane》上有 2 条评论

  1. Pingback 引用通告: TabPane特效插件 - 5mu’s blog

  2. Pingback 引用通告: 为我的WP添加——TabPane | 外婆饭

发表评论

电子邮件地址不会被公开。 必填项已用*标注