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>

--> ここではグラフが表示されません: "Uncaught Invalid dimension 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>

現在、この「競合なし」機能を試していますが、今のところ結果はありません。

4

1 に答える 1

3

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

さて、contentdivが利用可能な垂直スペース全体を埋めるために伸びないことは一般的な問題のようです。私は2つの解決策を見つけましたが、どちらも非常に理想的ではないようです。

  1. CSSを使用して、divを完全な高さにしようとします（これがCSSクラスになることにcontent注意してください）。data-role"content"ui-content

    .ui-content {高さ：100％; 幅：100％; 位置：絶対; }

  2. Javascriptを使用して、コンテンツの高さを動的に修正します（これは、flot呼び出しの前に行います）。ここから撮影：

    var fixgeometry = function（）{/ *方向を変更すると、スクロール位置がどこかに残ります

    • それは0,0ではありません。これはユーザーエクスペリエンスに迷惑をかけます。* / scroll（0、0）;

      /*コンテンツ領域がとるべきジオメトリを計算します*/var header = $（ "。ui-header：visible"）; var footer = $（ "。ui-footer：visible"）; var content = $（ "。ui-content：visible"）; var viewport_height = $（window）.height（）;

      var content_height = viewport_height --header.outerHeight（）--footer.outerHeight（）;

      /*マージン/境界線/パディングの高さをトリミングします*/content_height-=（content.outerHeight（）-content.height（））; content.height（content_height）; }; /*固定ジオメトリ*/

    $（window）.bind（ "orientationchange resize pageshow"、fixgeometry）;

これらのソリューションはどちらも、グラフを表示する限り「機能」しましたが、私にとっては特にうまく機能していないようでした。

2番目のバージョンの例をここに投稿しました：http： //alpha.jsfiddle.net/ryleyb/mz24P/

CSSもそこにあり、代わりにそれを試してみたい場合はコメントアウトされています。

于 2013-01-03T16:56:02.237 に答える