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

 
     
   查找目标用来匹配类似“+2013-07-29 v3.3.1”的字符串，一次搞定，是不是很舒服。 
     
   完成效果 
    
   列表实在是太长，这里只是 5% 不到的截图！ 
     
   优化！将页面大小由150K减少为20K 
   本来文章就此结束了，可是吃完饭我就不满意了，还有改进的余地！ 
   1. 一次展示 100 多个记录，用户也看不完，反而影响显示效果，长长长长长长长长长的滚动条； 
   2. 用户关心的可能只是最近的几次更新记录，如果需要看更多的，提供一种方法即可！ 
     
   基于以上考虑，我们可以将 100 多个记录分成 20 个记录一个文本文件保存起来，需要的时候通过 AJAX 获取就行了。 
   页面首次加载只需要前 10 条左右的记录即可，在列表的最后添加一个大大的按钮，如下图所示。 
    
     
   最终的目录结构如下所示。 
    
     
   来体验一下最终的效果吧： 
   http://fineui.com/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-29div> 
      64:          <div class="version">v3.3.1div> 
      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 
      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('后二十条数据'); 
     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 多条更新记录，是个技术活。需要我们认真思考，学以致用，用最简单的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
 
   
 
   　　 
     
   喜欢这篇文章，请帮忙点击页面右下角的【推荐】按钮。
纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！...

前言

站在巨人的肩膀上

最简单的HTML结构

最简单的CSS

最简单的JQUERY

最简单的数据迁移（正则表达式替换）

完成效果

优化！将页面大小由150K减少为20K

全部源代码

小结

后记

你可能感兴趣的:(javascript,photoshop,开发工具,ViewUI)
