全栈工程师 09 笔记（jquery mobile）
jQuery Mobile 前端框架
- jQuery Mobile 是创建移动 web 应用程序的框架。
- jQuery Mobile 适用于所有流行的智能手机和平板电脑。
- jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
jQueryMobile 官网 http://jquerymobile.com/
jQueryMobile 帮助 http://api.jquerymobile.com/
w3school http://www.w3school.com.cn/jquerymobile/index.asp
jQuery 官网 http://jquery.com/
jQuery Mobile 安装
-
创建一个静态页面文件
touch index.html -
head头部引入
从 CDN 中加载 jQuery Mobile 百度CDN：
<!-- 网上加载 --> <head> <!-- 引入 jQuery Mobile 样式 --> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <!-- 引入 jQuery 库 --> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <!-- 引入 jQuery Mobile 库 --> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
下载 jQuery Mobile
将 jQuery Mobile 放于你的主机中,可以从 jQuerymobile.com下载该文件。
<head>
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>
设置屏幕宽度(两种)
1. <!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
2. <!-- 设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放 -->
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
div data-role属性：
data-role="page" 是在浏览器中显示的页面。
data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
data-role="main" 定义了页面的内容，比如文本， 图片，表单，按钮等。
"ui-content" 类用于在页面添加内边距和外边距。
data-role="footer" 用于创建页面底部工具条。
提示：在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。
在 jQuery Mobile 中添加页面
在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。 请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。 请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此
例子：
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<a href="#pagetwo">跳转到第二个页面</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">跳转到第一个页面</a>
</div>
</div>
为 jQuery Mobile 按钮
在 jQuery Mobile 中，按钮可通过三种方式创建：
使用 <button> 元素
使用 <input> 元素
使用带有 data-role="button" 的<a>元素
-
普通按钮：data-role="button"
<a href="#" data-role="button">按钮</a>
<a href="#pagetwo" data-role="button">转到页面二</a> -
行内按钮：
如果需要按钮适应其内容，或者如果需要两个或多个按钮并排显示，请添加 data-inline="true"
<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a> -
组合按钮：
<div data-role="controlgroup" data-type="horizontal">
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div> -
后退按钮：
<a href="#" data-role="button" data-rel="back">返回</a> -
更多用于按钮的 data-* 属性：值都是 true/false
data-corners 规定按钮是否有圆角
data-mini 规定是否是小型按钮
data-shadow 规定按钮是否有阴影
jQuery Mobile 页面切换效果
页面切换效果可被应用于任何使用 data-transition 属性的链接或表单提交：
<a href="#anylink" data-transition="slide">切换到第二个页面</a>
| 过度 | 描述 |
|---|---|
| fade | 默认。淡入到下一页 |
| flip | 从后向前翻转到下一页 |
| flow | 抛出当前页面，引入下一页 |
| pop | 像弹出窗口那样转到下一页 |
| slide | 从右向左滑动到下一页 |
| slidefade | 从右向左滑动并淡入到下一页 |
| slideup | 从下到上滑动到下一页 |
| slidedown | 从上到下滑动到下一页 |
| turn | 转向下一页 |
| none | 过渡无效果 |
想要页面从左向右滑动，而不是从右向左滑动，请使用带有 "reverse" 值的 data-direction 属性。在后退按钮上这是默认的。
<a href="#pagetwo" data-transition="slide" data-direction="reverse">切换</a>
** 页面底部的导航栏**
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="plus">更多</a></li>
<li><a href="#" data-icon="minus">更少</a></li>
<li><a href="#" data-icon="delete">删除</a></li>
<li><a href="#" data-icon="check">喜爱</a></li>
<li><a href="#" data-icon="info">信息</a></li>
</ul>
</div>
</div>
