做页面之前首先引用三个文件：

<link href="/Scripts/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>

因为JqueryMobile必须jquery的基础上才能使用，所以要先引用jquery.js，再引用JqueryMobile.js

布局

定义样式，效果之类的，都是通过data-xx来实现的，首先介绍data-role：

<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：整个页面，所有的元素都要在这个容器中

header：页面上方的工具栏，如标题、搜索框

content：页面内容

footer：页面底部的工具栏

页面跳转

JqueryMobile中的页面跳转：

定义两个div data-role="page"，分别加上不同的id

然后用a href="#id" 实现跳转

<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>
  </div>
</div>

如果希望以对话框的形式跳转

给a标签加上 data-rel="dialog"

过渡效果

通过个a标签加一个data-transition属性来实现，不写是默认淡出淡入

fade 默认。淡出淡入

flip 从后向前翻动到下一页

flow 抛出当前页面，引入下一页

slide 从右向左滑动到下一页

.....具体百度

如果希望slide从左向右滑动（相反的方向）, 再给a标签加一个属性：data-direction="reverse"

创建按钮

使用 <button> 元素
使用 <input> 元素
使用 <a data-role="button"></a>元素

推荐使用<a data-role="button"></a>来创建页面之间的链接

　　　　<input> 或 <button> 元素用于表单提交

行内按钮

按钮默认会占据整行的宽度，如果希望多个按钮并排显示，需要给按钮添加属性data-inline="true" (行内按钮)

组合按钮

给父级div加 data-role="controlgroup" ，并且添加data-type="horizontal | vertical"的其中一个值

<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-rel="back" 会成为后退按钮并忽略href属性。

图标按钮

给按钮添加属性 data-icon 会成为图标按钮，其取值为：

arrow-l 左箭头

delte 删除

search 搜索

...具体百度

同时图标的位置可以设置为上下左右，默认是左

通过属性data-iconpos设置，其取值有4个：

top 上

bottom 下

left 左

left 右

notext 只要图标不要文字

JqueryMobile学习记录一 安装 布局 页面跳转 过渡效果 创建按钮

布局