A Bit? No!!!

现在的网站论坛一般都会有用户等级这一说，如果单纯的只是用文字或一个等级图片似乎不够形象。要为网站论坛的用户等级作一个形象的展示，弄这么一个进度条则能很好的说明问题

记得在一些论坛上见过这种类似的，但是当想要找的时候又不知道应该到哪去找，也不知道这东西应该用什么名字。不要看这么个小东西，从头实现起来还是费了点时间，虽然到最后一看結果不过如此。。。下面是简单的实现方法

def user_level_bar(user)
  <<-EOF
  <div class="fullscore">
    <div class="score" style="width:#{user_level_length(user)}px;"></div>
    <div class="img">
      #{user_level_text(user)}
    </div>
  </div>
  EOF
end

这是个rails的helper，虽然主要是说CSS，但是这进度总规是动态的吧。。。

解释下相关的东西，user_level_length主要是根据当前用户的level来确定进度条的长度，这个可以用固定的百分比，不过似乎效果不好，至少一般的网站在用户等级level分制上并不是均匀的。

user_level_text就是显示在进度条上的那个5星图片或者是文字了。。。

一切OK，然后是CSS

div.fullscore {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  height: 20px;
  width: 100px;
  background: #FFFFFF;
  border: 1px solid #AAAAAA;
}
div.fullscore { /*讨厌的IE，如果是自己的网站，我才不加这个呢*/
  *display: inline;
  *height: 1;
}
div.fullscore div.score {
  position: absolute;
  height: 100%;
  background: #FDC69F;
}
div.fullscore div.img {
  position: absolute;
  width: 100px;
  height: 100%;
  text-align: center;
}

PS：这几天突然看到phpbb中国的论坛就是有进度条的，不过貌似那个进度条就是个按照等级来的图片。