`
LiYunpeng
  • 浏览: 950994 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

关于JQuery Mobile动态Ajax加载页面及JS的方案

阅读更多
首先 JQuery Mobile

有单页面模式和多页面模式
在多页面模式的情况下,可能会选择把页面都分在多个html文件中



缺点
通过ajax来切换页面中的body标签里边的内容
而在body里面写<script>标签的话,会少了两部页面的执行
pagecreate和pageinit两个时间都无法获取
除非写到首页的Header里面,才能监听到页面的两个事件
但是,把所有页面的JS都卸载Header里面或者外部JS,首次就加载,会增加首次加载文件的大小,并且会产生多余的加载,在没有用到的页面也被加载进来



下面是个人的解决方案


1.首先对于页面切换,使用changePage来执行,并且可以传递参数来确定是跳转到哪个页面
当然,pagebeforechange事件也能获取到跳转文件的扩展名,不过还是觉得自己传参数靠谱

2.监听pagebeforechange事件,来处理页面切换之前处理,然后通过自己传的页面参数来判断,要跳转到的页面,然后根据自己需求来加载JS文件

3.动态加载JS文件,通过JQuery 的getScript方法来加载JS

(在监听事件的时候,可能考虑到,加载JS,后,导致内存增加
但是http://stackoverflow.com/questions/5108002/how-to-delete-script-loaded-by-getscript
上面写,getScript,不是相当于load了一个script,他是下载后来直接运行,所以不需要考虑这个问题,不过,这块还有待于确认)


优点
这样就避免了加载JS文件大又能捕捉到page页面的create 和 init事件以及处理其他的内容
而且可以把JS文件很明确的分到具体的文件中,也方便管理
分享到:
评论

相关推荐

    jquery mobile 滚动加载内容

    当我们谈论“jQuery Mobile 滚动加载内容”时,我们实际上是在讨论一种动态加载技术,即在用户滚动页面到接近底部时,通过 AJAX(异步 JavaScript 和 XML)技术从服务器获取并插入更多内容,以实现无尽滚动的效果。...

    jquerymobile滚动加载内容

    通过使用JavaScript与服务器进行异步通信,Ajax可以实现网页的动态加载,提高用户体验,减少网络流量。 三、jQuery Mobile 中的滚动事件 在jQuery Mobile中,可以监听页面的`scrollstart`和`scrollstop`事件来实现...

    jQuery mobile滑动式的标题导航

    jQuery Mobile 默认使用Ajax加载页面,以实现平滑的页面切换。若需要禁用此功能,可在链接中添加`data-ajax="false"`: ```html &lt;a href="nonajax.html" data-ajax="false"&gt;不使用Ajax加载 ``` ### 总结 jQuery ...

    jQuery.mobile-1.0.1.js与jQuery.mobile-1.0.1.min.js

    这两个JavaScript文件是jQuery Mobile的核心,主要功能是提供页面导航、事件处理、表单增强、动态加载等特性。`jquery.mobile-1.0.1.js`是原始的非压缩版本,代码可读性较高,方便开发者调试和学习。而`jquery....

    JqueryMobile课件源码

    这些数据属性是 jQuery Mobile 核心机制的一部分,让开发者能够无需编写 JavaScript 代码就能实现功能。 ### 三、页面结构 jQuery Mobile 需要特定的页面结构来工作,通常包括一个或多个 `&lt;div data-role="page"&gt;`...

    jQueryMobile Ajax开发

    ### jQueryMobile Ajax开发知识点概述 #### 一、版本特性 1. **Push State 支持**:jQuery Mobile (JQM) 在此版本中加入了对 `history.pushState` 的支持,这是一个 HTML5 API,允许开发者在不刷新页面的情况下...

    JqueryMobile常见问题整理

    **jQuery Mobile 常见问题及解决方案** **一、页面跳转时重复调用 `pageinit` 方法** 在使用 jQuery Mobile 进行移动应用开发时,`pageinit` 是一个非常重要的事件,它会在每个页面加载时触发。然而,有时在页面...

    jQuery mobile相册

    10. **AJAX导航**:jQuery Mobile默认使用AJAX进行页面导航,以实现平滑的页面切换。在相册应用中,可能需要禁用或调整此行为,以确保图片加载正确。 通过以上知识点的掌握,开发者可以创建出一个功能完备且用户...

    android jqueryMobile 类库和实例源代码

    3. 动态加载内容:利用jQuery Mobile的AJAX特性,通过`data-ajax="true"`属性动态加载页面内容,提高用户体验。 六、总结 结合Android的WebView和jQuery Mobile,开发者可以创建出具有高度互动性和良好用户体验的...

    JQueryMobile js/css/1.2版本/1.4版本

    在描述中提到的文件“JQueryMobile1.4.5.min.js”和“JQueryMobile1.4.5.min.css”是1.4版本的核心文件。`.min`表示这些文件已经过压缩,减少了文件大小,提高了页面加载速度。`js`文件包含了JQuery Mobile的...

    jQuery Mobile 1.1.1最新版

    9. **数据绑定和AJAX导航**:jQuery Mobile 使用AJAX技术实现无刷新页面切换,提供了更好的导航体验。同时,框架支持数据绑定,可以动态更新页面内容,增强了交互性。 10. **兼容性**:jQuery Mobile 1.1.1 支持...

    JQueryMobile与后台通信

    总结,jQuery Mobile通过AJAX与后台进行通信,结合页面生命周期事件、表单提交和响应数据处理,可以实现动态、交互的移动应用。在与Java后端集成时,理解JSP和Servlet的工作原理,以及RESTful API设计,有助于构建...

    JQuery Mobile需要的包

    - **JavaScript 文件(js)**:这是实现jQuery Mobile功能的核心脚本。主要的JS文件是 `jquery.mobile.min.js`,它包含了所有jQuery Mobile的功能。此外,可能还有单独的jQuery库文件,如 `jquery.js` 或 `jquery....

    JqueryMobile页面间跳转时的参数传递

    ### JqueryMobile页面间跳转时的参数传递 在使用jQuery Mobile进行移动Web应用开发时,经常需要在不同页面之间传递参数。这种功能对于实现页面之间的数据交互至关重要。本文档将通过一个具体的代码示例来详细说明...

    jquerymobile实现拖动分页加载页面功

    jQuery Mobile,作为一个流行的前端框架,为开发者提供了丰富的功能,包括拖动分页加载页面的功能。本文将深入探讨如何利用jQuery Mobile实现这一特性。 首先,jQuery Mobile的核心在于其触摸友好的界面和数据绑定...

    jQuery Mobile实例

    jQuery Mobile 使用 Ajax 进行页面导航,这使得页面之间可以平滑过渡,而无需完全刷新。然而,这可能会导致历史记录和书签出现问题,因此开发者需要了解如何正确配置 `data-ajax` 属性,以及何时使用 `data-rel=...

    JQueryMobile UI 汇总

    1. **单一页面架构**:jQuery Mobile 使用单一页面模板,将多个页面的内容包含在一个 HTML 文件中,通过 AJAX 技术实现页面间的平滑切换,提高用户体验。 2. **触控优化**:所有的 UI 元素都经过优化,以适应触摸...

    Jquery Mobile +Asp.net

    1. **数据绑定**:ASP.NET MVC的模型可以直接与jQuery Mobile的视图进行绑定,通过JSON或AJAX实现动态数据更新。 2. **页面导航**:利用jQuery Mobile的页面导航功能,结合ASP.NET的路由系统,实现平滑的页面过渡。 ...

    JqueryMobile快速上手教程-实训任务书01-我的第一个JqueryMobile页面

    为了在页面间平滑切换,jQuery Mobile 使用 AJAX 来加载新页面,并通过 `data-url` 属性保持页面历史记录。 ### 五、交互组件 jQuery Mobile 提供了许多内置的交互组件,如按钮、表单、下拉菜单、滑块等,它们都...

Global site tag (gtag.js) - Google Analytics