Flot与Zepto结合使用

是否可以将Zepto与Flot结合使用？Flot与Zepto结合使用

我知道海军报工作正常使用jQuery（测试），但只的Zepto感觉速度更快，更流畅，比jQuery的移动设备上的

2016-09-03 Alexander

我试了一下，跑进两个问题。首先，flot寻找被定义的jQuery，而第二，flot使用outerWidth，其中zepto不是replicate。

所以，让我们给它一点爱和解决这些问题：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script> 
 
    </script> 
 
    <!-- Load Zepto --> 
 
    <script data-require="[email protected]" data-semver="1.1.4" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script> 
 
    <!-- patch in the things we need --> 
 
    <script> 
 
    // define jquery 
 
    jQuery = $; 
 
    // create outerWidth/Height functions 
 
    // stolen from here: https://gist.github.com/pamelafox/1379704 
 
    ['width', 'height'].forEach(function(dimension) { 
 
     var offset, Dimension = dimension.replace(/./, function(m) { 
 
     return m[0].toUpperCase() 
 
     }); 
 
     $.fn['outer' + Dimension] = function(margin) { 
 
     var elem = this; 
 
     if (elem) { 
 
      var size = elem[dimension](); 
 
      var sides = { 
 
      'width': ['left', 'right'], 
 
      'height': ['top', 'bottom'] 
 
      }; 
 
      sides[dimension].forEach(function(side) { 
 
      if (margin) size += parseInt(elem.css('margin-' + side), 10); 
 
      }); 
 
      return size; 
 
     } else { 
 
      return null; 
 
     } 
 
     }; 
 
    }); 
 
    </script> 
 
    <!-- now we can include flot --> 
 
    <script data-require="[email protected]" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="placeholder" style="width:300px;height:300px"></div> 
 
    <script> 
 
    $(function() { 
 

 
     var d1 = []; 
 
     for (var i = 0; i < 14; i += 0.5) { 
 
     d1.push([i, Math.sin(i)]); 
 
     } 
 

 
     var d2 = [ 
 
     [0, 3], 
 
     [4, 8], 
 
     [8, 5], 
 
     [9, 13] 
 
     ]; 
 

 
     // A null signifies separate line segments 
 
     var d3 = [ 
 
     [0, 12], 
 
     [7, 12], null, [7, 2.5], 
 
     [12, 2.5] 
 
     ]; 
 

 
     $.plot("#placeholder", [d1, d2, d3]); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

来源

2016-09-04 17:27:20 Mark

Flot与Zepto结合使用

回答

相关问题