[置顶] 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！

前言

FineUI控件库发展至今已经有 5 个年头，目前论坛注册的QQ会员 5000 多人，捐赠用户 500 多人（捐赠用户转化率达到10%以上，在国内开源领域相信这是一个梦幻数字！也足以证明FineUI旺盛的生命力！）。这一切的得来不是无缘无故的，而是来自于FineUI的发布理念 – Release Early! Release Often!

时至今天，FineUI总共发布了 100 多个版本！

这 100 多个版本更新列表只是文本文件就有 120K 大小，放在页面上更是长的要命，如何恰当的向用户展示 FineUI 勤劳的身影就成了一个问题。之前的展示页面只是简单的将所有的更新记录放在一个 PRE 标签中，显得有点死气沉沉，如下图所示。

由于前段时间时间轴形式的展示方式比较火，就考虑采用这种方式。但是查阅了网上的jQuery timeline plugin，大部分都比较臃肿，还需要创建Google Spreadsheet Template，并且通过JavaScript调整时间轴中每个记录的位置，也不适合软件更新记录这样大数据集的展现。

其实我需要的只是一个简单、漂亮的数据展示方式，很快我找到了这个例子：http://tympanus.net/Blueprints/VerticalTimeline/

这个界面风格给人眼前一亮的感觉。在快速浏览之后，我发现这里面用到了内嵌字体和CSS3的诸多知识来生成哪些漂亮的图片，所以在IE7、IE8下浏览会乱作一团，如下图所示：

没关系，我们就用简单的图片来代替，其实我最想要的就是左侧的那个垂直直线和那个圆粑粑，网页截图，然后用PhotoShop做简单的处理，得到如下三张图片。

1. 垂直线（10*7）

2. 浅色的圆粑粑（56*56）

3. 深色的圆粑粑（5656）

查找目标：+(\d{4}-\d{2}-\d{2})\s+(v\d+.)\(</p> <p>替换为：&lt;/pre&gt;&lt;/div&gt;&lt;/li&gt;\r\n&lt;li&gt;&lt;div class=&#34;time&#34;&gt;\)1&lt;/div&gt;&lt;div class=“version”&gt;$2&lt;/div&gt;&lt;div class=“number”&gt;&lt;/div&gt;&lt;div class=“content”&gt;&lt;pre&gt;

查找目标用来匹配类似“+2013-07-29 v3.3.1”的字符串，一次搞定，是不是很舒服。

列表实在是太长，这里只是 5% 不到的截图！

本来文章就此结束了，可是吃完饭我就不满意了，还有改进的余地！

1. 一次展示 100 多个记录，用户也看不完，反而影响显示效果，长长长长长长长长长的滚动条；

2. 用户关心的可能只是最近的几次更新记录，如果需要看更多的，提供一种方法即可！

基于以上考虑，我们可以将 100 多个记录分成 20 个记录一个文本文件保存起来，需要的时候通过 AJAX 获取就行了。

页面首次加载只需要前 10 条左右的记录即可，在列表的最后添加一个大大的按钮，如下图所示。

最终的目录结构如下所示。

来体验一下最终的效果吧：

如何向用户有效的展示 100 多条更新记录，是个技术活。需要我们认真思考，学以致用，用最简单的HTML、CSS、JQUERY来实现最好的用户体验。