我想从我的.js文件中打开.html文件.所以我使用了$ .mobile.changePage("file.html").在file.html中有file.js. 但是当调用file.html时,file.js不会调用.
提前致谢.
first.js
$.mobile.changePage ("file.html");
file.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile Framework - Dialog Example</title>
<link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.mobile-1.0a2.min.js"></script>
<script src="../Scripts/file.js"/> // Could not imported
<script src="../Scripts/helperArrays.js"/> // Could not imported
<script src="../Scripts/globalVariables.js"/> // Could not imported
</head>
<body>
<div data-role="page">
<div data-role="header" data-nobackbtn="true">
<h1>Vaults</h1>
</div>
<!-- <div data-role="content" data-theme="c" id="contentVault">
<a href="Views/searchPage.html" data-role="button" data-theme="b">Sample Vault</a>
<a href="Views/searchPage.html" data-role="button" data-theme="c">My Vault</a>
</div> -->
<div data-role="content" id="content">
<ul id="listview" data-role="listview" data-inset="true" data-theme="e" data-dividertheme="b">
<li id="listdiv" data-role="list-divider">List of Items</li>
</ul>
</div><!-- /content -->
</div>
</body>
</html>
请帮我..
当jQM通过AJAX加载另一个页面时,它只会拉入你的div [data-role ="page"]中的任何内容,而不是像头一样
所以如果你愿意,你可以在这个div中包含任何JS/CSS,问题是如果这个页面被多次访问,任何CSS都会积累,但问题对于JS来说要糟糕得多.
您基本上将每个页面都附加到DOM,因此如果您使用像$('div.someClass')这样的全局选择器,则JS会在整个DOM(您加载的每个页面)上运行,即使使用ID也不是完美的解决方案,因为如果您可以链接到同一页面两次.
对于较小的网站
我已经通过将所有CSS移动到一个文件中来解决这个问题,并且每次加载页面时我想运行的JS代码,我绑定到pageinit和pageshow jQM事件:
<script type="text/javascript">
$("div:jqmData(role='page'):last").bind('pageinit', function(){
//your code here - $.mobile.activePage not declared
});
$("div:jqmData(role='page'):last").bind('pageshow', function(){
//your code here - $.mobile.activePage works now
});
</script>
pageinit事件在页面加载时运行,只运行一次(如果你加载后它会保留在内存中,如果你导航回它,即使是通过后退按钮也不会再次触发),另一方面,每次页面都会触发页面显示即使您通过浏览器上的后退按钮导航回到它,也会显示.
pageinit在DOM存在时运行,pageshow事件仅在您有一些依赖于正在呈现的DOM的代码时才需要通过$ .mobile.activePage快速引用活动页面或者某些数据已更改且您需要每次显示时都会刷新它.在大多数情况下,我只使用pageinit作为jQM的document.ready并在那里绑定我的事件.对于静态元素使用bind,而对动态元素使用live,因为实时事件在文档根目录中侦听,您希望在页面div处进行侦听.
对于较大的网站
对于较大的站点,将实时事件绑定到任何页面和处理页面类型是有利的,这样js代码不会被多次加载.
如果您有外部js文件,其中包含帮助函数,您只需将其放在所有页面的头部(如果没有太多),如果您有一个非常大的网站,您可以通过跟踪哪个JS做得更好文件已加载服务器端.
所有这些都可以通过不使用AJAX来加载新页面来避免,因此请考虑转换/加载效果是否值得
*以下是我处理大型jQM网站的方法:*
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){
<div data-role="page" data-mypage="employeelist">在此居住的情况下,你基本上可以为每个页面"名" switch语句,然后检查event.type为pageinit/pageshow或两者并没有把你的代码,则显示本次活动页面创建的每个时间/将被解雇,它知道哪个页面触发了它,然后调用相应的代码
我最终有太多的代码,所以我构建了一个处理程序对象,其中每个页面的js都包含在一个单独的js文件中,并且可以使用live事件注册处理程序
缺点是整个站点的所有j都加载到用户到达的第一页上,但即使大型站点小于jQuery或jQM也会缩小,所以这不应该是一个问题.优点是每次用户导航到新页面时,您不再通过AJAX为每个页面加载所有JS.
*注意:现在RequireJS可以让它更易于管理
Jquery mobile 通过 AJAX 获取页面并将其内容添加到当前页面。我看到一些关于将页面标题更改为传入标题的通知，因此它们（计划？）访问头部，但目前jquery mobile在加载页面时似乎没有加载外部js。
更重要的是 - 如果你使用 $(document).ready() 它将不会被触发，因为它是 AJAX
| 归档时间： |
|
| 查看次数： |
14194 次 |
| 最近记录： |