本文实例讲述了jquery-mobile基础属性与用法。分享给大家供大家参考，具体如下：
写在前面
本文是根据w3c 学习轨迹，自己研习过程中记录下的笔记，只供自己学习轨迹记录之用，不喜勿喷。
0. 引入库
引入对应的文件：
<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>
一、页面结构说明
页面的三要素：
页面 data-role="page" //注意这个属性必须有 且为最外层div 否则事件注册的时候 会自动注册俩次
页头 data-role="header" //页面头部标题 或菜单区
内容 data-role="content" //页面内容
页尾 data-role="footer" //页尾标题 或菜单区
<div data-role="page" id="pageone"> <div data-role="header"> <h1>在此处写入标题</h1> </div> <div data-role="content"> <p>在此处写入正文</p> </div> <div data-role="footer"> <h1>在此处写入页脚文本</h1> </div> </div>
【1.页面全屏】
需要当前页面的头部和尾部留在最上和最下的时候 可以在 header 和 footer 的div 中 加上属性
data-position="fixed" data-fullscreen="true"
注意俩个必须同时加，否则将无任何效果
【2.页面标题居中】
必须在 header 或 footer的 div的下一级加上 h1 标签 其他标签无效
<div data-role="footer"> <h1>标题文字</h1> </div>
二、在HTML中创建多个页面
【页面内之间切换】
默认显示第一个页面
其他页面隐藏
<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>
【对话框】
如果页面中只用俩个page 默认第一个page 为主体页面
不会因为第二个标签a的data-rel 属性改变第一个页面成为对话框
当然如果有多个page，其他的也是可以更改的，但是第一个page 不会更改
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo" data-rel="dialog">转到对话框二</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>我是一个对话框！</h1>
</div>
<div data-role="content">
<p>对话框与普通页面不同，它显示在当前页面的顶端。它不会横跨整个页面宽度。对话框页眉中的图标 “X” 可关闭对话框。</p>
<a href="#pageone">转到页面一</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
三、多个页面之间的过渡效果
在a标签中添加属性
data-transition="slide"
当然可以添加滑动的反方向动作
data-direction="reverse"
fade 默认。淡入淡出到下一页。
flip 从后向前翻动到下一页。
flow 抛出当前页面，引入下一页。
pop 像弹出窗口那样转到下一页。
slide 从右向左滑动到下一页。
slidefade 从右向左滑动并淡入到下一页。
slideup 从下到上滑动到下一页。
slidedown 从上到下滑动到下一页。
turn 转向下一页。
none 无过渡效果。
四、按钮的使用
生成按钮的三种方式
<button>
<input type="submit/reset/button"/>
<a data-role="button"> (推荐)
【导航按钮】
data-role="button"
【行内按钮】
默认一个按钮占据一行，如果不想占据一行可以使用内联属性
data-inline="true"
【组合按钮】
data-role="controlgroup" data-type="horizontal/vertical"
<div data-role="controlgroup" data-type="horizontal"> <p>水平分组：</p> <a href="#" data-role="button">按钮 1</a> <a href="#" data-role="button">按钮 2</a> <a href="#" data-role="button">按钮 3</a> </div> <div data-role="controlgroup" data-type="vertical"> <p>垂直分组（默认）：</p> <a href="#" data-role="button">按钮 1</a> <a href="#" data-role="button">按钮 2</a> <a href="#" data-role="button">按钮 3</a> </div>
【后退按钮】（会自动忽略 href属性）
data-rel="back"
data-corners true | false
规定按钮是否有圆角。默认true
data-mini true | false
规定是否是小型按钮。默认false
data-shadow true | false
规定按钮是否有阴影。默认true
五、图标的使用
为按钮添加图标 只要加上如下属性 即可
data-icon="search"
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" 网格
图标定位
data-iconpos="top/left/right/bottom" 默认left
只要图标的话：
将上述属性设置为 notext
data-iconpos="notext"
六、工具栏的使用
【页眉】
向文字的左右俩测各加一个按钮
<div data-role="page"> <div data-role="header"> <a href="#" data-role="button" data-icon="home">首页</a> <h1>欢迎访问我的主页</h1> <a href="#" data-role="button" data-icon="search">搜索</a> </div> </div>
[单个按钮居右]（默认居左）
如果只加一个按钮，不管是加在h1的前面还是后面都会默认放在左侧，如果想放在右侧，需在按钮上添加
如下属性
class="ui-btn-right"
[注意]：页眉只可以包含一到俩个按钮，页脚无限制
【页脚】
页脚和页眉不同，他省去了一些内联样式 且不会居中
如果需要居中，则可以在footer上添加
class="ui-btn" (并且只能在footer上添加)
当然也可以选择水平或垂直的组合方式
<div data-role="footer" class="ui-btn" > <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="plus">转播到新浪微博</a> <a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a> <a href="#" data-role="button" data-icon="plus">转播到QQ空间</a> </div> </div>
【页眉和页脚的定位】
[inline] 默认
页眉页脚与页面内容平行 即内容多高 页眉和页脚随内容的高度