jquery mobile同一个页面多个page跳转

jquery mobile中,如果存在多个data-role="page"区,默认只显示第一个,所以其它的我们就可以通过跳转的方式进入。

说明

一个页面中有多个page <div id="second" data-role="page">  ,可以加上id属性,然后在当前页面别的page中用<a href="#second">第一</a>
    跳转到该区域

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="lib/jquery.mobile-1.4.5.min.css" />
<script src="lib/jquery-1.11.1.min.js"></script>
<script src="lib/jquery.mobile-1.4.5.min.js"></script>
<script>
	/*
	 * 官方演示:http://demos.jquerymobile.com/1.4.5/
	 * 官方API介绍:http://api.jquerymobile.com/data-attribute/  各功能的详细参数都在这里面
	 * 中文的:http://www.w3school.com.cn/jquerymobile/jquerymobile_buttons.asp
	
	* data-role类及功能:
		类:
	  	page[页面]、header[顶部]、content[内容区]、footer[底部]
	  	button[按钮]
	  	
	  	功能:
	  	back[后退到上页]
	  	
	* 动画效果
		data-transition:
		参数:fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none
	 
    * data-theme:设置样式,有a,b两个值,a为默认值,为灰色,b为黑色
    * data-position设置位置,属性:fixed,在data-role="header"和data-role="footer"中使用后,会将头底和底部固定在上下位置
    
    * 一个页面中有多个page <div id="second" data-role="page">  ,可以加上id属性,然后在当前页面别的page中用<a href="#second">第一</a>
    	跳转到该区域
    
    */
</script>    
</head>
<body>
	<div id="pag" data-role="page">
		<div data-role="header" data-theme="b" data-position="fixed">
			<h3>第一个视图</h3>
		</div>
		<div data-role="content">
			<a href="#second" data-role="button" data-transition="filp">进入第二</a>
		</div>
		<div data-role="footer" data-theme="a" data-position="fixed">
			<h3>footer</h3>
		</div>
	</div>
	
	
	<div id="second" data-role="page">
		<div data-role="header" data-theme="b" data-position="fixed">
			<h3>第二个视图</h3>
		</div>
		<div data-role="content">
			<a href="#" data-rel="back" data-transition="slide" class="ui-btn ui-shadow ui-corner-all">返回第一</a>
		</div>
		<div data-role="footer" data-theme="a" data-position="fixed">
			<h3>footer</h3>
		</div>
	</div>
	
</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND