详细请看:
http://www.k-zone.cn/zblog/post/4u-HK-KTabs.html
2007年12月5日更新:
修正了一个BUG!
BUG产生原因:
只有使用了本插件(
KTabs)才能产生这样的BUG。
BUG产生效果:
在使用本插件后,在任意浏览器里面进行留言的回复就会产生一个JavaScript错误。
BUG的影响:
虽然会产生BUG,但是不会影响用户的留言回复功能,因此这个BUG只会造成较差的用户体验性。
BUG解决方法:
http://www.k-zone.cn/zblog/post/4u-HK-KTabs.html
2007年12月4日更新:
具体效果,请看
http://www.k-zone.cn/zblog/post/4u-HK-KTabs.html页面的中部,即出现Tabs的地方(*^__^*) 或下面的截图
改造对象:
single.html和
b_article-single.html,即
ZBLOG的文章页!
适合对象:
任何版本的
ZBLOG,当然更可以和
4u-HK完美融合,同样适用于任何使用HTML代码的地方(*^__^*)
下载地址:
完美无缝整合
4u-HK
下载请去:
http://www.k-zone.cn/zblog/post/4u-HK-KTabs.html
4u-HK-update-KTabs.rar升级包使用方法:
将解压缩后的两个文件夹分别覆盖到
ZBLOG根目录下面,注:请先备份原来的single.html和b_article-single.html
适合浏览器版本:
IE6、IE7、Safrai3.04、Opera9.5 Alpha、FireFox2.X、FireFox3.X(由于JQuery的强大兼容性,基本上可以适用于任何版本的浏览器)
优缺点:
优点:显而易见,给予blogger更佳浏览效果、更棒的用户体验、还会减少文章页的长度。
缺点:1、由于在页面Loading的时候会加载JQuery,因此会拖慢页面的Loading时间。不过我完全感觉不到有什么拖慢的现象存在,还是要得益于JQuery的强大效率。
2、在某些浏览器中会出现错误,我只的这些浏览器是类似IE4、IE5等老古董的浏览器了,因此绝大多数正常情况也应该没有问题!
总结:基于以上两个缺点是很难出现的(只有非常古老的古董级别的浏览器才能出现问题)因此可以忽略不计(*^__^*)
具体修改步骤:
首先下载JQuery的效果包,下载地址:
http://www.k-zone.cn/zblog/upload/KTabs.rar,解压缩后将其放入plugin目录下面。
1、single.html页面的改造步骤
使用文本编辑工具打开single.html,将以下代码复制到</head>前面。
<script src="
<#ZC_BLOG_HOST#>plugin/KTabs/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="
<#ZC_BLOG_HOST#>plugin/KTabs/ui.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(function() {
$j('#
KTabs ul').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
});
</script>
在<Title>的前面加入如下代码
<link rel="stylesheet" href="
<#ZC_BLOG_HOST#>plugin/KTabs/ui.tabs.css" type="text/css" media="print, projection, screen">
以上,single.html的改造完毕(*^__^*)
PS:以上步骤只使用与ZBLOG程序,而其他程序请将红色部分换成相应的绝对路径,其他步骤一致!
2、b_article-single.html页面的改造步骤
使用文本编辑工具打开b_article-single.html,在适当的位置加入如下代码(适当的位置是指:想要显示Tabs的地方)
<div id="
KTabs">
<ul>
<li><a href="#
tabsview-1"><span>Tab1的名称</span></a></li>
<li><a href="#
tabsview-2"><span>Tab2的名称</span></a></li>
........................
<li><a href="#
tabsview-n"><span>Tabn的名称</span></a></li>
</ul>
<div id="
tabsview-1">
内容1
</div>
<div id="
tabsview-2">
内容2
</div>
........................
<div id="
tabsview-n">
内容n
</div>
</div>
注:其中
蓝色黑体字部分一定要和single.html中的保持一致!
红色字体部分要一一对应!
最后,将
ZBLOG用户进行文件重建和索引重建即可完成(*^__^*)
是不是很简单啊,呵呵JQuery的魅力就在于此,祝各位使用者顺利添加(*^__^*)
[
本帖最后由 kenshin520 于 2007-12-5 12:40 编辑 ]