3

我想知道 JQM 和 Flot 之间是否存在兼容性问题。我一直在寻找有关此的文档，但没有很多...

这是问题所在：根据我加载库的顺序，事情可以正常工作，而其他人则不能：

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<div id="placeholder" style="width: 60%;height:40%"></div>

--> 此处未显示图表：“未捕获的绘图尺寸无效，宽度 = 671，高度 = 0”

现在，如果我删除 JQM：

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<div id="placeholder" style="width: 60%;height:40%"></div>

--> 这里显示了图表并且调整大小有效，所以我猜这个问题来自 JQM 但我不知道是什么......

我试图以不同的顺序加载东西，但没有任何帮助。

有人知道解决方法吗？

这是完整的代码：

<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
    <script src="js/jquery.flot.js"></script>
    <script src="js/jquery.flot.resize.js"></script>
    <style type="text/css">
    html, body {
        height: 100%; /* make the percentage height on placeholder work */
    }
    .message {
        padding-left: 50px;
        font-size: smaller;
    }
    </style>
</head>
<body> 

<h1>Flot test</h1>
<div id="placeholder" style="width: 60%;height:40%; text-align: center; margin:0 auto;"/>

<script type="text/javascript">

$(function () {

    var c1_values = [[0, 0],[1, 1],[2, 4],[3, 9],[4, 16],[5, 25],[6, 36],[7, 49],[8, 64],[9, 81],[10, 100],[11, 121],[12, 144],[13, 169],[14, 196],[15, 225],[16, 256],[17, 289],[18, 324],[19, 361]];

    var c1_data = [{ data: c1_values, label: "curve1"}];

    $.plot($("#placeholder"), [
        {
            data: c1_values,
            lines: { show: true, fill: false }
        }
    ]);
});

</script>

</body>
</html>

我目前正在尝试这种“无冲突”功能，但目前没有结果。

4

1 回答 1

3

page如果您自己不包含，jQuery Mobile 会自动将您的所有内容包装在 a中。一般来说，这意味着你应该在你的代码中自己做！因此，第一步是将占位符移动到 jQM 模板中：

<div data-role="page">
  <div data-role="header">
        <h1>Flot test</h1>
  </div>
  <!-- /header -->
  <div data-role="content">
    <div id="placeholder" style="width: 60%;height:40%; text-align: center; margin:0 auto;"
    /></div>
  <!-- /content -->
</div>
<!-- /page -->

content现在， div 没有拉伸以填充整个可用垂直空间似乎是一个常见问题。我找到了两种解决方案，似乎都不是很理想。

  1. 使用 CSS 尝试使contentdiv 全高（注意，它data-role"content"变成了 的 CSS 类ui-content）：

    .ui-content { 高度：100%; 宽度：100%；位置：绝对；}

  2. 使用 Javascript 在您进行时动态地修复内容高度（在您的 flot 调用之前执行此操作）。取自这里：

    var fixgeometry = function () { /* 一些方向变化使滚动位置在某处

    • 这不是 0,0。这对于用户体验来说很烦人。*/ 滚动(0, 0);

      /* 计算我们的内容区域应该采用的几何图形 */ var header = $(".ui-header:visible"); var footer = $(".ui-footer:visible"); var 内容 = $(".ui-content:visible"); var viewport_height = $(window).height();

      var content_height = viewport_height - header.outerHeight() - footer.outerHeight();

      /* 修剪边距/边框/填充高度 */ content_height -= (content.outerHeight() - content.height()); 内容高度（内容高度）；}; /* 固定几何 */

    $(window).bind("orientationchange resize pageshow", fixgeometry);

这些解决方案对我来说似乎都不是特别好，尽管它们在显示图表方面都“有效”。

我在这里发布了第二个版本的示例：http: //alpha.jsfiddle.net/ryleyb/mz24P/

CSS 也在那里，如果您想尝试，请注释掉。

于 2013-01-03T16:56:02.237 回答