FineUI控件庫(kù)發(fā)展至今已經(jīng)有 5 個(gè)年頭，目前論壇注冊(cè)的QQ會(huì)員 5000 多人，捐贈(zèng)用戶 500 多人（捐贈(zèng)用戶轉(zhuǎn)化率達(dá)到10%以上，在國(guó)內(nèi)開源領(lǐng)域相信這是一個(gè)夢(mèng)幻數(shù)字！也足以證明FineUI旺盛的生命力?。?。這一切的得來不是無(wú)緣無(wú)故的，而是來自于FineUI的發(fā)布理念 – Release Early! Release Often!
時(shí)至今天，F(xiàn)ineUI總共發(fā)布了 100 多個(gè)版本！
這 100 多個(gè)版本更新列表只是文本文件就有 120K 大小，放在頁(yè)面上更是長(zhǎng)的要命，如何恰當(dāng)?shù)南蛴脩粽故?FineUI 勤勞的身影就成了一個(gè)問題。之前的展示頁(yè)面只是簡(jiǎn)單的將所有的更新記錄放在一個(gè) PRE 標(biāo)簽中，顯得有點(diǎn)死氣沉沉，如下圖所示。
由于前段時(shí)間時(shí)間軸形式的展示方式比較火，就考慮采用這種方式。但是查閱了網(wǎng)上的jQuery timeline plugin，大部分都比較臃腫，還需要?jiǎng)?chuàng)建Google Spreadsheet Template，并且通過JavaScript調(diào)整時(shí)間軸中每個(gè)記錄的位置，也不適合軟件更新記錄這樣大數(shù)據(jù)集的展現(xiàn)。
其實(shí)我需要的只是一個(gè)簡(jiǎn)單、漂亮的數(shù)據(jù)展示方式，很快我找到了這個(gè)例子：http://tympanus.net/Blueprints/VerticalTimeline/
這個(gè)界面風(fēng)格給人眼前一亮的感覺。在快速瀏覽之后，我發(fā)現(xiàn)這里面用到了內(nèi)嵌字體和CSS3的諸多知識(shí)來生成哪些漂亮的圖片，所以在IE7、IE8下瀏覽會(huì)亂作一團(tuán)，如下圖所示：
沒關(guān)系，我們就用簡(jiǎn)單的圖片來代替，其實(shí)我最想要的就是左側(cè)的那個(gè)垂直直線和那個(gè)圓粑粑，網(wǎng)頁(yè)截圖，然后用PhotoShop做簡(jiǎn)單的處理，得到如下三張圖片。
1. 垂直線（10*7）
2. 淺色的圓粑粑（56*56）
3. 深色的圓粑粑（56*56）
兩個(gè)不同顏色的圓粑粑是為了讓列表看起來更靈動(dòng)一點(diǎn)。
俺的PhotoShop功底不咋地，你會(huì)發(fā)現(xiàn)那兩個(gè)圓粑粑不是透明背景，而是白色背景的，沒關(guān)系，只要我們使用精確的CSS定位，看不出破綻的，^_^
最終我們希望實(shí)現(xiàn)的效果如下圖所示。
其中圓粑粑中的數(shù)字表示軟件的第幾個(gè)版本，是不是看著比原來的好多了。
下面我們就動(dòng)手實(shí)現(xiàn)，純手工哦，用到的開發(fā)工具只有Notepad++（My favorite!）。
HTML結(jié)構(gòu)一定要保持簡(jiǎn)單，其實(shí)就是一個(gè)列表嘛，那就用 UL 標(biāo)簽實(shí)現(xiàn)。
1: <ul class="timeline">
2: <li>
3: <div class="time">時(shí)間</div>
4: <div class="version">版本號(hào)</div>
5: <div class="number">第幾個(gè)版本</div>
6: <div class="content">
7: <pre>
8: 更新記錄
9: </pre>
10: </div>
11: </li>
12: <ul>
初步的設(shè)想是content左邊留白，time/version/number全部浮動(dòng)起來，這樣方便定位。
特別是number的定位要準(zhǔn)確，否則圓粑粑和背景垂直線就重合不到一起了。這就要看CSS的了。
我們主要來看看如何對(duì)number的定位，完整的代碼在文章最后會(huì)給出。
1: ul.timeline {2: list-style-type: none;
3: background: url("../res/img/version_line.png") repeat-y scroll 120px 0 transparent;4: margin: 50px 0;
5: padding: 0;
6: }
7: ul.timeline li {8: position: relative;
9: margin-bottom: 20px;
10: }
11:
12: ul.timeline li .number {13: position: absolute;
14: background: url("../res/img/version_dot.png") no-repeat scroll 0 0 transparent;15: width: 56px;
16: height: 56px;
17: left: 97px;
18: line-height: 56px;
19: text-align: center;
20: color: #fff;
21: font-size: 18px;
22: }
首先，將垂直藍(lán)色的背景線放在最外層的 UL 標(biāo)簽上，距離左側(cè) 120px；
其次，設(shè)置 LI 為相對(duì)定位，為 LI 中元素的絕對(duì)定位做鋪墊；
最后，將number浮動(dòng)起來，主要是number的left屬性一定要精確！
如何計(jì)算 number 的 left 屬性那，大家看看如下的公式是否合你口味：
number.left = line.left + line.width/2 – number.width/2
= 120 + 10/2 – 56/2
= 97
剩下就是jQuery的任務(wù)了，我們需要使用jQuery完成如下兩點(diǎn)任務(wù)：
1. 動(dòng)態(tài)計(jì)算 number 的數(shù)字；
2. 為間隔行的 LI 節(jié)點(diǎn)添加 alt 類。
1: $(function() {2:
3: var liNodes = $('ul.timeline li'), count = liNodes.length, i, liNode; 4: for(i=0; i<count; i++) {5: liNode = $(liNodes.get(i));
6: if(i % 2 !== 0) { 7: liNode.addClass('alt');8: }
9: liNode.find('.number').text(count - i);10: }
11:
12: });
還有一項(xiàng)重要的任務(wù)，如何把 100 多條數(shù)據(jù)遷移到新的 HTML 結(jié)構(gòu)中去，沒人愿意手工去做，沒關(guān)系我們有好幫手 Notepad++。
查找目標(biāo)：\+(\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>
查找目標(biāo)用來匹配類似“+2013-07-29 v3.3.1”的字符串，一次搞定，是不是很舒服。
列表實(shí)在是太長(zhǎng)，這里只是 5% 不到的截圖！
本來文章就此結(jié)束了，可是吃完飯我就不滿意了，還有改進(jìn)的余地！
1. 一次展示 100 多個(gè)記錄，用戶也看不完，反而影響顯示效果，長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)的滾動(dòng)條；
2. 用戶關(guān)心的可能只是最近的幾次更新記錄，如果需要看更多的，提供一種方法即可！
基于以上考慮，我們可以將 100 多個(gè)記錄分成 20 個(gè)記錄一個(gè)文本文件保存起來，需要的時(shí)候通過 AJAX 獲取就行了。
頁(yè)面首次加載只需要前 10 條左右的記錄即可，在列表的最后添加一個(gè)大大的按鈕，如下圖所示。
最終的目錄結(jié)構(gòu)如下所示。
來體驗(yàn)一下最終的效果吧：
1: <style>
2: ul.timeline {3: list-style-type: none;
4: background: url("../res/img/version_line.png") repeat-y scroll 120px 0 transparent;5: margin: 50px 0;
6: padding: 0;
7: }
8:
9: ul.timeline li {10: position: relative;
11: margin-bottom: 20px;
12: }
13: ul.timeline li .time {14: position: absolute;
15: width: 90px;
16: text-align: right;
17: left: 0;
18: top: 10px;
19: color: #999;
20: }
21: ul.timeline li .version {22: position: absolute;
23: width: 290px;
24: text-align: right;
25: left: -200px;
26: top: 30px;
27: font-size: 40px;
28: line-height: 50px;
29: color: #3594cb;
30: overflow: hidden;
31: }
32: ul.timeline li .number {33: position: absolute;
34: background: url("../res/img/version_dot.png") no-repeat scroll 0 0 transparent;35: width: 56px;
36: height: 56px;
37: left: 97px;
38: line-height: 56px;
39: text-align: center;
40: color: #fff;
41: font-size: 18px;
42: }
43: ul.timeline li.alt .number { 44: background-image: url("../res/img/version_dot_alt.png");45: }
46: ul.timeline li .content {47: margin-left: 180px;
48:
49: }
50: ul.timeline li .content pre {51: background-color: #3594cb;
52: padding: 20px;
53: color: #fff;
54: font-size: 13px;
55: line-height: 20px;
56: }
57: ul.timeline li.alt .content pre {58: background-color: #43B1F1;
59: }
60: </style>
61: <ul class="timeline">
62: <li>
63: <div class="time">2013-07-29</div>
64: <div class="version">v3.3.1</div>
65: <div class="number"></div>
66: <div class="content">
67: <pre>
68: -將工具YUICompressor替換為Microsoft Ajax Minifier（需要指定-evals:immediate）。
69: ...
70: </pre>
71: </div>
72: </li>
73: ...
74: </ul>
75: <script>
76: $(function() {77:
78: var nextDataNumber = 5;
79:
80: var ulNode = $('ul.timeline');81:
82: function initLiNodes() { 83: var liNodes = ulNode.find('li'), count = liNodes.length, i, liNode, leftCount = nextDataNumber * 20; 84: for(i=0; i<count; i++) {85: liNode = $(liNodes.get(i));
86: if(i % 2 !== 0) { 87: liNode.addClass('alt'); 88: } else { 89: liNode.removeClass('alt');90: }
91: liNode.find('.number').text(leftCount + count - i);92: }
93: }
94:
95:
96: $('#fetchNextData').click(function() {97: var $this = $(this);
98: $this.addClass('disabled').text('......');99:
100: $.get('./version_data_' + nextDataNumber +'.txt', function(data) {101: ulNode.append(data);
102: $this.removeClass('disabled').text('后二十條數(shù)據(jù)');103: nextDataNumber--;
104:
105: if(nextDataNumber === 0) {106: $this.hide();
107: }
108:
109: initLiNodes();
110: });
111:
112: });
113:
114: initLiNodes();
115:
116: });
117: </script>
如何向用戶有效的展示 100 多條更新記錄，是個(gè)技術(shù)活。需要我們認(rèn)真思考，學(xué)以致用，用最簡(jiǎn)單的HTML、CSS、JQUERY來實(shí)現(xiàn)最好的用戶體驗(yàn)。
開源中國(guó)的網(wǎng)友 混世頑童 提到是否可以在滾動(dòng)條到達(dá)底部時(shí)自動(dòng)加載后20條數(shù)據(jù)，這個(gè)也很容易實(shí)現(xiàn)，更新后的JavaScript代碼如下所示。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | $(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('正在加載后二十條數(shù)據(jù)...'); ajaxLoading = true; $.get('./version_data_' + nextDataNumber +'.txt', function(data) { ajaxLoading = false; ulNode.append(data); $this.removeClass('disabled').text('后二十條數(shù)據(jù)'); nextDataNumber--; if(nextDataNumber === 0) { $this.hide(); } initLiNodes(); }); }); initLiNodes(); docNode.scroll(function() { if(docNode.height() - $(window).height() - docNode.scrollTop() < 10) { if(!ajaxLoading) { $('#fetchNextData').click(); } } }); }); |
喜歡這篇文章，請(qǐng)幫忙點(diǎn)擊頁(yè)面右下角的【推薦】按鈕。
聯(lián)系客服
