純手工打造漂亮的垂直時間軸，使用最簡單的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. 深色的圓粑粑（56*56）

兩個不同顏色的圓粑粑是為了讓列表看起來更靈動一點。

 

俺的PhotoShop功底不咋地，你會發現那兩個圓粑粑不是透明背景，而是白色背景的，沒關系，只要我們使用精確的CSS定位，看不出破綻的，^_^

 

最終我們希望實現的效果如下圖所示。

其中圓粑粑中的數字表示軟件的第幾個版本，是不是看着比原來的好多了。

 

下面我們就動手實現，純手工哦，用到的開發工具只有Notepad++（My favorite!）。

 

最簡單的HTML結構

HTML結構一定要保持簡單，其實就是一個列表嘛，那就用 UL 標簽實現。

<ul class="timeline">
    <li>
        <div class="time">時間</div>
        <div class="version">版本號</div>
        <div class="number">第幾個版本</div>
        <div class="content">
            <pre>
                更新記錄
            </pre>
        </div>
    </li>
<ul>

 

初步的設想是content左邊留白，time/version/number全部浮動起來，這樣方便定位。

特別是number的定位要准確，否則圓粑粑和背景垂直線就重合不到一起了。這就要看CSS的了。

 

最簡單的CSS

我們主要來看看如何對number的定位，完整的代碼在文章最后會給出。

ul.timeline {
    list-style-type: none;
    background: url("../res/img/version_line.png") repeat-y scroll 120px 0 transparent;
    margin: 50px 0;
    padding: 0;
}
ul.timeline li {
    position: relative;
    margin-bottom: 20px;
}

ul.timeline li .number {
    position: absolute;
    background: url("../res/img/version_dot.png") no-repeat scroll 0 0 transparent;
    width: 56px;
    height: 56px;
    left: 97px;
    line-height: 56px;
    text-align: center;
    color: #fff;
    font-size: 18px;
}

 

首先，將垂直藍色的背景線放在最外層的 UL 標簽上，距離左側 120px；

其次，設置 LI 為相對定位，為 LI 中元素的絕對定位做鋪墊；

最后，將number浮動起來，主要是number的left屬性一定要精確！

 

如何計算 number 的 left 屬性那，大家看看如下的公式是否合你口味：

number.left = line.left + line.width/2 – number.width/2

                      = 120 + 10/2 – 56/2

                      =  97

 

最簡單的JQUERY

剩下就是jQuery的任務了，我們需要使用jQuery完成如下兩點任務：

1. 動態計算 number 的數字；

2. 為間隔行的 LI 節點添加 alt 類。

$(function() {

    var liNodes = $('ul.timeline li'), count = liNodes.length, i, liNode;
    for(i=0; i<count; i++) {
        liNode = $(liNodes.get(i));
        if(i % 2 !== 0) {
            liNode.addClass('alt');
        }
        liNode.find('.number').text(count - i);
    }

});

 

 

最簡單的數據遷移（正則表達式替換）

還有一項重要的任務，如何把 100 多條數據遷移到新的 HTML 結構中去，沒人願意手工去做，沒關系我們有好幫手 Notepad++。

查找目標：\+(\d{4}-\d{2}-\d{2})\s+(v\d+.*)$

替換為：</pre></div></li>\r\n<li><div class="time">$1</div><div class="version">$2</div><div class="number"></div><div class="content"><pre>

 

查找目標用來匹配類似“[phone] v3.3.1”的字符串，一次搞定，是不是很舒服。

 

完成效果

列表實在是太長，這里只是 5% 不到的截圖！

 

優化！將頁面大小由150K減少為20K

本來文章就此結束了，可是吃完飯我就不滿意了，還有改進的余地！

1. 一次展示 100 多個記錄，用戶也看不完，反而影響顯示效果，長長長長長長長長長的滾動條；

2. 用戶關心的可能只是最近的幾次更新記錄，如果需要看更多的，提供一種方法即可！

 

基於以上考慮，我們可以將 100 多個記錄分成 20 個記錄一個文本文件保存起來，需要的時候通過 AJAX 獲取就行了。

頁面首次加載只需要前 10 條左右的記錄即可，在列表的最后添加一個大大的按鈕，如下圖所示。

 

最終的目錄結構如下所示。

 

來體驗一下最終的效果吧：

http://fineui.com/version

 

 

全部源代碼

