低一度

顶部横幅

实现评论表框背景色轮换显示

2009-12-30 - diyidu - 网页设计 - Views

这两天一直在研究这个问题。原因很简单:在仿Prowe V3这款主题时,评论列表那个地方,一直没办法实现原作的样式,即:评论条目1、2、3、4、5、6……背景色轮换交替显示。我知道这个效果对Z-Blog来说实现有点困难,必须借助JS来达成(其实WP也是倚靠JS来实现的),而我偏偏又对JS似懂非懂。没办法,只得硬着头皮去请教haphic,结果他丢给了我一段JS代码,说是针对这个问题的。哇,头晕!说实话,我一点儿也没看懂。怎么办呢?接下来的几天时间里,一直在思考这个问题。工夫不负有心人呵,总算让我写出了一个有效的代码。这里发出来,与大家共享下——

先说下做法吧,首先要更改列表模板中评论板块的布局,改成如下结构:

<table id="commment" />
        <tr><td>commment1</td></tr>
        <tr><td>commment2</td></tr>
        <tr><td>commment3</td></tr>
        <tr><td>commment4</td></tr>
        <tr><td>commment5</td></tr>
        <tr><td>依此类推……</td></tr>
<table>

接着,再定义隔行属性以及判断函数注意:下面的JS定义代码必须放到<table id="commment" />前面)

<style>
tr.commment1 {background-color:#fff;}
tr.commment2 {background-color:#ddd;}
</style>

<script>
function initTableCss(){
        var tab=document.getElementById( "commment");
        for(var   i=0;i <tab.rows.length;i++){
        tab.rows[i].className=(i%2==1)? "commment1": "commment2";
        }
}
window.onload=initTableCss;
</script>

OK,这样就可以啦,就是这么简单。

注意:在这里,style下的css样式是机动的,可任由你定义,最终效果可以五花八门,比如做成一左一右的交替……

当然,你或许会说:现在都xhtml+css时代了,还用表框来套?也对,那再来个改进吧——用li元素来装每一条评论,这样显示速度也会好于用表格装吧。样式及JS代码如下:

<style>
.commment1 {background-color:#fff;}
.commment2 {background-color:#ddd;}
</style>

<script>
function intCss(){
        objName=document.getElementById("commment").getElementsByTagName("li") 
        for(var   i=0;i <objName.length;i++){
                objName(i).className=(i%2==1)? "commment1": "commment2";
        }
}
window.onload=intCss;
</script>

div布局结构如下:

<div >
     <ul id="commment">
          <li>commment1</li>
          <li>commment2</li>
          <li>commment3</li>
          <li>commment4</li>
          <li>commment5</li>
          <li>依此类推……</li>
     </ul>
</div>

OK,也完成了,更简单吧?

最后一点小提示:据我充当“小白鼠”测试,此法目前只在IE下有效,火狐、谷歌等浏览器,貌似都不支持。晕哦,找时间继续改进!先看两个运用的范例吧——

实现评论表框背景色轮换显示

    这个就是Prowe V3原作的评论列表样式,背景色交替显示。

实现评论表框背景色轮换显示

    这个是haphic新主题的评论列表样式,一右一右交替显示。

不知道他们的JS与我写的差别在哪儿。暂时嫉妒一下呵。大家如果有好的做法,望不吝赐教,感激涕零中……

关键词 // 网页设计 JS应用 背景色轮换 评论列表样式
出处:低一度,链接:http://www.diyidu.cn/post/comment_tablebg.html

上一篇:Google AdSense实用手册分享 下一篇:2个不错的国外免费php空间推介

随机推荐

to "实现评论表框背景色轮换显示"

  • 一路同行
    #2 一路同行 回复该留言 2009-12-30 14:08:03
    会css就是好啊,一个只会用table的人走过。
    diyidu 于 2009-12-30 15:22:25 回复
    CSS蛮好学的,干嘛不学呢?
  • TONY
    #3 TONY 回复该留言 2009-12-30 15:12:17
    菜鸟飞过!
    diyidu 于 2009-12-30 15:22:54 回复
    小心点飞,别掉下来。
  • zhouwin
    #4 zhouwin 回复该留言 2009-12-30 15:35:11
    恩,看看,不评论。
    diyidu 于 2009-12-30 15:55:32 回复
    不评论,你不是已经评论了吗?呵呵。
  • 盘先海
    #5 盘先海 回复该留言 2009-12-30 16:32:13
    已经复杂化了,不利于批量生产。
    diyidu 于 2009-12-30 16:36:11 回复
    那有没有更好的实现方法?还望不吝赐教呵!
  • leigo
    #6 leigo 回复该留言 2010-1-2 16:07:59
    不赖,学习学习,以后或许有用。
    diyidu 于 2010-1-2 16:52:12 回复
    呵,多指教。
  • ShunYea
    #7 ShunYea 回复该留言 2010-1-7 20:03:35
    想请问你的代码高亮怎么处理的,谢谢。
    diyidu 于 2010-1-7 20:33:30 回复
    通过Css定义blockquote。就可以了。

Add comment

验证码