jQuery mobile / Flot / resize.js答案

【问题标题】：jQuery mobile / Flot / resize.jsjQuery mobile / Flot / resize.js
【发布时间】：2013-01-02 21:56:49
【问题描述】：

我想知道 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>

--> 这里图表不显示：“Uncaught Invalid dimensions for plot, width = 671, height = 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>

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

【问题讨论】：

你尝试过使用 jQuery.noConflict() 吗？更多相关信息，请点击此处docs.jquery.com/Using_jQuery_with_Other_Libraries
请在您实际显示图表的位置显示代码。
刚刚测试了“无冲突”，这是一个很好的尝试，但问题仍然存在......感谢您的想法。此外，我已将完整代码添加到原始帖子中。

标签： javascript jquery jquery-mobile flot

【解决方案1】：

如果您自己不包含，jQuery Mobile 会自动将您的所有内容包装在 page 中。一般来说，这意味着你应该在你的代码中自己做！因此，第一步是将占位符移动到 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 无法拉伸以填充整个可用垂直空间似乎是一个常见问题。我找到了两种解决方案，似乎都不是很理想。

使用 CSS 尝试将 content div 设为全高（注意 data-role"content" 变为 ui-content 的 CSS 类）：

.ui-内容{ 高度：100%；宽度：100%；位置：绝对； }
使用 Javascript 在您进行过程中动态地修复内容高度（在您的 flot 调用之前执行此操作）。取自here：

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 也在那里，如果您想尝试，请注释掉。

【讨论】：

正是我想要的，我会保留这两种解决方案，看看在大多数情况下哪个更好。非常感谢，太好了！