[ZBLOG]ZBLOG改造计划之KTabs篇(2007年12月5日更新)

最新提示:由于ZBLOG版本升至ZBLOG 1.8,因此本篇内容对ZBLOG 1.8无效
                       关于
ZBLOG 1.8的内容请看这里:http://www.k-zone.cn/zblog/catalog.asp?tags=ZBLOG1%2E8 

2007年12月5日更新:
修正了一个BUG!
 
BUG产生原因:
只有使用了本插件(KTabs)才能产生这样的BUG。
 
BUG产生效果:
在使用本插件后,在任意浏览器里面进行留言的回复就会产生一个JavaScript错误。
 
BUG的影响:
虽然会产生BUG,但是不会影响用户的留言回复功能,因此这个BUG只会造成较差的用户体验性。
 
BUG解决方法:
在/SCRIPT/common.js找到如下代码段:
    //ajax comment begin
    ......................................
    //ajax comment end
 
1、不需要使用Ajax留言回复功能的用户:
     请删除以上代码段中的内容。
2、需要使用Ajax留言回复功能的用户:
     将如下内容复制到上述代码段中

3、不想手动改动的用户请重新下载4u-HK-update-KTabs.rar升级包、4u-HK-Theme4u-HK-整站

2007年12月4日更新:
最近在研究JavaScript,因此就断然不能不研究JQuery了,看到JQuery强大的效果,不得不承认在Web时代,JavaScript的确是HTML最好的配合工具(*^__^*) 
多说无疑,既然领略到JQuery的强大,就得为我所用(*^__^*) 因此诞生了此文(我会不定期的将写一些使用/改造JQuery/JavaScript的例子给大家的)
PS:适用任何版本的ZBLOG,当然更可以和4u-HK完美融合(使用4u-HK的朋友直接下载升级包即可,排除了自己修改代码的烦恼),同样适用于任何使用HTML代码的地方(*^__^*)
 
具体效果:
请看本页面的中部,即出现Tabs的地方(*^__^*) 或下面的截图
 

 
改造对象:
single.htmlb_article-single.html,即ZBLOG的文章页!
 
适合对象:
任何版本的ZBLOG,当然更可以和4u-HK完美融合,同样适用于任何使用HTML代码的地方(*^__^*)
 
下载地址:
使用4u-HK(包括整站程序Theme)的朋友,请下载4u-HK-update-KTabs.rar升级包进行手工升级,或重新下载最新版4u-HK-Theme4u-HK-整站 程序。
使用其他版本的朋友请看具体步骤,请自行加载这个功能(*^__^*)
 
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的魅力就在于此,祝各位使用者顺利添加(*^__^*)

PS:我在这个BLOG上面还加入了几个小的特效,不知道大家能找到么?谁找到我就提供给他(*^__^*)