Jquerymobile - $.mobile.changepage

发布于 2024-10-09 01:44:03 字数 1690 浏览 3 评论 0原文

我想从 .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>

请帮助我..

原文

I want to open the the .html file from my .js file. So I Used the $.mobile.changePage("file.html"). In the file.html have file.js. But The file.js does not call when the file.html in invoked.

THanks in advance.

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>

Please help me..

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

狂之美人 2024-10-16 01:44:03

当 jQM 通过 AJAX 加载另一个页面时，它只会提取 div[data-role="page"] 中的任何内容，而不会提取其他内容，例如 head

因此，如果您愿意，您可以在此 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 事件在页面加载时运行，仅运行一次（加载后，如果您导航回该页面，它会保留在内存中，即使通过后退按钮也不会再次触发），另一方面，pageshow 会在每次页面加载时触发显示，即使您通过浏览器上的后退按钮导航回到它。

pageinit 在 DOM 存在时运行，pageshow 事件仅在您有一些代码依赖于正在呈现的 DOM 时运行，并且您需要通过 $.mobile.activePage 快速引用活动页面或更改一些数据并且您需要每次显示时刷新它。对于大多数目的，我仅使用 pageinit 作为 jQM 的 document.ready 并在那里绑定我的事件。对于静态元素使用 bind，对于动态元素使用 on 而不是 live，因为实时事件在文档中监听root，您想在页面 div 上收听。

对于较大的网站

对于较大的网站，将实时事件绑定到任何页面并处理页面类型具有优势，这样 js 代码就不会加载多次。

如果你有带有辅助函数的外部 js 文件，你只需要一次将其放入所有页面的头部（如果不是太多），如果你有一个非常大的网站，你可能可以通过跟踪哪个 JS 做得更好文件已加载到服务器端。

所有这些都可以通过不使用 AJAX 加载新页面来避免，因此请考虑一下过渡/加载效果是否值得

*以下是我处理大型 jQM 站点的方法：*

绑定实时事件对于所有页面/对话框 pageinit 和 pageshow 事件：

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function （活动）{

我用名称引用每个页面：
在此现场活动中，您基本上可以为每个页面“名称”都有一个 switch 语句，然后检查 pageinit/pageshow 或两者的 event.type 并将代码放在那里，然后每次创建/显示页面时都会发生此事件被触发时，它知道哪个页面触发了它，然后调用相应的代码
我最终有太多代码，所以我构建了一个处理程序对象，其中每个页面的 js 包含在单独的 js 文件中，并且可以使用实时事件注册处理程序

缺点是整个站点的所有 js 都加载在用户到达的第一个页面上，但即使是大型站点也比 jQuery 或 jQM 更小，所以这不应该是一个忧虑。优点是每次用户导航到新页面时，您不再需要通过 AJAX 加载每个页面的所有 JS。

*注意：现在 RequireJS 可以让这变得更容易管理

When jQM loads another page through AJAX it only pulls in anything within your div[data-role="page"] and nothing else, like the head

So you can if you wanted to, include any JS/CSS within this div, the problem is that if this page is accessed multiple times any CSS will accumulate, but the problem is much worse for JS.

You are basically getting every page appended to the DOM, so the JS runs on the entire DOM (every page you loaded) if you use a global selector like $('div.someClass'), even using an ID isn't a perfect solution because if you can link to the same page twice.

For Smaller Sites

I've solved this by moving all the CSS into one file and for JS code that I want to run each time the page is loaded, I bind to the pageinit and pageshow jQM events:

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

The pageinit event runs when the page is loaded, only ever once (after it's loaded it stays in memory if you navigate back to it, even via a back button this isn't fired again), pageshow on the other hand fires everytime the page is shown, even when you navigate back to it via the back button on the browser for example.

The pageinit runs when the DOM is there, the pageshow event is only if you have some code that depends on the DOM being rendered and you need a quick reference to the active page through $.mobile.activePage or some data changed and you need to refresh this back everytime it's shown. For most purposes I only use the pageinit as a document.ready for jQM and bind my events there. Use bind for static elements, and on instead of live for dynamic elements, because live events listen at the document root, you want to listen at the page div.

For Larger Sites

For larger sites there are advantages to binding a live event to any pages and handling types of pages, this way js code isn't loaded more than once.

If you have external js files with say helper functions that you only need once put that in the head of all your pages (if there aren't too many), if you had a very big site you could probably do better by tracking which JS files have been loaded server side.

All this can be avoided by just not using AJAX to load new pages, so think about whether that transition/loading effect is worthwhile

*Here's how I handle large jQM sites: *

bind a live event to all pages/dialogs pageinit and pageshow events:

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){

I reference each page with a name: <div data-role="page" data-mypage="employeelist">
In this live event you can basically have a switch statement for each page "name", and then check event.type for pageinit/pageshow or both and put your code there, then every time a page is created/shown this event will be fired, it knows what page triggered it and then calls the corresponding code
I eventually had too much code, so I built a handler object where each page's js is included in a separate js file and can register handlers with the live event

The drawback is that all your js for your entire site is loaded on the first page the user reaches, but minified even a large site is smaller than jQuery or jQM so this shouldn't be a concern. The advantage is you are no longer loading all your JS for each page through AJAX each time the user navigates to a new page.

*note: now RequireJS can make this even more manageable

回复收藏 0 原文