jQuery时间轴插件使用详解

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

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

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

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

 　　模板用了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  : /<%([\s\S]+?)%>/g,
          interpolate : /<%=([\s\S]+?)%>/g,
          escape   : /<%-([\s\S]+?)%>/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()， 看代码撒：

运行下面代码

  
  
  



请把图片拖放到矩形中：









　　另外一个DEMO：

运行下面代码




  
  


  
What fruits do you like?
  

    
Apples
    
Oranges
    
Pears
  
  

  
Drop your favorite fruits below:
  

    
    
drop
  
  

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

  
  


  

    drop拖放文件进来
  
  

　　插件效果图：

　　最后完成的插件代码：

  
    
    
  
  

  
  

  
    
    


      
      

        


          
          

            
            
              
            
            
              
            
            
              文档类型
            
          

          

            
            
              
            
            
              
            
            
              视频类型
            
          


          

            
            
              
            
            
              
            
            
              单元测试
            
          

          
          
            
          
          
            
          
          
            音频类型
          
        

          

            
            
              
            
            
              
            
          
            图片类型
          
          

          

            
            
              
            
            
              
            
            
              文档类型
            
          

          

            
            
              
            
            
              
            
            
              视频类型
            
          


          

            
            
              
            
            
              
            
            
              单元测试
            
          

          
          
            
          
          
            
          
          
            音频类型
          
        

          

            
            
              
            
            
              
            
            
              图片类型
            
          

          

            
            
              
            
            
              
            
            
              文档类型
            
          

          

            
            
              
            
            
              
            
            
              视频类型
            
          


          

            
            
              
            
            
              
            
            
              单元测试
            
          

          
          
            
          
          
            
          
          
            音频类型
          
        

          

            
            
              
            
            
              
            
            
              图片类型
            
          

          

            
            
              
            
            
              
            
            
              文档类型
            
          

          

            
            
              
            
            
              
            
            
              视频类型
            
          


          

            
            
              
            
            
              
            
            
              单元测试
            
          

            
            
              
            
            
              
            
            
              音频类型
            
          

          

            
            
              
            
            
              
            
            
              图片类型
            
          

          

            
            
              
            
            
              
            
            
              文档类型
            
          

          

            
            
              
            
            
              
            
            
              视频类型
            
          


          

        
      
      
    
    
  

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