个人中心
gpt4 book ai didi

jquery-mobile - Jquerymobile - $.mobile.changepage

转载 作者：行者123 更新时间：2023-12-04 17:13:01 32 4
gpt4 key购买 nike

我想从我的 .js 文件中打开 .html 文件。所以我使用了 $.mobile.changePage("file.html")。在file.html 中有file.js。但是 file.js 在调用 file.html 时不会调用。

提前致谢。

first.js 

 $.mobile.changePage ("file.html");

文件.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 代码，我绑定(bind)到 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)在那里。对静态元素使用绑定(bind)， on而不是 live 用于动态元素，因为 live 事件在文档根目录处监听，您希望在页面 div 处监听。


对于较大的站点

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

如果你有外部 js 文件，并且你只需要一次将它放在所有页面的头部(如果没有太多)，如果你有一个非常大的网站，你可以通过跟踪哪个 JS 做得更好文件已加载到服务器端。

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

*这是我处理大型 jQM 网站的方式:*
  • 将实时事件绑定(bind)到所有页面/对话框 pageinit 和 pageshow 事件:
    • $(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 文件中，并且可以使用实时事件
    • 注册处理程序

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

    *注意:现在 RequireJS 可以使它更易于管理

    关于jquery-mobile - Jquerymobile - $.mobile.changepage，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4507977/

    32 4 0
    文章推荐： wpf - 如何将 WPF 应用程序编译成类库并在需要时启动应用程序
    文章推荐： ruby-on-rails - 带有语言环境的 Ruby on Rails 路由
    文章推荐： linq - 在 linq 中选择与选择新
    文章推荐： r - 在 R 中，如何判断字符串是否包含转义序列？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com