码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-02-26 15:00:04      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:jquery mobile   手机浏览器   移动设备   移动浏览   浏览器   

<%@ 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>

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

标签:jquery mobile   手机浏览器   移动设备   移动浏览   浏览器   

原文地址:http://blog.csdn.net/responsecool/article/details/43952455

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!