0

我正在使用 JSXGraph (http://jsxgraph.uni-bayreuth.de/wp/) 使用 jQuery Mobile 在我的网站上绘制图表

我在处理 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 mobile 中使用 JSXGraph，你需要注意以下几点：

  • 将 pageshow 事件附加到页面 div（数据角色设置为“页面”的那个）。
  • 使用 ajax 链接时，将 JSXGraph-JavaScript 包含在 div 中，并将 data-role 设置为“page”。
  • 如果您不使用 ajax 链接，则可以将 JSXGraph JavaScript 放在页面上的任何位置，但您仍然需要使用 pageshow 事件来包含板初始化。这是由于 jQuery 移动 CSS 最初隐藏了导致所有子 div 的高度和宽度为 0 的所有页面。在页面显示之后，它是可见的，并且 JSXGraph 可以提取用于放置图形的正确 div 高度和宽度。

您可能会发现这段文档http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-navmodel.html对有关 jQuery mobile 导航模型的更多信息很感兴趣。

这个简约示例适用于 jQuery mobile 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 回答