zoukankan      html  css  js  c++  java
  • jquery mobile转场时加载js失效(转)

    jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http。请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原来的内容。因而如果请求的新页面在head部分加载了其他的js ,此时框架并不会加载该部分的js 。

    这就意味着head部分的js 和css在绝大部分情况下并不会被加载并执行,通常情况下建议所有页面使用一套统一的js 和css。但如果应用开发的复杂度较高或者为分工合作开发时,我们需要根据不同的页面加载不同的js 或样式,这时候可以使用jquery mobile提供的pagecreate开发方法 解决该问题。

    我们知道在使用jquery 框架时,我们习惯使用

    $(document).ready(function(){  
            // do something
        })

    但这个开发方法 在jquery mobile中,因为jquery mobile特殊的请求机制(ajax请求),很多时候并不能达到我们希望的功能。jquery mobile提供了pagecreate的事件。

    下面我们可以通过一个简单的例子,使用pagecreate实现不同page加载不同js 的功能:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>demo</title>
    </head>
    <body>  
        <div data-role="page" id="pageone">  
           <div data-role="header">  
               <h1>page one header</h1>  
           </div>  
           <div data-role="content">  
               <p>page one content</p>  
               <a href="#pagetwo">page two</a>  
           </div>  
           <div data-role="footer">  
               <p>page one footer</p>  
           </div>  
        </div><!-- /pageone -->  
        <div data-role="page" id="pagetwo">  
           <div data-role="header">  
               <a data-rel="back">back</a>  
               <h1>page two header</h1>  
           </div>  
           <div data-role="content">  
               <p>page two content</p>  
           </div>  
           <div data-role="footer">  
               <p>page two footer</p>  
           </div>  
        </div><!-- /pagetwo -->  
        <script>  
            $(document).on("pagecreate", "#pageone", function(){  
                alert("page one create");  
            });  
    
            $(document).on("pagecreate", "#pagetwo", function(){  
                alert("page two create");  
            });  
        </script>  
    </body>  
    </html>

    这样,页面在一开始渲染时,只会执行 alert("page one create");  当a标签跳转到pagetwo时才会执行:alert("page two create"); 

    当然还有其他解决方法 ,比如在a标签上加上如:data-ajax='false',rel='external',只是这样做的话转场效果会失效。

    而如果使用上面我介绍的这种开发方法 的话,js 失效也可以解决,转场也可以。

  • 相关阅读:
    MySQL-子查询,派生表,通用表达式
    MySQL-插入数据(INSERT)
    IDEA中如何使用debug调试项目 一步一步详细教程
    Java相对路径/绝对路径总结
    jsp九个内置对象、四个域对象及Servlet的三大域对象
    浅析MVC模式与三层架构的区别
    三层架构详解
    Java集合中List,Set以及Map等集合体系详解
    POJ3233 [C
    HDU 2829 [Lawrence] DP斜率优化
  • 原文地址:https://www.cnblogs.com/shenyixin/p/4818519.html
Copyright © 2011-2022 走看看