|
前言FineUI控件庫(kù)發(fā)展至今已經(jīng)有 5 個(gè)年頭，目前論壇注冊(cè)的QQ會(huì)員 5000 多人，捐贈(zèng)用戶(hù) 500 多人（捐贈(zèng)用戶(hù)轉(zhuǎn)化率達(dá)到10%以上，在國(guó)內(nèi)開(kāi)源領(lǐng)域相信這是一個(gè)夢(mèng)幻數(shù)字！也足以證明FineUI旺盛的生命力?。?。這一切的得來(lái)不是無(wú)緣無(wú)故的，而是來(lái)自于FineUI的發(fā)布理念 – Release Early! Release Often! 時(shí)至今天，F(xiàn)ineUI總共發(fā)布了 100 多個(gè)版本！ 這 100 多個(gè)版本更新列表只是文本文件就有 120K 大小，放在頁(yè)面上更是長(zhǎng)的要命，如何恰當(dāng)?shù)南蛴脩?hù)展示 FineUI 勤勞的身影就成了一個(gè)問(wèn)題。之前的展示頁(yè)面只是簡(jiǎn)單的將所有的更新記錄放在一個(gè) PRE 標(biāo)簽中，顯得有點(diǎn)死氣沉沉，如下圖所示。
站在巨人的肩膀上由于前段時(shí)間時(shí)間軸形式的展示方式比較火，就考慮采用這種方式。但是查閱了網(wǎng)上的jQuery timeline plugin，大部分都比較臃腫，還需要?jiǎng)?chuàng)建Google Spreadsheet Template，并且通過(guò)JavaScript調(diào)整時(shí)間軸中每個(gè)記錄的位置，也不適合軟件更新記錄這樣大數(shù)據(jù)集的展現(xiàn)。 其實(shí)我需要的只是一個(gè)簡(jiǎn)單、漂亮的數(shù)據(jù)展示方式，很快我找到了這個(gè)例子：http:///Blueprints/VerticalTimeline/
這個(gè)界面風(fēng)格給人眼前一亮的感覺(jué)。在快速瀏覽之后，我發(fā)現(xiàn)這里面用到了內(nèi)嵌字體和CSS3的諸多知識(shí)來(lái)生成哪些漂亮的圖片，所以在IE7、IE8下瀏覽會(huì)亂作一團(tuán)，如下圖所示：
沒(méi)關(guān)系，我們就用簡(jiǎn)單的圖片來(lái)代替，其實(shí)我最想要的就是左側(cè)的那個(gè)垂直直線和那個(gè)圓粑粑，網(wǎng)頁(yè)截圖，然后用PhotoShop做簡(jiǎn)單的處理，得到如下三張圖片。 1. 垂直線（10*7）
2. 淺色的圓粑粑（56*56）
3. 深色的圓粑粑（56*56）
兩個(gè)不同顏色的圓粑粑是為了讓列表看起來(lái)更靈動(dòng)一點(diǎn)。
俺的PhotoShop功底不咋地，你會(huì)發(fā)現(xiàn)那兩個(gè)圓粑粑不是透明背景，而是白色背景的，沒(méi)關(guān)系，只要我們使用精確的CSS定位，看不出破綻的，^_^
最終我們希望實(shí)現(xiàn)的效果如下圖所示。
其中圓粑粑中的數(shù)字表示軟件的第幾個(gè)版本，是不是看著比原來(lái)的好多了。
下面我們就動(dòng)手實(shí)現(xiàn)，純手工哦，用到的開(kāi)發(fā)工具只有Notepad++（My favorite!）。
最簡(jiǎn)單的HTML結(jié)構(gòu)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)起來(lái)，這樣方便定位。 特別是number的定位要準(zhǔn)確，否則圓粑粑和背景垂直線就重合不到一起了。這就要看CSS的了。
最簡(jiǎn)單的CSS我們主要來(lái)看看如何對(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)起來(lái)，主要是number的left屬性一定要精確！
如何計(jì)算 number 的 left 屬性那，大家看看如下的公式是否合你口味： number.left = line.left + line.width/2 – number.width/2 = 120 + 10/2 – 56/2 = 97
最簡(jiǎn)單的JQUERY剩下就是jQuery的任務(wù)了，我們需要使用jQuery完成如下兩點(diǎn)任務(wù)： 1. 動(dòng)態(tài)計(jì)算 number 的數(shù)字； 2. 為間隔行的 LI 節(jié)點(diǎn)添加 alt 類(lèi)。 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: });
最簡(jiǎn)單的數(shù)據(jù)遷移（正則表達(dá)式替換）還有一項(xiàng)重要的任務(wù)，如何把 100 多條數(shù)據(jù)遷移到新的 HTML 結(jié)構(gòu)中去，沒(méi)人愿意手工去做，沒(méi)關(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)用來(lái)匹配類(lèi)似“+2013-07-29 v3.3.1”的字符串，一次搞定，是不是很舒服。
完成效果
列表實(shí)在是太長(zhǎng)，這里只是 5% 不到的截圖！
優(yōu)化！將頁(yè)面大小由150K減少為20K本來(lái)文章就此結(jié)束了，可是吃完飯我就不滿(mǎn)意了，還有改進(jìn)的余地！ 1. 一次展示 100 多個(gè)記錄，用戶(hù)也看不完，反而影響顯示效果，長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)的滾動(dòng)條； 2. 用戶(hù)關(guān)心的可能只是最近的幾次更新記錄，如果需要看更多的，提供一種方法即可！
基于以上考慮，我們可以將 100 多個(gè)記錄分成 20 個(gè)記錄一個(gè)文本文件保存起來(lái)，需要的時(shí)候通過(guò) AJAX 獲取就行了。 頁(yè)面首次加載只需要前 10 條左右的記錄即可，在列表的最后添加一個(gè)大大的按鈕，如下圖所示。
最終的目錄結(jié)構(gòu)如下所示。
來(lái)體驗(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>
小結(jié)如何向用戶(hù)有效的展示 100 多條更新記錄，是個(gè)技術(shù)活。需要我們認(rèn)真思考，學(xué)以致用，用最簡(jiǎn)單的HTML、CSS、JQUERY來(lái)實(shí)現(xiàn)最好的用戶(hù)體驗(yàn)。
后記開(kāi)源中國(guó)的網(wǎng)友 混世頑童 提到是否可以在滾動(dòng)條到達(dá)底部時(shí)自動(dòng)加載后20條數(shù)據(jù)，這個(gè)也很容易實(shí)現(xiàn)，更新后的JavaScript代碼如下所示。
喜歡這篇文章，請(qǐng)幫忙點(diǎn)擊頁(yè)面右下角的【推薦】按鈕。 |
|
|
來(lái)自： WindySky > 《前端技術(shù)》
