jQuery时间轴插件使用详解

这个时间轴是工作上用到的，自己写了一个， qq空间有时间轴的控件，百度文库也有时间轴的控件；

　　百度的时间轴大概是这样的：

　　用户点击对应的锚链接，那个三角会滚动，然后左侧的界面也会滚动；

　　实际的效果如下图，用户点击左侧的按钮或者右侧的input，滚动条都会主动滚动，这里有个小技巧就是用after和before伪类生成三角形，用户点击按钮的滚动效果直接用jq的animate方法：




  
    
    
  
  
    
    *{
      margin:0;
      padding:0;
    }
    .time-line-wrap{
      position: relative;
      width: 400px;
      margin:0 auto;
    }
    ul{
      list-style: none;
    }
    body,html{
      height: 100%;
    }
    body{
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }


    
    .scroll-time-line{
      height:100%;
      overflow: hidden;
    }
    .time-line-wrap{
      position: relative;
    }
    .time-line-ul{
      position: relative;
    }
    
    .time-line-ul::before{
      display: block;
      position:absolute;
      content:"";
      height:100%;
      width:1;
      left:27px;
      top:0;
      background: #eee;
    }
    .time-line-ul li{
      padding:14px;
      position: relative;
    }
    .time-line-ul input {
      vertical-align: super;
      border-radius: 4px;
      border:1px solid #eee;
      padding:4px;
      line-height: 22px;
      margin-left:10px;
    }
    
    .time-line-ul li::before{
      position: absolute;
      content: "";
      display: block;
      top: 21px;
      left: 40px;
      width: 0px;
      height: 0px;
      border: 10px solid rgba(0, 0, 0, 0);
      border-right: 10px solid #EEE;
    }
    .time-line-ul li::after{
      position: absolute;
      content: "";
      display: block;
      top: 21px;
      left: 41px;
      width: 0px;
      height: 0px;
      border: 10px solid rgba(0, 0, 0, 0);
      border-right: 10px solid #fff;
    }
    
    .time-line-icon{
      width: 26px;
      height: 28px;
      display: inline-block;
      background: url(http://images0.cnblogs.com/blog2015/497865/201507/131424386411828.png);
    }
    
    .time-line-icon.active,.time-line-icon:hover{
      background-position: 0px 28px;
    }

　　模板用了underscore，tempate方法挂到了$下，作为$的工具方法（依赖于jQuery），模板的js代码直接放这里方便一些小项目直接用：

      //模板引擎的代码
      (function () {
 //underscore抄的模板引擎;
 var escaper = /\|'|r|n|t|u2028|u2029/g;

 var escapes = {
   "'":   "'",
   '\':   '\',
   'r':   'r',
   'n':   'n',
   't':   't',
   'u2028': 'u2028',
   'u2029': 'u2029'
 };

 $.templateSettings = {
   evaluate  : /<%([sS]+?)%>/g,
   interpolate : /<%=([sS]+?)%>/g,
   escape   : /<%-([sS]+?)%>/g
 }
 $.template = function(text, data, settings) {
   var render;
   settings = $.extend({}, settings, $.templateSettings);

   // Combine delimiters into one regular expression via alternation.
   var matcher = new RegExp([
     (settings.escape || noMatch).source,
     (settings.interpolate || noMatch).source,
     (settings.evaluate || noMatch).source
   ].join('|') + '|$', 'g');

   // Compile the template source, escaping string literals appropriately.
   var index = 0;
   var source = "__p+='";
   text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
     source += text.slice(index, offset)
  .replace(escaper, function(match) { return '\' + escapes[match]; });

     if (escape) {
source += "'+n((__t=(" + escape + "))==null?'':_.escape(__t))+n'";
     }
     if (interpolate) {
source += "'+n((__t=(" + interpolate + "))==null?'':__t)+n'";
     }
     if (evaluate) {
source += "';n" + evaluate + "n__p+='";
     }
     index = offset + match.length;
     return match;
   });
   source += "';n";

   // If a variable is not specified, place data values in local scope.
   if (!settings.variable) source = 'with(obj||{}){n' + source + '}n';

   source = "var __t,__p='',__j=Array.prototype.join," +
"print=function(){__p+=__j.call(arguments,'');};n" +
source + "return __p;n";

   try {
     render = new Function(settings.variable || 'obj', '_', source);
   } catch (e) {
     e.source = source;
     throw e;
   }

   if (data) return render(data, _);
   var template = function(data) {
     return render.call(this, data);
   };

   // Provide the compiled function source as a convenience for precompilation.
   template.source = 'function(' + (settings.variable || 'obj') + '){n' + source + '}';

   return template;
 };
      })();

　　模板的使用的DEMO如下, 也可以参考官方的文档：http://underscorejs.org/#template：

　　修改了时间轴的样式，又为这个插件添加了拖拽的方法，代码一下变得好乱，顺便普及一下拖拽的事件， ondrop， ondragover，ondrag，如果要让元素可以拖拽, 就要为要拖拽的元素添加draggable="true", 元素可以拖拽以后，要为可以拖放到的的DIV或者其他块元素，绑定一个dragover方法，这个方法就做一件事， ev.preventDefault()，看代码撒：

运行下面代码




  
  
    #div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
  
  



请把图片拖放到矩形中：









　　另外一个DEMO：

运行下面代码




  
  
  


  What fruits do you like?
  
    Apples
    Oranges
    Pears
  
  

  Drop your favorite fruits below:
  
    
    drop

　　HTML5的拖拽提供了 setDragImage ， effectAllowed ， setData.... 等很多便捷的方法给开发者, 通过FileReader读取File，然后就可以用ajax与后台进行交互，和前端DOM操作：




  
  
  


  
    drop拖放文件进来

　　插件效果图：

　　最后完成的插件代码：




  
    
    
  
  
    
    *{
      margin:0;
      padding:0;
    }
    .time-line-wrap{
      position: relative;
      width: 400px;
      margin:0 auto;
    }
    ul{
      list-style: none;
    }
    body,html{
      height: 100%;
    }
    body{
      background:#303030;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }


    
    .scroll-time-line{
      height:100%;
      overflow: hidden;
    }
    .time-line-wrap{
      position: relative;
    }
    .time-line-wrap::before{
      display: block;
      content: "";
      position: absolute;
      border: 2px solid #616161;
      width: 7px;
      background: #303030;
      height: 7px;
      z-index: 2;
      border-radius: 100%;
      left: 12px;
      top: 0;
    }
    .time-line-wrap::after{
      display: block;
      content: "";
      position: absolute;
      border: 2px solid #616161;
      width: 7px;
      background: #303030;
      height: 7px;
      z-index: 2;
      border-radius: 100%;
      left: 12px;
      bottom:0;
    }
    .time-line-ul{
      position: relative;
    }
    
    .time-line-ul::before{
      display: block;
      position:absolute;
      content:"";
      height:100%;
      width:1px;
      left:17px;
      top:0;
      background: #616161;
    }

    .time-line-ul li{
      padding: 14px;
      position: relative;
      color: #FFF;
      height: 26px;
    }
    .time-line-ul li>* {
      vertical-align: middle;
      display: inline-block;
    }

    
    .time-line-ul li b{
      width: 32px;
      height: 32px;
    }
    .time-line-ul li b.active{
      display: none;
    }
    .time-line-ul li:hover b{
      display: none;
    }
    .time-line-ul li:hover .active{
      display: inline-block;
    }
    
    .time-line-ul li b.show{
      display: none;
    }
    .time-line-ul li b.active.show{
      display: inline-block;
    }
    

    .time-line-ul li span{
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      width: 100px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    
    .over{
      opacity: 0.4;
    }
    
    .blank{
      display: block;
      height:50px;
      line-height: 50px;
    }

    
    .time-line-icon{
      width: 7px;
      height: 7px;
      display: inline-block;
      background: #616161;
      border-radius: 100%;
    }
    
    .time-line-icon.active,.time-line-icon:hover{
      background: #fff;
    }
  

  
  

  
    
    

      
      
 

   
   
     
     

     
     

     
     
文档类型
     
   

   
     
     

     
     

     
     
视频类型
     
   


   
     
     

     
     

     
     
单元测试
     
   

   
   
     
   
   
     
   
   
     音频类型
   
 

   
     
     

     
     

     
   
     图片类型
   
   

   
     
     

     
     

     
     
文档类型
     
   

   
     
     

     
     

     
     
视频类型
     
   


   
     
     

     
     

     
     
单元测试
     
   

   
   
     
   
   
     
   
   
     音频类型
   
 

   
     
     

     
     

     
     
图片类型
     
   

   
     
     

     
     

     
     
文档类型
     
   

   
     
     

     
     

     
     
视频类型
     
   


   
     
     

     
     

     
     
单元测试
     
   

   
   
     
   
   
     
   
   
     音频类型
   
 

   
     
     

     
     

     
     
图片类型
     
   

   
     
     

     
     

     
     
文档类型
     
   

   
     
     

     
     

     
     
视频类型
     
   


   
     
     

     
     

     
     
单元测试
     
   

     
     

     
     

     
     
音频类型
     
   

   
     
     

     
     

     
     
图片类型
     
   

   
     
     

     
     

     
     
文档类型
     
   

   
     
     

     
     

     
     
视频类型

以上所述就是本文的全部内容了，希望大家能够喜欢。

jQuery时间轴插件使用详解

JavaScript相关栏目本月热门文章