jQuery mobile/Flot/resize.js

我想知道JQM和Flot之間是否存在兼容性問題。我一直在尋找這個文件，但沒有很多...jQuery mobile/Flot/resize.js

這裏的問題：這取決於我在其中加載庫的順序，工作的事情而有的則沒有：

<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>

目前我想這個「沒有衝突」的功能，但沒有結果，現在。

來源

2013-01-02 user992157

你嘗試使用jQuery.noConflict（）嗎？更多關於此的信息，請點擊http://docs.jquery.com/Using_jQuery_with_Other_Libraries – Sam

請在實際顯示圖表的位置顯示代碼。 –

剛剛測試過「沒有衝突」，這是一個很好的嘗試，但問題仍然存在......感謝這個想法。此外，我已將完整的代碼添加到原始帖子中。 – user992157

如果您不包含在自己的內容中，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格全高（注：data-role"content"成爲一個CSS類的ui-content）：

的.ui內容{ 高度：100％; 寬度：100％; position：absolute; }
使用Javascript來動態修復內容高度（在你的flot調用之前執行此操作）。從here摘自：

VAR fixgeometry =函數（）{ /*某些方向的變化留下的東西
- 不是0,0滾動位置。這對用戶體驗很惱人。 */ 滾動（0，0）;
  
  /*計算我們的內容區域應該採用的幾何體*/ var header = $（「。ui-header：visible」）; var footer = $（「。ui-footer：visible」）; var content = $（「。ui-content：visible」）; var viewport_height = $（窗口）。高度（）;
  
  var content_height = viewport_height - header.outerHeight（） - footer.outerHeight（）;
  
  /*修剪邊界/邊框/填充高度*/ content_height - =（content.outerHeight（） - content.height（））; content.height（content_height）; };/* * fixgeometry/
$（窗口）.bind（「orientationchange調整pageshow」，fixgeometry）;

這兩種解決方案對我來說似乎都沒有什麼特別的效果，儘管他們在展示圖表時都做了「工作」。

我已經發布的第二版在這裏一個例子：http://alpha.jsfiddle.net/ryleyb/mz24P/

的CSS是有作爲，註釋掉如果你想嘗試吧。

來源

2013-01-03 16:56:02 Ryley

正是我在找的東西，我會保留這兩種解決方案，並在大多數情況下看看哪一種更好。非常感謝，那太棒了！ – user992157

jQuery mobile/Flot/resize.js

回答

相關問題