Jac*_* He 25 html javascript jquery jquery-mobile cordova
我使用$ .mobile.changepage在我的phonegap + jquerymobile项目中进行重定向.然而令我困惑的是,我需要将所有页面的脚本放到同一个文件index.html中.如果没有,重定向页面不能在其标题中执行该功能.
例如,我的index.html似乎是
$(document).bind("deviceready",function(){$.mobile.changepage("test.html");})
然后,我的设备将重定向到test.html,这似乎是
$("#btnTest").click(function(){alert("123");})
<button id="btnTest">Test</button>
但是,该脚本永远不会在test.html中执行.然后我把脚本放到index.html,我期望完成.无论如何,如果我将所有脚本放在同一页面上,项目将变得越来越难以保存.感谢您的帮助.
Gaj*_*res 58
这篇文章也可以在这里找到我博客的一部分.
要了解这种情况,您需要了解jQuery Mobile的工作原理.它使用ajax加载其他页面.
第一页正常加载.它HEAD并BODY装入DOM,而且他们在那里等待其他内容.加载第二页时,只将其BODY内容加载到DOM.更确切地说,即使BODY没有满载.只会加载具有属性data-role ="page"的第一个div,其他所有内容都将被丢弃.即使你有更多的页面,BODY只有第一个页面将被加载.此规则仅适用于后续页面,如果初始HTML中有更多页面,则将加载所有页面.
这就是您的按钮显示成功但单击事件无法正常工作的原因.HEAD在页面转换期间忽略其父级的同一事件.
这是官方文档:http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
不幸的是,你不会在他们的文档中找到这个描述.以太他们认为这是一种常识,或者他们忘记将其描述为我的其他主题.(jQuery Mobile文档很大但缺少很多东西).
在第二页和其他每个页面中,将SCRIPT标记移动到BODY内容中,如下所示:
<body>
<div data-role="page">
// And rest of your HTML content
<script>
// Your javascript will go here
</script>
</div>
</body>
这是一个快速的解决方案,但仍然是一个丑陋的.
可以在我的其他答案中找到工作示例:更改页面后不会触发Pageshow
另一个工作示例:使用jQuery-mobile过渡以不同方式加载页面
将所有javascript移动到原始的第一个HTML中.收集所有内容并将其放入单个js文件中,放入HEAD.加载jQuery Mobile后初始化它.
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script> // Put your code into a new file
</head>
最后,我将描述为什么这是一个好的解决方案的一部分.
在按钮中使用rel ="external"以及用于更改页面的每个元素.因为它ajax不会用于页面加载,你的jQuery Mobile应用程序将表现得像普通的Web应用程序.不幸的是,这不是一个很好的解决方案.Phonegap永远不应该像普通的网络应用程序一样工作.
<a href="#second" class="ui-btn-right" rel="external">Next</a>
官方文档,寻找章节:没有Ajax的链接
现实的解决方案将使用解决方案2.但是与解决方案2不同,我会使用相同的index.js文件并在HEAD每个可能的其他页面中初始化它.
现在你可以问我为什么？
Phonegap就像jQuery Mobile有问题一样,如果你的每个js内容都在一个HTML文件中,迟早会出现错误并且你的应用程序会失败(包括加载的DOM).DOM可以被删除并Phonegap刷新当前页面.如果该页面没有javascript,那么在重新启动之前它将无效.
使用良好的页面架构可以轻松解决此问题.如果有人有兴趣我已经写了一篇文章谈好jQuery Mobile的页面架构.在一个坚果壳中,我正在讨论jQuery Mobile如何工作的知识是您在成功创建第一个应用程序之前需要知道的最重要的事情.