jquerymobile跳转方法_jQuery Mobile页面跳转切换的几种方式

jQuery Mobile页面跳转切换的几种方式

涛哥伪专家管理系统

刷新

我是第一个页面

如有不懂，请加qq群：135430763，共同学习！

如有不懂。请加qq群：135430763，共同学习！

如有不懂，请加qq群：135430763。共同学习！

如有不懂。请加qq群：135430763，共同学习！

跳转到下一个页面

涛哥伪专家管理系统

涛哥伪专家管理系统

刷新

我是第二个页面

如有不懂，请加qq群：135430763，共同学习！

如有不懂。请加qq群：135430763，共同学习！

如有不懂，请加qq群：135430763，共同学习！

如有不懂。请加qq群：135430763。共同学习！

跳转到下一个页面

涛哥伪专家管理系统

涛哥伪专家管理系统

刷新

我是第三个页面

如有不懂，请加qq群：135430763。共同学习！

有几种方法来切换页面

1. $.mobile.changePage ('../path/to/page.html');

2. $.mobile.changePage ('other/page.html', 'fade', false, false);

能够设定页面切换效果，以及定义參数来控制页面是否记录历史等

3.var pageData = { url: formresults.php, type: 'get', data:

$('form#myform').serialize () };

$.mobile.changePage (pageData);

将页面url，类型，数据定义为变量来传递。

4.var previousPage = $.mobile.activePage.data ('ui.prevPage');

$.mobile.changePage ([previousPage, anotherPreviousPage], 'pop');

使用changepage来载入第三个页面

5.$.mobile.pageLoading (); /显示载入信息

$.mobile.pageLoading (true); //隐藏

pageLoading(boolean done)

函数显示或隐藏页面载入的提示信息。

能够在$.mobile.loadingMessage变量中设置。

6 .$.mobile.silentScroll (100);

silentScroll (number yPos): 在Y轴上(默觉得0)滚动页面而不须要触发scroll事件

跳转到第一个页面

涛哥伪专家管理系统

//home菜单的onclick事件的处理方法

function fun1(){

//激活nav1

$('#nav1').addClass('ui-btn-active');

//显示我home菜单的内容

$('#show1').css('display','');

//grid,search,info都隐藏

$('#show2').css('display','none');

$('#show3').css('display','none');

$('#show4').css('display','none');

//nav2，nav3，nav4 取消激活

$('#nav2').removeClass('ui-btn-active');

$('#nav3').removeClass('ui-btn-active');

$('#nav4').removeClass('ui-btn-active');

}

//grid菜单的onclick事件的处理方法

function fun2(){

//激活nav2

$('#nav2').addClass('ui-btn-active');

//显示我grid菜单的内容,home,search,info都隐藏

$('#show1').css('display','none');

$('#show2').css('display','');

$('#show3').css('display','none');

$('#show4').css('display','none');

//nav1。nav3。nav4 取消激活

$('#nav1').removeClass('ui-btn-active');

$('#nav3').removeClass('ui-btn-active');

$('#nav4').removeClass('ui-btn-active');

}

//search菜单的onclick事件的处理方法

function fun3(){

//激活nav3

$('#nav3').addClass('ui-btn-active');

$('#show1').css('display','none');

$('#show2').css('display','none');

//显示我search菜单的内容,home,grid,info都隐藏

$('#show3').css('display','');

$('#show4').css('display','none');

//nav1。nav2，nav4 取消激活

$('#nav2').removeClass('ui-btn-active');

$('#nav1').removeClass('ui-btn-active');

$('#nav4').removeClass('ui-btn-active');

}

//info菜单的onclick事件的处理方法

function fun4(){

$('#nav4').addClass('ui-btn-active');

$('#show1').css('display','none');

$('#show2').css('display','none');

$('#show3').css('display','none');

//显示我info菜单的内容,home,grid,search都隐藏

$('#show4').css('display','');

//nav1，nav2。nav3 取消激活

$('#nav2').removeClass('ui-btn-active');

$('#nav3').removeClass('ui-btn-active');

$('#nav1').removeClass('ui-btn-active');

}