<style>
    ul.timeline {
        list-style-type: none;
        background: url("../res/img/version_line.png") repeat-y scroll 120px 0 transparent;
        margin: 50px 0;
        padding: 0;
    }

    ul.timeline li {
        position: relative;
        margin-bottom: 20px;
    }
    ul.timeline li .time {
        position: absolute;
        width: 90px;
        text-align: right;
        left: 0;
        top: 10px;
        color: #999;
    }
    ul.timeline li .version {
        position: absolute;
        width: 290px;
        text-align: right;
        left: -200px;
        top: 30px;
        font-size: 40px;
        line-height: 50px;
        color: #3594cb;
        overflow: hidden;
    }
    ul.timeline li .number {
        position: absolute;
        background: url("../res/img/version_dot.png") no-repeat scroll 0 0 transparent;
        width: 56px;
        height: 56px;
        left: 97px;
        line-height: 56px;
        text-align: center;
        color: #fff;
        font-size: 18px;
    }
    ul.timeline li.alt .number {
        background-image: url("../res/img/version_dot_alt.png");
    }
    ul.timeline li .content {
        margin-left: 180px;

    }
    ul.timeline li .content pre {
        background-color: #3594cb;
        padding: 20px;
        color: #fff;
        font-size: 13px;
        line-height: 20px;
    }
    ul.timeline li.alt .content pre {
        background-color: #43B1F1;
    }
</style>
<ul class="timeline">
    <li>
        <div class="time">2013-07-29</div>
        <div class="version">v3.3.1</div>
        <div class="number"></div>
        <div class="content">
            <pre>
            -將工具YUICompressor替換為Microsoft Ajax Minifier（需要指定-evals:immediate）。
            ...
            </pre>
        </div>
    </li>
    ...
</ul>
<script>
    $(function() {

        var nextDataNumber = 5;

        var ulNode = $('ul.timeline');

        function initLiNodes() {
            var liNodes = ulNode.find('li'), count = liNodes.length, i, liNode, leftCount = nextDataNumber * 20;
            for(i=0; i<count; i++) {
                liNode = $(liNodes.get(i));
                if(i % 2 !== 0) {
                    liNode.addClass('alt');
                } else {
                    liNode.removeClass('alt');
                }
                liNode.find('.number').text(leftCount + count - i);
            }
        }


        $('#fetchNextData').click(function() {
            var $this = $(this);
            $this.addClass('disabled').text('......');

            $.get('./version_data_' + nextDataNumber +'.txt', function(data) {
                ulNode.append(data);
                $this.removeClass('disabled').text('后二十條數據');
                nextDataNumber--;

                if(nextDataNumber === 0) {
                    $this.hide();
                }

                initLiNodes();
            });

        });

        initLiNodes();

    });
</script>

 

小結

如何向用戶有效的展示 100 多條更新記錄，是個技術活。需要我們認真思考，學以致用，用最簡單的HTML、CSS、JQUERY來實現最好的用戶體驗。

 

后記 

開源中國的網友 混世頑童 提到是否可以在滾動條到達底部時自動加載后20條數據，這個也很容易實現，更新后的JavaScript代碼如下所示。

$(function() {
		
	var nextDataNumber = 5;
	var ajaxLoading = false;
	var docNode = $(document);
	
	var ulNode = $('ul.timeline');
	
	function initLiNodes() {
		var liNodes = ulNode.find('li'), count = liNodes.length, i, liNode, leftCount = nextDataNumber * 20;
		for(i=0; i<count; i++) {
			liNode = $(liNodes.get(i));
			if(i % 2 !== 0) {
				liNode.addClass('alt');
			} else {
				liNode.removeClass('alt');
			}
			liNode.find('.number').text(leftCount + count - i);
		}
	}
	
	
	$('#fetchNextData').click(function() {
		var $this = $(this);
		$this.addClass('disabled').text('正在加載后二十條數據...');
		ajaxLoading = true;
		
		$.get('./version_data_' + nextDataNumber +'.txt', function(data) {
			ajaxLoading = false;
			ulNode.append(data);
			$this.removeClass('disabled').text('后二十條數據');
			nextDataNumber--;
			
			if(nextDataNumber === 0) {
				$this.hide();
			}
			
			initLiNodes();
		});
		
	});

	initLiNodes();
	
	docNode.scroll(function() {
		
		if(docNode.height() - $(window).height() - docNode.scrollTop() < 10) {
			if(!ajaxLoading) {
				$('#fetchNextData').click();
			}	
		}
		
	});
	
});

　　

 

喜歡這篇文章，請幫忙點擊頁面右下角的【推薦】按鈕。