Jquery移动页面过渡和javascript
jquery mobile page transition and javascript
我有一个index.html和一个指向另一个页面的href按钮来显示饼状图,但是当我单击按钮时,图表不出现,然后如果我刷新页面,图表就出现了。这是HTML页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>the Stats</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="demo.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b" >
<h1>HsV</h1>
</div><!-- /header -->
<div data-role="content">
<img id='img' src="HSV-logo.png" width=150 />
</div> <!--/content -->
<div class="content-primary">
<ul data-role="listview">
<li><a href="France-10.html" data-inline="true" data- transition="flip"><img src="images/gf.png" alt="France" class="ui-li-icon">France </a></li>
<li><a href="France-30.html" blank" data-inline="true" data-transition="flip"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain </a></li>
<li><a href="chart/raphael_BL.html" data-inline="true" data-transition="flip"><img src="images/gbl.png" alt="Belgium" class="ui-li-icon">Belgium </a></li> </ul>
</div>
<div id="footer" data-role="footer" data-theme="b">
<h1>my app</h1>
</div>
</div><!-- /page -->
</body>
</html>
这是饼状图链接页面的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HybridStatsViewer</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="demo.css">
<!--link rel="stylesheet" href="demo-print.css"media="print"-->
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.1.js"></script>
<script src="raphael.js"></script>
<script src="pie-10.js"></script>
<script src="moteur.js"></script>
</head>
<body onload="moteur();">
<div data-role="page">
<div data-role="header" data-theme="b" >
<h1>HsV</h1>
<a href="index.html" data-role="button" data-icon="arrow-r" data-theme="c" data-inline="true" data-transition="flip" data-direction="reverse">Back</a>
</div><!-- /header -->
<div id ="holder">
</div>
<a id="bt" href="France-30.html" data-mini="true" data-role="button" data-inline="true" data-transition="flow" data-theme="b">Slide</a>
<div id="footer" data-role="footer" data-theme="b">
<h1>my app</h1>
</div>
</div><!-- /page -->
</body>
你没有张贴你的javascript代码,但我想我知道你的问题是什么。
所有与页面高度和宽度相关的jQuery插件必须通过pageshow事件初始化。这是因为jQuery Mobile页面只有在这一点上才有正确的高度。因此,如果页面高度为0,插件将初始化,但高度设置为0。
所以如果你是在文档准备或任何其他页面事件期间做的,将你的饼图插件初始化切换到pageshow eventet。
如果你不知道pageshow事件是什么,看看我的其他详细答案:jQuery Mobile: document ready vs page events
EDIT:
我已经解决了你的问题。
要理解这种情况,你需要了解jQuery Mobile是如何工作的。它使用ajax加载其他页面。
第一个页面正常加载。它的HEAD和BODY被加载到DOM中,它们在那里等待其他内容。当第二个页面被加载时,只有它的BODY内容被加载到DOM中。
阅读更多关于它在我的其他答案其他答案:为什么我必须把所有的脚本index.html在jquery移动
在饼图页面中添加以下代码,并删除onload="moteur();"
函数
<script>
$(document).on('pageshow', '[data-role=page]', function () {
moteur();
});
</script>
当通过Ajax加载页面时,引用页面头部的任何脚本和样式都不会产生任何影响,但如果通过HTTP正常请求页面,它们将执行。在编写jQuery Mobile站点脚本时,需要考虑这两种情况。通过Ajax请求时忽略页面头部的原因是,重新执行相同JavaScript的可能性非常高(在站点的每个页面中引用相同的脚本是很常见的)。由于试图解决这个问题的复杂性,我们将执行特定于页面的脚本的任务留给开发人员,并假设头脚本只期望在每个浏览会话中执行一次。
在构建jQuery Mobile站点时,最简单的方法是在每个页面的头部引用相同的样式表和脚本集。如果您需要为特定的页面加载特定的脚本或样式,我们建议将逻辑绑定到pageinit事件(详情如下),以便在创建特定页面时运行必要的代码(可以通过其id属性或许多其他方式确定)。采用这种方法将确保在直接加载页面或通过Ajax拉入并显示页面时执行代码。特定于页面的脚本的另一种方法是,当没有定义data-role=page元素时,将脚本包含在body元素的末尾,或者在第一个data-role=page元素中。如果以这种方式包含自定义脚本,请注意,当通过Ajax或常规HTTP加载页面时,这些脚本将执行,因此,如果这些脚本在每个页面上都是相同的,则可能会遇到问题。如果以这种方式包含脚本,我们建议将页面内容封装在data-role="page"元素中,并在该元素之外的每个页面上放置引用的脚本。可以将该页唯一的脚本放在该元素中,以确保它们在通过Ajax获取该页时执行。
查看此链接获取完整的详细信息.....
http://demos.jquerymobile.com/1.2.0-beta.1/docs/pages/page-scripting.html- Javascript移动站点重定向问题
- javascript移动交叉浏览器确定用户是否滚动到页面底部
- Javascript移动重定向问题
- 尝试使用键盘javascript移动画布
- Javascript - 移动滑动滚动
- 什么'这段用javascript移动css元素的代码错了
- 使用Javascript移动到同一页面中的另一帧
- 如何使用javascript移动图像
- Edge动画:如何将javascript移动到html中
- 将javascript移动到单独的文件中,ajax调用会出现错误
- HTML Javascript移动重定向
- 使用JavaScript移动页面上的按钮
- 我们如何在javascript移动应用程序中记录骨干历史堆栈列表
- 如何将内联 javascript 移动到脚本标记
- 使用 javascript 移动或存储文本
- Javascript:移动浏览器的“视点”
- 使用 Raphael JavaScript 移动多个元素
- JavaScript 移动延迟和多次击键
- 将 JavaScript 移动到 ASPX 页面的底部以减少 PageLoad
- 使用具有正确光标定位的 Javascript 移动元素