純手工打造漂亮的垂直時間軸，使用最簡單的HTML+CSS+JQUERY完成100個版本更新記錄的華麗轉(zhuǎn)身！

WindySky 2017-01-12

展開全文

前言

FineUI控件庫發(fā)展至今已經(jīng)有 5 個年頭，目前論壇注冊的QQ會員 5000 多人，捐贈用戶 500 多人（捐贈用戶轉(zhuǎn)化率達到10%以上，在國內(nèi)開源領(lǐng)域相信這是一個夢幻數(shù)字！也足以證明FineUI旺盛的生命力?。＿@一切的得來不是無緣無故的，而是來自于FineUI的發(fā)布理念 – Release Early! Release Often!

時至今天，F(xiàn)ineUI總共發(fā)布了 100 多個版本！

這 100 多個版本更新列表只是文本文件就有 120K 大小，放在頁面上更是長的要命，如何恰當?shù)南蛴脩粽故?FineUI 勤勞的身影就成了一個問題。之前的展示頁面只是簡單的將所有的更新記錄放在一個 PRE 標簽中，顯得有點死氣沉沉，如下圖所示。

站在巨人的肩膀上

由于前段時間時間軸形式的展示方式比較火，就考慮采用這種方式。但是查閱了網(wǎng)上的jQuery timeline plugin，大部分都比較臃腫，還需要創(chuàng)建Google Spreadsheet Template，并且通過JavaScript調(diào)整時間軸中每個記錄的位置，也不適合軟件更新記錄這樣大數(shù)據(jù)集的展現(xiàn)。

其實我需要的只是一個簡單、漂亮的數(shù)據(jù)展示方式，很快我找到了這個例子：http:///Blueprints/VerticalTimeline/

這個界面風(fēng)格給人眼前一亮的感覺。在快速瀏覽之后，我發(fā)現(xiàn)這里面用到了內(nèi)嵌字體和CSS3的諸多知識來生成哪些漂亮的圖片，所以在IE7、IE8下瀏覽會亂作一團，如下圖所示：

沒關(guān)系，我們就用簡單的圖片來代替，其實我最想要的就是左側(cè)的那個垂直直線和那個圓粑粑，網(wǎng)頁截圖，然后用PhotoShop做簡單的處理，得到如下三張圖片。

1. 垂直線（10*7）

2. 淺色的圓粑粑（56*56）

3. 深色的圓粑粑（56*56）

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

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

最終我們希望實現(xiàn)的效果如下圖所示。

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

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

最簡單的HTML結(jié)構(gòu)

HTML結(jié)構(gòu)一定要保持簡單，其實就是一個列表嘛，那就用 UL 標簽實現(xiàn)。

   1:  <ul class="timeline">

   2:      <li>

   3:          <div class="time">時間</div>

   4:          <div class="version">版本號</div>

   5:          <div class="number">第幾個版本</div>

   6:          <div class="content">

   7:              <pre>

   8:                  更新記錄

   9:              </pre>

  10:          </div>

  11:      </li>

  12:  <ul>

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

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

最簡單的CSS

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

   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:  }

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

其次，設(shè)置 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的任務(wù)了，我們需要使用jQuery完成如下兩點任務(wù)：

1. 動態(tài)計算 number 的數(shù)字；

2. 為間隔行的 LI 節(jié)點添加 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:  });

最簡單的數(shù)據(jù)遷移（正則表達式替換）

還有一項重要的任務(wù)，如何把 100 多條數(shù)據(jù)遷移到新的 HTML 結(jié)構(gòu)中去，沒人愿意手工去做，沒關(guān)系我們有好幫手 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>

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

完成效果

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

優(yōu)化！將頁面大小由150K減少為20K

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

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

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

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

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

最終的目錄結(jié)構(gòu)如下所示。

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

http:///version

全部源代碼

   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é)

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

后記

開源中國的網(wǎng)友混世頑童提到是否可以在滾動條到達底部時自動加載后20條數(shù)據(jù)，這個也很容易實現(xiàn)，更新后的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('正在加載后二十條數(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();

}

});

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

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻花（0） +1

來自： WindySky > 《前端技術(shù)》

舉報/認領(lǐng)

0條評論

發(fā)表

請遵守用戶評論公約

類似文章 更多

WindySky

關(guān)注對話

TA的最新館藏

[轉(zhuǎn)] 盤點 2014 電影營銷大戰(zhàn)經(jīng)典案例
SpringCloud+Docker+Jenkins+GitLab+Maven實現(xiàn)自動化構(gòu)建與部署實戰(zhàn)
[轉(zhuǎn)] Android通過JUV+Red5+Speex實現(xiàn)網(wǎng)絡(luò)語音聊天(一)
[轉(zhuǎn)] Nginx常見錯誤與解決方法
[轉(zhuǎn)] 基于前后端分離的身份認證方式
[轉(zhuǎn)] SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問題(一)

喜歡該文的人也喜歡更多

熱門閱讀換一換

乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

純手工打造漂亮的垂直時間軸，使用最簡單的HTML+CSS+JQUERY完成100個版本更新記錄的華麗轉(zhuǎn)身！

前言