很久没写博客了,终于有点时间来分享点东西。
最近在做一个移动设备上的产品,之中用到图表,在移动设备上用的,所以要尽量小巧,还要做触摸支持。
我们选用了jqflot然后我自己写了触摸支持,下面贴出触摸支持的代码及使用方法。
源码如下:
/* jquery.flot.touch.js * flot触摸支持插件 * 作者: 骆扬 * 创建时间: 2012.03.28 */ (function ($) { var options = {}; function init(plot) { var prevCursor = 'default', prevPageX = 0, prevPageY = 0, panTimeout = null, dragGap = 3000, dragTimeout = null, drawing = null; //drawing修复拖动显示紊乱的问题 var placehoder = plot.getPlaceholder(); function onTouchStart(e) { // 超过3秒的按下状态才算拖动 dragTimeout = setTimeout(function () { dragTimeout = null; }, dragGap); if (e.originalEvent.touches.length == 1) { var c = placehoder.css('cursor'); if (c) prevCursor = c; placehoder.css('cursor', plot.getOptions().pan.cursor); var touch = e.originalEvent.touches[0]; prevPageX = touch.clientX; prevPageY = touch.clientY; } } function onTouchMove(e) { e.preventDefault(); var frameRate = plot.getOptions().pan.frameRate; if (panTimeout || !frameRate) return; if (e.originalEvent.touches.length == 1) { var touch = e.originalEvent.touches[0]; panTimeout = setTimeout(function () { if (!drawing) { drawing = true; plot.pan({ left: prevPageX - touch.clientX, top: prevPageY - touch.clientY }); drawing = null; } prevPageX = touch.clientX; prevPageY = touch.clientY; panTimeout = null; }, 1 / frameRate * 1000); } else { onTouchEnd(e); } } function onTouchEnd(e) { if (!dragTimeout) { e.preventDefault(); } else { clearTimeout(dragTimeout); panTimeout = null; } if (e.originalEvent.touches.length == 1) { var touch = e.originalEvent.touches[0]; if (panTimeout) { clearTimeout(panTimeout); panTimeout = null; } placehoder.css('cursor', prevCursor); // plot.pan({ left: prevPageX - touch.clientX, // top: prevPageY - touch.clientY // }); if (!drawing) { drawing = true; plot.pan({ left: prevPageX - touch.clientX, top: prevPageY - touch.clientY }); drawing = null; } } } function bindEvents(plot) { placehoder.bind("touchstart", onTouchStart); placehoder.bind("touchmove", onTouchMove); placehoder.bind("touchend", onTouchEnd); } function shutdown(plot, eventHolder) { placehoder.unbind('touchstart'); placehoder.unbind('touchmove'); placehoder.unbind('touchend'); if (panTimeout) clearTimeout(panTimeout); } plot.hooks.bindEvents.push(bindEvents); plot.hooks.shutdown.push(shutdown); }; $.plot.plugins.push({ init: init, options: options, name: 'touch', version: '1.0' }); })(jQuery);
使用方法:
将上面代码命名为jquery.flot.touch.js
按照上面的顺序引入就OK,不需要其他代码,自动支持触摸滑动。