页面
页面使用例子
<body>
<div data-role="page">
<div data-role="header">
<h1>欢迎访问我的主页 </h1>
</div>
<div data-role="content">
<p>我是一名移动开发者！</p>
</div>
<div data-role="footer">
<h1> 页脚文本</h1>
</div>
</div>
</body>
例子解释
- data-role="page" 是显示在浏览器中的页面
- data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
- data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
- data-role="footer" 创建页面底部的工具栏
多页面 和 页面跳转
例子
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo">转到页面二</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">转到页面一</a>
<a href="externalfile.html">转到外部页面</a>
<a href="#pageone" data-rel="dialog">以弹窗的形式打开页面一</a>
</div>
</div>
例子解释
- 通过ID可以区分不同页面
- 在链接使用 #页面名 可以跳转到不同页面
- 如果需要跳转到外部页面的话 需要指定页面地址
- 使用 ** data-rel="dialog" ** 参数可以 以弹框的形式打开新页面
页面过渡效果
浏览器支持
- Internet Explorer 10 支持 3D 转换（更早的版本不支持）
- Opera 仍然不支持 3D 转换
主要是通过 data-transition属性来实现的
例子
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="content">
<p>点击链接来查看滑动效果（从右向左滑动到下一页） </p>
<a href="#pagetwo" data-transition="slide">滑动到页面二</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>欢迎来到我的主页 </h1>
</div>
<div data-role="content">
<p>点击链接来查看反向的滑动效果（从左向右滑动到前一页）</p>
<a href="#pageone" data-transition="slide" data-direction="reverse">滑动到页面一（反向）</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>
例子解释
- **data-transition="slide" ** 设置页面切换效果， 从右向左滑动到下一页。
- data-direction="reverse" 通过设置 reverse 可以进行反方向切换。
- 页面默认是淡入淡出到下一页， 即 fade；
data-transition 可使用的值
| 过渡 | 描述 |
|---|---|
| fade | 默认。淡入淡出到下一页。 |
| flip | 从后向前翻动到下一页。 |
| flow | 抛出当前页面，引入下一页。 |
| pop | 像弹出窗口那样转到下一页。 |
| slide | 从右向左滑动到下一页。 |
| slidefade | 从右向左滑动并淡入到下一页。 |
| slideup | 从下到上滑动到下一页。 |
| slidedown | 从上到下滑动到下一页。 |
| turn | 转向下一页。 |
| none | 无过渡效果。 |
按钮
jQuery Mobile 中的按钮可通过三种方法创建：
使用 <button> 元素
<button>按钮</button>
使用 <input> 元素
<input type="button" value="按钮">
使用 data-role="button" 的 <a> 元素
<a href="#" data-role="button">按钮</a>
注意：
在 jQuery Mobile 中，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。我们推荐您使用带有 data-role="button" 的 < a> 元素在页面间进行链接，使用 <input> 或 <button> 元素进行表单提交。
导航按钮
如需通过按钮来链接页面，请使用 data-role="button" 的 < a > 元素
<a href="#pagetwo"data-role="button">转到页面二</a>
行内按钮
默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加 data-inline="true"
<a href="#pagetwo" data-role="button"data-inline="true">转到页面二</a>
组合按钮
jQuery Mobile 提供了对按钮进行组合的简单方法。
请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮
<divdata-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>
提示：默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角，在组合后就创造出了漂亮的外观。
后退按钮
如需创建后退按钮，请使用 data-rel="back" 属性（会忽略锚的 href 值）
<a href="#" data-role="button" data-rel="back" >返回</a>
按钮实例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>
这里是导航按钮
</h1>
</div>
<div data-role="content">
<a href="#pagetwo" data-role="button" data-transition="slide">
转到页面二
</a>
</div>
<div data-role="footer">
<h1>
这里是导航按钮END
</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>
这里是行内按钮
</h1>
</div>
<div data-role="content">
<p>
再见！
</p>
<a href="#pagethree" data-role="button" data-inline="true">
转到页面三
</a>
<a href="#pagethree" data-role="button" data-inline="true">
转到页面三
</a>
<a href="#pagethree" data-role="button" data-inline="true">
转到页面三
</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="pagethree">
<div data-role="header">
<h1>
分组按钮
</h1>
</div>
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
<p>
水平分组：
</p>
<a href="#pagefour" data-role="button">
转到页面四
</a>
<a href="#pagefour" data-role="button">
转到页面四
</a>
<a href="#pagefour" data-role="button">
转到页面四
</a>
</div>
<br>
<div data-role="controlgroup" data-type="vertical">
<p>
垂直分组（默认）：
</p>
<a href="#pagefour" data-role="button">
转到页面四
</a>
<a href="#pagefour" data-role="button">
转到页面四
</a>
<a href="#pagefour" data-role="button">
转到页面四
</a>
</div>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="pagefour">
<div data-role="header">
<h1>
后退按钮实例
</h1>
</div>
<div data-role="content">
<a href="#" data-role="button" data-rel="back">
后退
</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
</body>
</html>
用于按钮的 data-*常用属性
|属性 | 值 | 描述|
|:---||:---||:---|
|data-corners | true OR false | 规定按钮是否有圆角。 |
|data-mini | true OR false | 规定是否是小型按钮。 |
|data-shadow | true OR false | 规定按钮是否有阴影。 |
jQuery Mobile Data 属性
http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp
按钮图标
如需向您的按钮添加图标，请使用 data-icon 属性
语法
<a href="#anylink" data-role="button" data-icon="search">搜索</a>
<button data-icon="search">test</button>
<input type='button' data-icon="search" value='test' />
例子
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>
带有图标的按钮
</h1>
</div>
<div data-role="content">
<a href="#home" data-role="button" data-inline="true" data-rel="dialog" data-icon="home">
首页
</a>
<a href="#options" data-role="button" data-inline="true" data-rel="dialog" data-icon="grid">
选项
</a>
<a href="#search" data-role="button" data-inline="true" data-rel="dialog" data-icon="search">
搜索
</a>
<a href="#pagetwo" data-role="button" data-icon="arrow-r" data-iconpos="right">
下一页
</a>
<a href="#info" data-role="button" data-rel="dialog" data-icon="info" data-iconpos="top">
信息
</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>
带有图标的按钮
</h1>
</div>
<div data-role="content">
<a href="#pageone" data-role="button" data-icon="back" data-inline="true">
返回
</a>
<a href="#pageone" data-role="button" data-icon="arrow-l">
上一页
</a>
<a href="#info" data-role="button" data-rel="dialog" data-icon="info" data-iconpos="top">
信息
</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="home">
<div data-role="header">
<h1>
首页
</h1>
</div>
<div data-role="content">
<p>
家是心之所在！
</p>
<a href="#pageone" data-role="button" data-inline="true" data-icon="back">
返回
</a>
<a href="#" data-role="button" data-icon="search" data-iconpos="notext">只显示图标</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="options">
<div data-role="header">
<h1>
选项
</h1>
</div>
<div data-role="content">
<p>
您刚敲击了选项按钮！
</p>
<a href="#pageone" data-role="button" data-inline="true" data-icon="back">
返回
</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="search">
<div data-role="header">
<h1>
搜索
</h1>
</div>
<div data-role="content">
<p>
没有搜索结果！
</p>
<a href="#pageone" data-role="button" data-inline="true" data-icon="back">
返回
</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="info">
<div data-role="header">
<h1>
信息
</h1>
</div>
<div data-role="content">
<p>
jQuery Mobile 很有趣！
</p>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
</body>
</html>
例子解析
- ** data-icon="back"** 用来指定图标类型
- ** data-iconpos="top"** 用来指定图标被放置的位置（top， right，bottom，left ）
- ** data-iconpos="notext"** 可以让按钮只显示图标不显示文字
图标参考手册
http://www.runoob.com/jquerymobile/jquerymobile-ref-icons.html
