jQuery时间轴插件使用详解_jquery-jsチュートリアル-php.cn

这个时间轴是工作上用到的，自己写了一个， 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拖放文件进来

ログイン後にコピー

　　插件效果图：

　　最后完成的插件代码：