jQuery Mobile页面跳转切换的几种方式 - 推酷
jQuery Mobile页面跳转切换的几种方式
jQuery Mobile在移动开发中越来越受到欢迎。而他的各个版本也在持续不断的更新中。同样的我也很喜欢它，它加快了我们开发HTML5的速度。
同时又具备jQuery一样的操作方法。学起来也是相当的容易。所以这一片文章就是介绍jQuery Mobile的页面跳转的。
少说废话，看源码:
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN&&
&title&jQuery Mobile页面跳转切换的几种方式&/title&
&meta http-equiv=&keywords& content=&keyword1,keyword2,keyword3&&
&meta http-equiv=&description& content=&this is my page&&
&meta http-equiv=&content-type& content=&text/ charset=UTF-8&&
&!--&link rel=&stylesheet& type=&text/css& href=&./styles.css&&--&
&link rel=&stylesheet& href=&/mobile/1.4.2/jquery.mobile-1.4.2.min.css&&
&script src=&/jquery-1.10.2.min.js&&&/script&
&script src=&/mobile/1.4.2/jquery.mobile-1.4.2.min.js&&&/script&
&!--&link rel=&stylesheet& type=&text/css& href=&../jQuery/jquery.mobile-1.3.2.min.css&&
&script type=&text/javascript& src=&../jQuery/jquery-1.8.3.min.js&&&/script&
&script type=&text/javascript& src=&../jQuery/jquery.mobile-1.3.2.min.js&&&/script&
--&&/head&
&div data-role=&page& id=&welPage& data-theme=&a&&
&div data-role=&header& data-position=&fixed& data-theme=&a&&
涛哥伪专家管理系统
&a href=&javascript:location.reload();& data-role=&button& class=&ui-btn-right& data-icon=&refresh&&刷新&/a&
&div data-role=&content&&
&p&我是第一个页面&/p&
如有不懂，请加qq群：，共同学习！
如有不懂，请加qq群：，共同学习！
如有不懂，请加qq群：，共同学习！
如有不懂，请加qq群：，共同学习！
&a href=&#nextPage& &跳转到下一个页面&/a&
&div id=&footer& data-role=&footer& data-theme=&a& data-position=&fixed&&
涛哥伪专家管理系统
&div data-role=&page& id=&nextPage& data-theme=&a&&
&div data-role=&header& data-position=&fixed& data-theme=&a&&
涛哥伪专家管理系统
&a href=&javascript:location.reload();& data-role=&button& class=&ui-btn-right& data-icon=&refresh&&刷新&/a&
&div data-role=&content&&
&p&我是第二个页面&/p&
如有不懂，请加qq群：，共同学习！
如有不懂，请加qq群：，共同学习！
如有不懂，请加qq群：，共同学习！
如有不懂，请加qq群：，共同学习！
&a href=&#goPage& &跳转到下一个页面&/a&
&div id=&footer& data-role=&footer& data-theme=&a& data-position=&fixed&&
涛哥伪专家管理系统
&div data-role=&page& id=&goPage& data-theme=&a&&
&div data-role=&header& data-position=&fixed& data-theme=&a&&
涛哥伪专家管理系统
&a href=&javascript:location.reload();& data-role=&button& class=&ui-btn-right& data-icon=&refresh&&刷新&/a&
&div data-role=&content&&
&p&我是第三个页面&/p&
如有不懂，请加qq群：，共同学习！
&p&有几种方法来切换页面&/p&
&p&1. $.mobile.changePage ('../path/to/page.html');&/p&
&p&2. $.mobile.changePage ('other/page.html', 'fade', false, false);&/p&
&p&可以设定页面切换效果，以及定义参数来控制页面是否记录历史等&/p&
&p&3.var pageData = { url: formresults.php, type: 'get', data:&/p&
&p&$('form#myform').serialize () };&/p&
&p&$.mobile.changePage (pageData);&/p&
&p&将页面url，类型，数据定义为变量来传递。&/p&
&p&4.var previousPage = $.mobile.activePage.data ('ui.prevPage');&/p&
&p&$.mobile.changePage ([previousPage, anotherPreviousPage], 'pop');&/p&
&p&使用changepage来加载第三个页面&/p&
&p&5.$.mobile.pageLoading ();
/显示加载信息&/p&
&p&$.mobile.pageLoading (true); //隐藏&/p&
&p&pageLoading(boolean done)&/p&
&p&函数显示或隐藏页面加载的提示信息。可以在$.mobile.loadingMessage变量中设置。&/p&
&p&6 .$.mobile.silentScroll (100);&/p&
&p&silentScroll (number yPos): 在Y轴上（默认为0）滚动页面而不需要触发scroll事件&/p&
&a href=&#welPage& &跳转到第一个页面&/a&
&div id=&footer& data-role=&footer& data-theme=&a& data-position=&fixed&&
涛哥伪专家管理系统
&script type=&text/javascript&&
//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');
其他方法：
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事件
OK,到此结束了，欢迎大家关注我的个人博客。
如有不懂，请大家加入qq群：
共同学习！
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致您当前的位置：&&&&&正文
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码（带平滑移动的效果）
比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用&a href="mao.aspx#s"& 就可实现跳转到指定位置 现在为了增加用户体验 跳转到页面后 平滑移动到该位置 怎么做呢 其实也很简单啦 那边传递过来一个 要跳转到哪个div的参数就行 先上一段 页面获取参数的 通用js
//根据参数名获得该参数 pname等于想要的参数名 function getParam(pname) { var params = location.search.substr(1); // 获取参数 平且去掉？ var ArrParam = params.split('&'); if (ArrParam.length == 1) { //只有一个参数的情况 return params.split('='); } else { //多个参数参数的情况 for (var i = 0; i & ArrParam. i++) { if (ArrParam[i].split('=') == pname) { return ArrParam[i].split('='); } } } }
代码很简单 就是根据当前url 获取其中想要的参数的值
$(function() { var mao = $("#" + getParam("m")); //获得锚点 if (mao.length & 0) {//判断对象是否存在 var pos = mao.offset(). var poshigh = mao.height(); $("html,body").animate({ scrollTop: pos-poshigh-30 }, 3000); } }); 上面就是平滑移动到 想要的位置 pos-poshigh-30 这个是可以调整的 我是觉得减到30毕竟好~~ 很简单的效果 不上代码例子了 自己写着玩~--博才网
下页更精彩：
点击排行榜
〖〗链接地址：
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码（带平滑移动的效果）由网友原创或转发，若基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码（带平滑移动的效果）侵犯到您的权益，请及时通知我们（QQ：），谢谢！
微信查看最新信息微信扫一扫或用微信搜索微信号：hbrc-com
安卓手机客户端更省流量手机扫描下载或者直接
猜你还喜欢的文章
热点文章排行榜
• 版权所有 Copyright 2011 All rights reserved.