Question

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

我在处理jQuery Mobile的AJAX Link方面遇到了一些麻烦，默认情况下，链接将自动作为AJAX链接执行但这会导致JSXGraph出现一些导致空盒子的问题

我目前的解决方案是将数据-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？

Answer 1

如果你想在jQuery mobile中使用JSXGraph，你需要注意以下几点：

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

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

这个简约的例子适用于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>

在jQuery Mobile中加载JXSGraph

1 个答案: