专栏首页业余草jQuery Mobile页面跳转切换的几种方式

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

jQuery Mobile在移动开发中越来越受到欢迎。而他的各个版本也在持续不断的更新中。同样的我也很喜欢它,它加快了我们开发HTML5的速度。 同时又具备jQuery一样的操作方法。学起来也是相当的容易。所以这一片文章就是介绍jQuery Mobile的页面跳转的。 少说废话,看源码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <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/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="http://code.jquery.com/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>
  
  <body>
    <div data-role="page" id="welPage" data-theme="a">
		<div data-role="header" data-position="fixed" data-theme="a">
			<h1>
				涛哥伪专家管理系统
			</h1>
			<a href="javascript:location.reload();" data-role="button" class="ui-btn-right" data-icon="refresh">刷新</a>
		</div>

		<div data-role="content">
			<p>我是第一个页面</p>
			<p>
				如有不懂,请加qq群:135430763,共同学习!
			</p>
			<p>
				如有不懂,请加qq群:135430763,共同学习!
			</p>
			<p>
				如有不懂,请加qq群:135430763,共同学习!
			</p>
			<p>
				如有不懂,请加qq群:135430763,共同学习!
			</p>
			<a href="#nextPage" >跳转到下一个页面</a>
		</div>
		
		<div id="footer" data-role="footer" data-theme="a" data-position="fixed">
			<h1>
				涛哥伪专家管理系统
			</h1>
		</div>
	</div>
	
	<div data-role="page" id="nextPage" data-theme="a">
		<div data-role="header" data-position="fixed" data-theme="a">
			<h1>
				涛哥伪专家管理系统
			</h1>
			<a href="javascript:location.reload();" data-role="button" class="ui-btn-right" data-icon="refresh">刷新</a>
		</div>

		<div data-role="content">
			<p>我是第二个页面</p>
			<p>
				如有不懂,请加qq群:135430763,共同学习!
			</p>
			<p>
				如有不懂,请加qq群:135430763,共同学习!
			</p>
			<p>
				如有不懂,请加qq群:135430763,共同学习!
			</p>
			<p>
				如有不懂,请加qq群:135430763,共同学习!
			</p>
			<a href="#goPage" >跳转到下一个页面</a>
		</div>
		
		<div id="footer" data-role="footer" data-theme="a" data-position="fixed">
			<h1>
				涛哥伪专家管理系统
			</h1>
		</div>
	</div>
	
	<div data-role="page" id="goPage" data-theme="a">
		<div data-role="header" data-position="fixed" data-theme="a">
			<h1>
				涛哥伪专家管理系统
			</h1>
			<a href="javascript:location.reload();" data-role="button" class="ui-btn-right" data-icon="refresh">刷新</a>
		</div>

		<div data-role="content">
			<p>我是第三个页面</p>
			<p>
				如有不懂,请加qq群:135430763,共同学习!
			</p>
			<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>
		
		<div id="footer" data-role="footer" data-theme="a" data-position="fixed">
			<h1>
				涛哥伪专家管理系统
			</h1>
		</div>
	</div>
	<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');
		}
	</script>
    
  </body>
</html>

其他方法:

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,到此结束了,欢迎大家关注我的个人博客。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5的data-*自定义属性

    HTML5增加了一项新功能是自定义数据属性,也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我...

    业余草
  • jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo

    我有一个水货的上司,大家都是知道的。所以我就只能自学了,今天我给大家带来的是jQuery Mobile 模仿iphone 手...

    业余草
  • jQuery Mobile开发的新闻阅读器,适应iphone和android手机

    程序员都很赖,你懂的! 我们经常上新浪,腾讯,雅虎等各大网站上面看新闻,他们也都各自推出了自家的手机新闻阅读器。今天我自...

    业余草
  • 从SAP最佳业务实践看企业管理(92)-PP-248生产订单拆分

    尽管工厂管理存在一般的管理项目,但工厂内部不同部门之间仍存在着不同的期望。有一句话说得非常好:“屁股决定思想”。它的意思是,不同的人思考问题的角度因为其所处位置...

    SAP最佳业务实践
  • dataTables 使用ajax 和服务器处理 获取数据

    Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 官网:https://datatables....

    Alone88
  • 一篇文章理清Python多线程之同步条件,信号量和队列

    今天这篇文章大概介绍下python多线程中的同步条件Event,信号量(Semaphore)和队列(queue),这是我们多线程系列的最后一篇文章,以后将会进入...

    南山烟雨
  • 使用jQuery操作data-attr的注意事项

    data-attr是HTML5里面的一个新属性(其实这东西都好多年了),方便CSS\JS去读取DOM上面的属性值。

    libo1106
  • FPGA乒乓操作你了解吗? 还不赶快来看

    anytao
  • 电商前端交易型系统设计原则

    个人认为设计系统要因场景因时间而异,一个系统不是一下子就设计的非常完美,在有限的资源情况下一定是先解决当下最核心的问题,并预测/发现未来可能出现的问题,一步步解...

    牛嗷嗷
  • 更好用的 Python 任务自动化工具:nox 官方教程

    花下猫语:之前写 tox教程 的时候,我们曾提到过 nox,它是后起之秀,在某些方面比 tox 更好用,我就曾不止一次看到别人在推荐它。在翻看文档的时候,我突然...

    Python猫

扫码关注云+社区

领取腾讯云代金券