`

Jquery mobile页面跳转js无法执行问题等小问题总结(转)

 
阅读更多

有几个方案:

1.可以用两种方法来解决:一是在index页面中,注册所有需要使用到的外部JS文件,或者使用母版页面来统一;二是将页面内部JS写在data-role="page"标签下,这样无论页面怎样跳转,均可以运行。

2.关闭Ajax效果:

 

禁止ajxa跳转有两种情况:

1、禁止局部ajax跳转

2、禁止全局ajax跳转

对于#1只需要在a标签中添加下面的属性:

data-ajax=“false”

有时我们要用正常的http请求而不用Ajax请求,比如链接到别的网站等情况。通过给a标签加下面的属性,可以将链接指定为正常的http请求:

rel=external

对于#2我们需要设置一个全局的禁止ajax跳转的方式,js代码如下:

$(document).bind("mobileinit", function() {
			// disable ajax nav
			$.mobile.ajaxEnabled=false
		});

注意:上面的代码片段需要放在jquery.mobile-xxx.min.js引入之前。

顺便说一句,初始化的设置都需要放在此处,例如加载错误信息的设置:

$.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.';


3.jquery mobile弹出窗口

下面代码写入页面中:要放在你主页面page的后面。

<div data-role="dialog" id="dialog">

<div data-role="header" data-theme="d"><p style="text-align:center">操作提示</p></div>

<div data-role="content" data-theme="c">

<p>提示内容</p>

<a data-theme="b" href="index.html" data-role="button" data-rel="back">确定</a>

</div>

</div>

 

 

这里的data-role不是page,而是换成dialog了。

调用方式:$.mobile.changePage('#dialog', 'pop', true, true);

例子:

function SetCallBack(res) { 
    if (res != null) {
        if (res == "ok") {
            $("#psubmitok").html("提交成功,点击确定查看更多社区信息。");
            $.mobile.changePage('#dialog', 'pop', true, true);
        }
        else {
            $("#psubmitok").html("关注失败了,请刷新一下再试。");
            $.mobile.changePage('#dialog', 'pop', true, true);
        }
    }
}

 

 

分享到:
评论

相关推荐

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

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

    JqueryMobile常见问题整理

    在 jQuery Mobile 中,页面间跳转可能导致样式丢失或 JavaScript 失效,这是因为 AJAX 导航可能无法正确地重新应用样式和重新执行脚本。 **问题分析:** 这可能是由于 jQuery Mobile 的页面结构导致的,它通常将多...

    jQuery Mobile页面跳转后未加载外部JS原因分析及解决

    在使用jQuery Mobile进行Web应用程序开发时,我们可能会遇到一个常见的问题,即页面跳转后,新的页面(如从pageA跳转至pageB)中引用的JavaScript文件未能正确执行。这是因为jQuery Mobile采用了异步页面加载机制,...

    jQuery Mobile 1.1.1最新版

    例如,`pagecreate` 和 `pageshow` 等事件可以用来在页面加载时执行特定的操作,而 `$.mobile.changePage()` 方法则用于程序控制页面跳转。 9. **数据绑定和AJAX导航**:jQuery Mobile 使用AJAX技术实现无刷新页面...

    JQuery Mobile需要的包

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

    jQuery Mobile快速入门.pdf

    - **JavaScript API**:掌握 jQuery Mobile 提供的 API,如 `$.mobile.changePage()` 可帮助开发者更好地控制页面间的跳转。 - **调试与测试**:利用开发者工具进行调试,确保应用在不同设备上都能正常运行。 - **...

    jqueryMobile入门练习项目

    3. JavaScript 文件:可能包含了事件监听、数据处理等逻辑代码,扩展了 jQuery Mobile 的功能。 4. 图片和其他资源:如图标、背景图片等,用于美化界面。 5. 示例数据:可能包含JSON或其他格式的数据文件,用于...

    jquery mobile 1.4.5demo和说明

    总结,jQuery Mobile 1.4.5 为移动Web应用开发提供了强大而灵活的工具,通过深入理解其核心组件、CSS样式和优化策略,开发者可以构建出符合现代移动设备需求的高性能应用。借助提供的Demo和说明文档,开发者可以轻松...

    JqueryMobile1.4.2最新版Demo

    在下载的 "JqueryMobile-1.4.2 Demo" 压缩包中,你可以找到各种示例页面和组件的实践应用,通过查看和分析这些例子,可以更直观地了解 jQuery Mobile 的功能和使用方法。结合实际项目需求,灵活运用这些知识,可以...

    jquery mobile注册登录例子

    jQuery Mobile 的一大特点就是使用AJAX技术进行页面间的平滑过渡,通过`data-ajax="false"`禁止AJAX加载,对于需要重新加载整个页面的情况,如登录成功跳转到主页面。 五、注册与登录逻辑 1. 后端接口:后端需提供...

    Jquery mobile 中文开发文档

    - **页面链接(Page Links)**:使用 `rel="external"` 或 `data-ajax="false"` 可以禁用 AJAX 导航,以跳转到外部页面或执行非 AJAX 请求。 - **导航历史(Navigation History)**:jQuery Mobile 会跟踪页面访问...

    jQuery mobile菜单式的相册

    总结来说,创建一个 jQuery Mobile 菜单式相册涉及以下步骤: 1. 设计符合 jQuery Mobile 标准的页面结构,包括菜单和相册页面。 2. 使用 `listview` 和 `collapsible` 组件构建菜单。 3. 使用 `grid` 布局展示相册...

    JQueryMobile与后台通信

    1. **页面生命周期**:jQuery Mobile中的页面事件,如pagebeforechange、pageinit、pagebeforeshow等,可以在特定的页面操作时执行AJAX请求。例如,在页面加载时获取数据: ```javascript $(document).on('...

    Jquery Mobile 1.4.2 for Asp.net

    jQuery Mobile的页面结构允许开发者创建多页应用,通过链接在页面间跳转。在本案例中,导航可能包括侧滑菜单或顶部工具栏,用户可以通过它们轻松访问不同功能或信息。导航元素如`&lt;a&gt;`标签可以通过`data-role="button...

    jquery mobile 实例

    在 jQuery Mobile 中,页面可以通过链接(`&lt;a&gt;` 标签)进行跳转。使用 `data-rel="next"` 或 `data-rel="back"` 可以控制前进或后退。此外,`data-url` 属性用于指定页面的 URL,这对于多页面应用的书签和历史记录...

    jQuery Mobile十大常用技巧

    可以在运行时使用`$.mobile.loadPage()`加载新页面,或使用`$.mobile.changePage()`进行页面跳转。同时,`$.mobile.removePage()`可以删除不再需要的页面。 9. **事件监听与处理**: jQuery Mobile提供了丰富的...

    jquery mobile Dome实例

    - `scripts.js`:用于处理页面加载、事件绑定等逻辑的JavaScript脚本。 - `images/`:可能包含应用所需的图片资源。 通过查看和学习这个实例,你可以了解如何将jQuery Mobile的组件和交互应用到实际项目中,如何...

    Jquery Mobile 类库

    - **jquery.mobile.js** 或 **jquery.mobile.min.js**:jQuery Mobile 的核心库,包含所有组件和功能。 - **jquery.mobile.css** 或 **jquery.mobile.min.css**:基础样式文件,定义了 jQuery Mobile 的默认样式。 -...

    JqueryMobile基础,初学者

    **jQuery Mobile 基础教程** jQuery Mobile 是一个强大的、基于 jQuery 库的框架,专为移动设备设计,提供了一套完整的用户界面 (UI) 模板和交互功能,使得开发者能够快速创建响应式和触控友好的网页应用。本教程...

Global site tag (gtag.js) - Google Analytics