0

我是 JQuery Mobile 的新手，我正在尝试根据用户选择显示带有 JqPlot 图形的页面。

我今天早上阅读并实验，通过设计，通过单击链接显示/加载的页面的 javascript 代码不会执行。

为了考虑加载页面的JS脚本，data-ajax链接的数据属性必须设置为false。但是在这种情况下，浏览器会重新加载所有页面，对于用户来说并不是平滑过渡。

<p><a href="myUrl.php" data-ajax= "false" data-transition="slideup" data-role="button" data-theme="c">

我找到了解决方法，但我需要对我的代码进行专家审查。思路是pageshow在图表容器页面上声明一个事件，通过JQuery函数#page-detail加载图表创建页面。.load()

通过这种方式，我能够：

  • 顺利过渡到我的页面
  • 有一个加载 div 我的图表将被加载
  • 当数据加载和 JqPlot 图准备好时渲染我的图

我的代码：

  $(document).on('pageshow','#page-detail',function(){       
        //Apply a loading layer to the graph container
        $('#graph-container').html("<div id='graph-loading-layer' class='loading loading-col2a'>"+g_graphLoadingText+"</div>");                    

        //Load my graphic page creation. In this page, there are JS code to create the JQplot graphic
        $('#graph-container').load(g_baseUrl+"index/graph/format/html",{chartHeight : newHeight+'px'},function(response, status, xhr) {
            console.log('loaded')
        });                 
    });

我上面的解决方案很痛苦，我确信我可以轻松加载我的图表是否有人有更好的解决方案？更好的代码实现？

4

1 回答 1

0

JQuery.load()是加载页面的好选择，包括按照标准页面加载执行 Javascript 和应用 CSS。我在一个 MVC 单页网站的部分页面中使用了这种技术，发现它非常有效。

我对您对链接的担忧并不完全清楚，但在链接的“点击”处理程序中使用 JQuery .load() 肯定也可以。

您的代码看起来不错，很高兴看到您在异步加载发生时应用了加载层。我不确定 100% 确定该层如何为您工作，但我认为您可能需要在.load()完成后隐藏/删除它，因此您的加载后处理程序中可能需要一些额外的代码来做所以？

于 2012-12-07T11:12:49.677 回答