`
zhangjun0806
  • 浏览: 4884 次
  • 性别: Icon_minigender_1
  • 来自: 济南
最近访客 更多访客>>
社区版块
存档分类
最新评论

jquery AJAX navigation特性

阅读更多

     刚开始用jquery mobile,做页面用起来也挺顺手,特别是导航特别炫,可以用动画,不过刚开始用发现了一个问题,就是jquery的代码在original page的时候是好使的,但是当导航到第二个页面的时候,jquery的所有方法,和第二个页面的css全部失效。查了一下,原来是jquery mobile有一个特性就是ajax导航,下面是从官方文档摘录下来的一段话:

      Whenever a link is clicked or a form is submitted, that event is automatically intercepted by the AJAX nav system and is used to issue a AJAX request based on the href or form action instead of reloading the page. While the framework waits for the AJAX response, a loader overlay is displayed.

      When the requested page loads, the jQuery Mobile parses the document for an element with the data-role="page" attribute and inserts that code into the DOM of the original page. Next, any widgets in the incoming page are enhanced to apply all the styles and behavior.The rest of the incoming page is discarded so any scripts, stylesheets or other information in the will not be included. 

 

      原来jquery mobile在页面之间导航的时候是使用ajax加载,然后将目标页面中的第一个data-role=“page”的第一个div元素设置到original page中,目标页面中的其余部分全部“抛弃”,也就是说写在<head></head>标签中的script和style全部失效。从stackoverflow上找到了解决方法:用jquery mobile的标准写法,在链接,button中都加一个rel="external"属性,或则加上data-ajax="false"就能使得目标页面被完全重新加载。但是这样就无法实现动画效果了。

      既然jQuery mobile的ajax导航方式是选取目标页面的第一个data-role="page"的div用来替换当前页面的page,那么就将目标页面依赖的script和style都写到page里面,这样就能解决问题了。

      附上stackoverflow上的一个解决方案

分享到:
评论

相关推荐

    Struts2+jQuery ajax的一个商品小系统

    Struts2作为一个MVC(Model-View-Controller)框架,提供了强大的控制层逻辑,而jQuery则是一种高效的JavaScript库,简化了DOM操作、事件处理以及Ajax通信。在这个"商品小系统"中,它们的结合使用可以实现快速的数据...

    jQuery Stylish Navigation Menu 会翻转的网站菜单

    内容索引:脚本资源,jQuery,翻转菜单 jQuery Stylish Navigation Menu 会翻转的网站菜单,你把鼠标放到某个菜单项上,它会翻动一下,改变背景色,源码爱好者发过类似的菜单,是国人自写的,比较一下这个国外的菜单,...

    jsp+Struts2.0+jquery+ajax+sqlserver整套jar/js包

    标题中的"jsp+Struts2.0+jquery+ajax+sqlserver整套jar/js包"指的是一套基于Java Web开发的技术栈,其中包括了前端的jQuery和Ajax技术,后端的Struts2框架,以及数据库层的SQL Server支持。这个组合在过去的Web应用...

    jquery Navigation Menu 类似TAB一样的动感菜单

    内容索引:脚本资源,jQuery,动感菜单,jQueryTab jquery Navigation Menu 类似TAB一样的动感菜单,把鼠标放菜单上,旁边会出现对应的背景图,还有淡入淡出效果,挺不错的,设计的也很漂亮,国外原版的程序,希望大家...

    Ajax-Navigation:一个ajax导航插件。 保持滚动位置并允许平滑过渡

    Ajax导航一个ajax导航... script src =" jquery.js " &gt; &lt;/ script &gt;&lt; script src =" ajax.js " &gt; &lt;/ script &gt;&lt; script data-plugin src =" plugins.js " &gt; &lt;/ script &gt;&lt; script

    jquery横向导航菜单

    jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在构建横向导航菜单时,jQuery的强大功能可以用于实现动态效果,如滑动、淡入淡出等,提升用户体验。 接着,我们来看...

    Navigation Menu 基于jquery的类似TAB一样的动感菜单.zip

    【标题】"Navigation Menu 基于jquery的类似TAB一样的动感菜单"是一个关于网页开发的项目,它利用JavaScript库jQuery创建了一个动态的导航菜单。这种菜单的交互效果类似于流行的TAB式布局,为用户提供了一种直观且...

    图书管理系统-JQuery+Struts2+JDBC

    这个系统利用了前端的CSS进行页面美化和布局,通过JQuery增强用户体验并引入AJAX技术实现异步数据交换,后端则依赖于Struts 2框架来控制业务逻辑,并用JDBC与SQL Server 2000数据库进行数据交互。 首先,CSS...

    jquerymobile所需要的库文件

    7. **性能优化**:对于大型应用,考虑使用页面碎片(page caching)和动态加载(ajax navigation)来提高性能和用户体验。 8. **兼容性测试**:确保在多种设备和浏览器上进行测试,确保兼容性。 总之,jQuery ...

    jquery.moblie

    5. **动态加载(Ajax navigation)**:默认情况下,jQuery Mobile使用Ajax技术进行页面加载,提高应用性能并保持浏览器的回退功能。通过设置,也可以禁用Ajax导航,以支持搜索引擎优化(SEO)或处理特殊情况。 6. *...

    JQueryMobile UI 汇总

    2. **导航(Navigation)**:使用无刷新的 AJAX 导航来实现页面间的平滑过渡。通过 data-rel="back" 或者 $.mobile.navigate() 方法可以实现历史记录的回退。 3. **列表视图(Listviews)**:提供了各种风格的列表...

    Jquery+Struts2笔记

    jQuery的核心特性包括DOM操作、事件处理、动画效果和Ajax交互。它通过提供简便的API,简化了JavaScript代码的编写,如选择元素、添加事件监听器和执行异步请求。例如,使用jQuery选择页面上的元素只需一行代码: ``...

    Json JQuery Struts2

    jQuery的核心特性可以概括为:选择器(用于选取HTML元素)、DOM操作(添加、修改或删除DOM元素)、事件处理、动画效果以及Ajax交互。通过使用jQuery,开发者可以极大地提高网页应用的交互性和用户体验。 Struts2是...

    jquery插件 N级导航栏

    这涉及到jQuery的Ajax方法,如`$.ajax()`或`$.get()`。 6. **兼容性**:优秀的jQuery插件需要考虑浏览器兼容性,确保在主流浏览器上都能正常工作。这可能需要使用polyfills来弥补旧版本浏览器不支持的新特性。 在...

    jQuery Mobile 架包

    jQuery Mobile通过AJAX技术实现了页面间的平滑导航,使得用户在不同页面间切换时无需重新加载整个页面,提高了用户体验。 2. **触控友好的界面(Touch-friendly Interface)** 设计了大量的触摸事件处理,如点击...

    Web Development with jQuery(Wrox,2015)

    New chapters bring developers up to date on popular features like jQuery UI, navigation, tables, interactive capabilities, and audio and video. The book focuses on the new features of jQuery that ...

    jQuery分页插件(jPages)

    Apart from all its features, the main diference for the other pagination plugins is that with jPages you can create as many navigation panels as you want and you can choose exactly where to place them...

    Struts1 Struts2 JQuery api

    JQuery的Ajax方法如`$.ajax()`、`$.get()`、`$.post()`等,使开发者能轻松实现异步数据交换,无需刷新整个页面。 **J2EE** Java 2 Enterprise Edition(J2EE,现在称为Java EE)是一个为企业级应用开发提供的平台。...

    jq22jqueryslider4678201807262215.zip

    jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。jQuery通过提供简洁的API,使得开发者可以更高效地编写代码,减少浏览器兼容性问题。 **2. jQuery Slider的...

Global site tag (gtag.js) - Google Analytics