14 12
发新话题
打印

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

本主题由 月上之木 于 2007-12-14 03:08 移动

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

详细请看: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.htmlb_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 编辑 ]

TOP

顶一个!支持,不过还没试过,先收了。

Myblog:http://red-eyes.cn
IN2studio官方:www.in2-studio.com

TOP

@miffyan
具体效果,你可以看我的BLOG中的任意文章页的Tabs切换效果(*^__^*) 多谢支持

TOP

我靠

太cool乐

收了

回头研究研究
时尚街拍  【看偷拍地别点】

TOP

JQuery...common.js里面不是已经集成了吗。。。

TOP

@月上之木
jQuery的版本有很多,而且互相都不兼容,最重要的是我不知道jQuery已经集成在了common.js中了(-.-)=3
不过,这个对ZBLOG原程序没有什么影响的

TOP

效果不错,收藏了。

TOP

竞博客路过
蓝兔博客 WWW.SINOBLOG.ORG
AD: Bali-Flower Z-Blog Theme

TOP

发现了一个BUG!已经解决,请看本帖最上方(*^__^*)

TOP

自己在顶一下(*^__^*)

TOP

那我也顶顶吧,是不错,实用的就是最好的

TOP

jQuery的版本有很多,而且互相都不兼容?????????
[AD]:个人BLOG:思想碎片@Zx.MYS
[说明]:1.有事请发帖,论坛短消息已禁用。2.写Z-Blog程序的不是我,是另外一个zx。3:准备高考,消失一年。

TOP

 14 12
发新话题