Jquery Mobile基本元素
Posted tuna
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery Mobile基本元素相关的知识，希望对你有一定的参考价值。
移动端框架
安装：
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 |
主题：
data-theme,取值为a,b,c,d,e;对应五种不同的主题，可以自己搭配使用
以上是关于Jquery Mobile基本元素的主要内容，如果未能解决你的问题，请参考以下文章