Javascript jQuery mobile/Flot/resize.js_Javascript_Jquery_Jquery Mobile_Flot

Javascript jQuery mobile/Flot/resize.js

javascript jquery jquery-mobile

Javascript jQuery mobile/Flot/resize.js,javascript,jquery,jquery-mobile,flot,Javascript,Jquery,Jquery Mobile,Flot,我想知道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> &

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


html，正文{
高度：100%；/*使占位符上的百分比高度有效*/
}
.留言{
左侧填充：50px；
字体大小：较小；
}
弗洛特试验
$（函数（）{
VarC1_值=[[0,0]、[1,1]、[2,4]、[3,9]、[4,16]、[5,25]、[6,36]、[7,49]、[8,64]、[9,81]、[10100]、[11,121]、[12,144]、[13,169]、[14,196]、[15,225]、[16,256]、[17,289]、[18,324]、[19,361]；
var c1_data=[{data:c1_值，标签：“curve1”}]；
$.plot（$（“#占位符”）[
{
数据：c1_值，
行：{show:true，fill:false}
}
]);
});

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

jQuery Mobile会自动将您的所有内容包装在

页面中，如果您自己没有包含在内。一般来说，这意味着您应该在代码中自己完成！因此，第一步是将占位符移动到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尝试将内容
div设置为全高（注意数据角色“内容”
成为ui内容
的CSS类）：
.ui内容{
身高：100%；
宽度：100%；
位置：绝对位置；
}
使用Javascript动态地固定内容高度（在flot调用之前执行此操作）。摘自：
var fixgeometry=函数（）{
/*某些方向更改会使滚动位置保持在某个位置

这不是0,0。这对用户体验来说很烦人*/
滚动（0,0）
/*计算内容区域应采用的几何图形*/
var头=$（“.ui头：可见”）；
var footer=$（“.ui footer:可见”）；
变量内容=$（“.ui内容：可见”）；
var viewport_height=$（窗口）.height（）
var content_height=viewport_height-header.outerHeight（）-footer.outerHeight（）
/*修剪边距/边框/填充高度*/
content_height-=（content.outerHeight（）-content.height（））；
内容高度（内容高度）；
}; /* 固定几何*/

$（窗口）.bind（“方向更改大小页面显示”，fixgeometry）
这两种解决方案对我来说似乎都不是特别有效，尽管它们在显示图表时都“有效”
我在这里发布了第二个版本的示例：
CSS也在那里，如果你想试试的话，就把它注释掉。
你试过使用jQuery.noConflict（）吗？关于这一点，请在这里显示您实际显示图表的代码。刚刚测试了“无冲突”，这是一个很好的尝试，但问题仍然存在。。。谢谢你的主意。另外，我已经在原来的帖子中添加了完整的代码。这正是我想要的，我将保留这两种解决方案，看看哪一种在大多数情况下更好。非常感谢，太好了！