移动端框架
安装：
CDN：
<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>
或者：下载文件
页面：
<!-- HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观 --><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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"> //id属性用于唯一标识页面
<div data-role="header">
<h1>欢迎访问我的主页</h1>
</div>
<div data-role="content">
<p>Welcome!</p>
<a href="#pagetwo" data-rel="dialog">转到页面二</a> //实现两个页面之间的跳转，且pagetwo以对话框形式出现
</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>Goodbye!</p>
<a href="#pageone">转到页面一</a> //实现两个页面之间的跳转
</div> <div data-role="footer"> <h1>页脚文本</h1> </div> </div> </body> </html>
过渡：
<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>
data-transition：过渡方式
| 过渡 | 描述 |
|---|---|
| fade | 默认。淡入淡出到下一页。 |
| flip | 从后向前翻动到下一页。 |
| flow | 抛出当前页面，引入下一页。 |
| pop | 像弹出窗口那样转到下一页。 |
| slide | 从右向左滑动到下一页。 |
| slidefade | 从右向左滑动并淡入到下一页。 |
| slideup | 从下到上滑动到下一页。 |
| slidedown | 从上到下滑动到下一页。 |
| turn | 转向下一页。 |
| none | 无过渡效果。 |
data-direction：过渡方向 按钮：
jQuery Mobile 中的按钮可通过三种方法创建：
- 使用 <button> 元素（表单提交）
- 使用 <input> 元素（表单提交）
- 使用 data-role="button" 的 <a> 元素（页面间的链接）
-
<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a> <!-- data-inline="true" 按钮适应其他内容，不再独占一行-->
<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> <!-- data-role="controlgroup" 按钮组 data-type="horizontal" 排列方向，或vertical -->
后退按钮：
<a href="#" data-role="button" data-rel="back">返回</a> <!-- 会忽略href的值 -->
更多用于按钮的 data-* 属性
| 属性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 规定按钮是否有圆角。 |
| data-mini | true | false | 规定是否是小型按钮。 |
| data-shadow | true | false | 规定按钮是否有阴影。 |
按钮图标：
<a href="#anylink" data-role="button" data-icon="search">搜索</a>
| 属性值 | 描述 |
|---|---|
| data-icon="arrow-l" | 左箭头 |
| data-icon="arrow-r" | 右箭头 |
| data-icon="delete" | 删除 |
| data-icon="info" | 信息 |
| data-icon="home" | 首页 |
| data-icon="back" | 返回 |
| data-icon="search" | 搜索 |
| data-icon="grid" | 网格 |
定位图标：
<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a> <a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a> <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a> <a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>
只显示图标：
<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a> <!-- data-iconpos="notext" -->
定位页眉和页脚
放置页眉和页脚的方式有三种：
- Inline - 默认。页眉和页脚与页面内容位于行内。
- Fixed - 页面和页脚会留在页面顶部和底部。
- Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page content. It is also slightly see-through
<div data-role="header" data-position="inline"></div> <!-- 行内--> <div data-role="footer" data-position="inline"></div> <div data-role="header" data-position="fixed"></div> 固定 <div data-role="footer" data-position="fixed"></div> <div data-role="header" data-position="fixed" data-fullscreen="true"></div> 全屏，点击可使工具栏消失，适合播放器或者阅读器 <div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
导航栏：
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#anylink">首页</a></li>
<li><a href="#anylink">页面二</a></li>
<li><a href="#anylink">搜索</a></li>
</ul>
</div>
</div>
<!-- 其中的链接自动转换为按钮 -->
可折叠内容块：
<div data-role="collapsible"> <h1>点击我 - 我可以折叠！</h1> <p>我是可折叠的内容。</p> </div> <!-- 折叠标题 只能用h1~h6标题元素 -->
可折叠内容块集合-手风琴：
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>我是被展开的内容。</p>
</div>
</div>
<!-- data-role="collapsible-set" -->
网格：
类名控制
| 网格类 | 列 | 列宽度 | 对应 |
|---|---|---|---|
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e |
时间： 2024-11-03 15:15:39