Javascript 在jquerymobile中加载JXSGraph

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

我在处理jQuery Mobile的AJAX链接时遇到了一些问题， 默认情况下，链接将自动作为AJAX链接执行 但这将导致JSXGraph出现一些问题，导致出现一个空框

我当前的解决方案是向链接添加数据ajax=“false”

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

---

还有其他解决办法吗？如完全禁用AJAX链接或在页面加载后重新加载JSXGraph？

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

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

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

//或者#测试而不是.ctest
$（'.ctest'）.live（'pageshow'，函数（）{
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}）；
});

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