jquerymobile图表插件支持

很久没写博客了，终于有点时间来分享点东西。

最近在做一个移动设备上的产品，之中用到图表，在移动设备上用的，所以要尽量小巧，还要做触摸支持。

我们选用了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);

使用方法：

jquerymobile图表插件支持

将上面代码命名为jquery.flot.touch.js

按照上面的顺序引入就OK，不需要其他代码，自动支持触摸滑动。

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

我的应用，欢迎下载试玩：https://itunes.apple.com/cn/app/you-gou-yi-pin/id1109299811?l=en&mt=8

秒客网

jquerymobile图表插件支持

相关文章