jQuery mobile 学习01 基本认识和使用

浏览数：41 / 时间：2015年06月09日

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html> 
<html>
<head>
	<title>Page Title</title>
	<%--初始化移动浏览显示，默认不缩放 --%>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 
	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
	什么是viewport？（中文意思为”视区“）
	手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中，通常这个虚拟的"窗口"(viewport)比屏幕宽，
	这样就不用吧每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页布局），用户可以通过平移、缩放来看网页的不同部分。
	移动版的safari浏览器最新引进了viewport这个meta tag，让网页的开发者来控制viewport的大小和缩放，其他手机浏览器页基本支持。
	width：viewport的宽度		deivce-width：自动检测移动设备的宽度
	height：viewport的高度		device-height：自动检测移动设备的高度
	initial-scale：初始缩放比例，也就是当页面第一次load的时候缩放比例。  值为1.0是指未经缩放的web文档
	user-scalable：用户是否可以手动缩放		值为yes是允许用户的手动缩放，no是不允许用户的手动缩放
	maximum-scale：允许用户缩放到的最大比例      取值范围为 0.25~10.0
	minimum-scale：允许用户缩放到的最小比例
	
	webkit是一个开源的浏览器内核引擎。与之相对应的引擎有Gecko（Mozilla Firefox等使用）和Trident（也称为MSHTML，IE使用）
	
	移动屏幕尺寸比PC小很多，webkit浏览器会将一个较大的”虚拟“窗口映射到移动设备的屏幕上，默认的虚拟窗口宽度是980px（这是目前大部分网站标准宽度），
	然后按照一定的比例（3:1或2:1）进行缩放，也就是当我们加载一个普通网页的时候，webkit会先以980px的宽度加下网页，然后在缩小为490像素的宽度，这是全局缩小。
	也就是页面上的所有元素都会缩小。
	 -->
	<link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.css" />
	<script src="jqm/jquery-1.11.2.js"></script>
	<script src="jqm/jquery.mobile-1.4.5.js"></script>
	
	
	<!-- 
		页面的跳转效果可以通过在超级链接上添加data-transition属性
		值如下：
		fade：默认值，渐变褪色的动画效果
		slide：从右到左滑动的动画效果
		slideup：向上滑动的动画效果
		slidedown：向下滑动的动画效果
		pop：以弹出的效果打开页面
		flip：旧页飞出，新页飞入的动画效果
	 -->

</head>
<body>
	<div data-role="page" id="index" data-transition="slide">
		<div data-role="header">
			<h1>第一个页面</h1>
		</div>
		<div data-role="main" class="ui-content">
			<p>我是第一个页面的内容</p>
			<br/>
			<br/>
			<br/>
			<a href="#page2" data-transition="slide">点我跳转到页面二</a>
			<br/>
			<br/>
			<br/>
			<a href="#page3" data-transition="slideup">点我跳转到页面三</a>
			<br/>
			<br/>
			<br/>
			<br/>
		</div>
		<div data-role="footer" data->
			<h2>首页的底部菜单</h2>
		</div>
	</div>
	
	<div data-role="page" id="page2">
		<div data-role="header">
			<h1>第二个页面显示了</h1>
		</div>
		<div data-role="main" class="ui-content">
			<p>我是第二个页面的内容部分哦</p>
			<br>
			<br>
			<br>
			<a href="#index" data-transition="slidedown">跳转到首页</a>
			<br>
			<br>
			<br>
			<a href="#page3" data-transition="pop">跳转到第三个页面</a>
			<br>
			<br>
			<br>
			<br>
			<br>
		</div>
		<div data-role="footer">
			<h2>第二个页面的底部菜单栏</h2>
		</div>
	</div>
	
	
	<div data-role="page" id="page3">
		<div data-role="header">
			<h1>页面三</h1>
		</div>
		<div data-role="main" class="ui-content">
			<p>页面三的内容</p>
			<br>
			<br>
			<a href="#page2" data-transition="fade">进入页面2</a>
			<br>
			<br>
			<br>
			<a href="#index" data-transition="flip">进入首页</a>
			<br>
			<br>
		</div>
		<div data-role="footer">
			<h3>页面三的底部</h3>
		</div>
	</div>
	
	
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。