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-corners	true \| false	规定按钮是否有圆角。
data-mini	true \| false	规定是否是小型按钮。
data-shadow	true \| false	规定按钮是否有阴影。

属性值	描述
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"	网格

定位页眉和页脚

放置页眉和页脚的方式有三种：

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基本元素

更多用于按钮的 data-* 属性

定位页眉和页脚