0

JSXGraph (http://jsxgraph.uni-bayreuth.de/wp/) を使用して、jQuery Mobile を使用して Web サイトにグラフをプロットしています。

jQuery Mobile の AJAX リンクの処理に問題があります。デフォルトでは、リンクは自動的に AJAX リンクとして実行されますが、JSXGraph で空のボックスにつながる問題が発生します。

私の現在の解決策は、 data-ajax="false" をリンクに追加することです

<a href="page.html" data-ajax="false">Page</a>

次のコードを使用してプロットしています。

$('.type-interior').live('pageshow', function () {
    var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2], axis:true});
    var p1 = b.create('point',[-1,1], {name:'A',size:4});
    var p2 = b.create('point',[2,-1], {name:'B',size:4});
});

他の解決策はありますか？AJAX リンクを完全に無効にしたり、ページの読み込み後に JSXGraph をリロードしたりしますか?

4

1 に答える 1

0

jQuery モバイルで JSXGraph を使用する場合は、いくつかのことに注意する必要があります。

  • pageshow イベントをページ div (data-role が「page」に設定されたもの) にアタッチします。
  • ajax リンクを使用する場合は、data-role を「page」に設定して、div 内に JSXGraph-JavaScript を含めます。
  • ajax リンクを使用していない場合は、JSXGraph JavaScript をページのどこにでも配置できますが、ボードの初期化を pageshow イベントで囲む必要があります。これは、最初にすべてのページを非表示にする jQuery モバイル CSS が原因で、すべての子 div の高さと幅が 0 になります。pageshow の後、それが表示され、JSXGraph は、グラフィックの配置に使用される正しい div の高さと幅を抽出できます。

jQuery モバイルのナビゲーション モデルの詳細については、このドキュメントhttp://jquerymobile.com/demos/1.0a2/#docs/pages/docs-navmodel.htmlをご覧ください。

この最小限の例は、jQuery モバイル 1.0.1 で動作します。

<!-- main.html -->

<!-- head: include jquery, jquery mobile & jsxgraph -->
<!-- body -->
<div data-role="page" data-theme="c" id="main">
  <div data-role="content" id="maincontent">
    <a href="page.html" data-ajax="true">Test</a>
  </div>
</div>

<!-- page.html -->

<!-- head: include jquery, jquery mobile & jsxgraph in case of ajax=false -->
<!-- body -->
<div data-role="page" class="ctest" id="test">
  <div data-role="content" id="testcontent">
    <div id="jxgbox" class="jxgbox" style="width: 100px; height: 100px;"></div>
  </div>
  <script type="text/javascript">
    // or #test instead of .ctest
    $('.ctest').live('pageshow', function () {
      var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
      var p1 = b.create('point',[-1,1], {name:'A',size:4});
      var p2 = b.create('point',[2,-1], {name:'B',size:4});
    });
  </script>
</div>
于 2012-08-19T12:33:00.910 に答える