1.它是什么
jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
在线教程：http://www.w3school.com.cn/jquerymobile/index.asp
官方下载：http://jquerymobile.com/
2. 广泛应用
- 单页面多应用
- 混合APP开发
3. 如何使用
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
/*
content属性值 :
width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
*/
<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
<script src="http://code.jquery.com/jquery-[version].min.js"></script>
<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
官网DEMO地址：http://demos.jquerymobile.com/1.4.5/
- 页面
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
例子解释：
data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏
备注：在这些容器中，您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。
提示：HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。
- 单页面多应用
- 1.在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。
- 2.请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此
<body>
<!-- Start of first page -->
<div data-role="page" id="pageone">
<div data-role="header">
<h1>pageone</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#pagetwo">to pagetwo</a></p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
<div data-role="navbar">
<ul>
<li><a href="#pageone">页面一</a></li>
<li><a href="#pagetwo">页面二</a></li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of first page -->
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>pagetwo</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#pageone">to pageone</a></p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
<div data-role="navbar">
<ul>
<li><a href="#pageone">页面一</a></li>
<li><a href="#pagetwo">页面二</a></li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->
</body>
- 在 jQuery Mobile 中创建按钮
jQuery Mobile 中的按钮可通过三种方法创建：- 使用 <button> 元素
- 使用 <input> 元素
- 使用 data-role="button" 的
<a>元素
<button>按钮</button>
<input type="button" value="按钮">
<a href="#" data-role="button">按钮</a>
- 在 jQuery Mobile 过渡效果
jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。
注释：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换：
浏览器支持
Internet Explorer 10 支持 3D 转换（更早的版本不支持）
Opera 仍然不支持 3D 转换
过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交：
<a href="#anylink" data-transition="slide">滑动到页面二</a>
查看官方：http://www.w3school.com.cn/jquerymobile/jquerymobile_transitions.asp
- jQuery Mobile 事件
您能够在 jQuery Mobile 中使用任何标准的 jQuery 事件。
此外，jQuery Mobile 还提供若干种为移动浏览定制的事件： - 触摸事件 - 当用户触摸屏幕时触发（敲击和滑动）
- 滚动事件 - 当上下滚动时触发
- 方向事件 - 当设备垂直或水平旋转时触发
- 页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发
如需关于所有 jQuery Mobile 事件的完整信息，请访问我们的 jQuery Mobile 事件参考手册。
以上使用方法仅仅是一部分，更多的使用方法请查阅官方。
官网 ：http://jquerymobile.com/
DEMO：http://demos.jquerymobile.com/1.4.5/
在线教程：http://www.w3school.com.cn/jquerymobile/index.asp
网友评论