首页 > 代码库 > 皓轩的jquery mobile之路（二）
皓轩的jquery mobile之路（二）
jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
编写代码要注意最外层div需要添加data-role="page" ，标题需要添加data-role="header"，内容需要添加data-role="content"，底部需要添加data-role="footer"。
代码：
----------------------------------------------------------
<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>
----------------------------------------------------------
jQuery Mobile 页面切换效果
1. 页面切换效果可被应用于任何使用 data-transition 属性的链接或表单提交
代码：
<a href="http://www.mamicode.com/#div2" data-transition="slide">切换到div2</a>
<a href="http://www.mamicode.com/#div1" data-transition="slide">切换到div1</a>
data-transition的参数：
fade：默认淡入到下一页；flip：从后向前翻转到下一页；flow：前一页缩小向左抛出到下一页；pop：弹出进入下一页； slide：从右到左滑动到下一页
slidefade：从右到左滑动并淡入到下一页；slideup：从下到上滑动到下一页；slidedown：从上到下滑动到下一页；turn：翻到下一页；none：去除效果。
2. data-transition的所有效果都支持退后功能需添加data-direction="reverse"
代码：
<a href="http://www.mamicode.com/#div2" data-transition="flow">切换到div2</a>
<a href="http://www.mamicode.com/#div1" data-transition="flow" data-direction="reverse">切换到div1</a>
jQuery Mobile 按钮
1. 在 jQuery Mobile 中，按钮可通过三种方式创建：
- 使用 <button> 元素
- 使用<input type="button" value="http://www.mamicode.com/按钮"> 元素
- 使用带有 <a href="http://www.mamicode.com/#" data-role="button">按钮</a> 的 <a> 元素
在什么场景用那种按钮：
data-role="button" 用于页面之间的链接 input 和button用于表单提交
代码：
<a href="http://www.mamicode.com/#div2" data-role="button">访问第二个页面</a>
<a href="http://www.mamicode.com/#div1" data-role="button">访问第二个页面</a>
<div data-role="page" id="div1">
<div data-role="header">
<h1>页面标题</h1>
</div>
<div data-role="content">
<p><a href="http://www.mamicode.com/#div2" data-role="button">访问第二个页面</a></p>
</div>
<div data-role="footer">
<h1>页面底部内容</h1>
</div>
</div>
<div data-role="page" id="div2">
<div data-role="header">
<h1>页面标题</h1>
</div>
<div data-role="content">
<p><a href="http://www.mamicode.com/#div1" data-role="button">访问第二个页面</a></p>
</div>
<div data-role="footer">
<h1>页面底部内容</h1>
</div>
</div>
2. 按钮默认情况下都是占满屏幕宽度，所以提供了data-inline="true"让按钮的宽度和字一样宽
<a href="http://www.mamicode.com/#pagetwo" data-role="button" data-inline="true">按钮宽度和我一样</a>
3. jqmobile组合按钮，组合顾名思义是几个按钮拼接在一起，那么就有两种情况，一种是一个按钮占一行（默认），一种是几个按钮占一行；所以提供data-role="controlgroup" 属性和 data-type="horizontal|vertical"对按钮布局。
代码：
<div data-role="page" id="pageone">
<div data-role="header">
<h1>组合按钮</h1>
</div>
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
<p>水平组合按钮:</p>
<a href="http://www.mamicode.com/#" data-role="button">按钮 1</a>
<a href="http://www.mamicode.com/#" data-role="button">按钮 2</a>
<a href="http://www.mamicode.com/#" data-role="button">按钮 3</a>
</div><br>
<div data-role="controlgroup" data-type="vertical">
<p>垂直组合按钮 (默认):</p>
<a href="http://www.mamicode.com/#" data-role="button">按钮 1</a>
<a href="http://www.mamicode.com/#" data-role="button">按钮 2</a>
<a href="http://www.mamicode.com/#" data-role="button">按钮 3</a>
</div>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
4. jqmobile后退按钮需要添加 data-rel="back"。
代码：
<a href="http://www.mamicode.com/#" data-role="button" data-rel="back">返回</a>
5. 更多用于按钮的data-*属性
data-corners="true/false" 是否让按钮圆角
data-mini="true/false" 规定按钮是否最小
data-shadow="/true/false" 按钮是否有阴影
6. jqmobile按钮图标 添加 data-icon="”
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="http://www.mamicode.com/#anylink" data-role="button" data-icon="arrow-l">Search</a>
7. 图标定位 添加data-iconpos=""/顶部（top）、右侧（right）、底部（bottom）、左侧（left）。
代码：
<a href="http://www.mamicode.com/#link" data-role="button" data-icon="search" data-iconpos="top">顶部</a>
<a href="http://www.mamicode.com/#link" data-role="button" data-icon="search" data-iconpos="right">右侧</a>
<a href="http://www.mamicode.com/#link" data-role="button" data-icon="search" data-iconpos="bottom">底部</a>
<a href="http://www.mamicode.com/#link" data-role="button" data-icon="search" data-iconpos="left">左侧</a>
8. 只显示图标添加data-iconpos="notext"
代码：
<a href="http://www.mamicode.com/#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
jQuery Mobile 工具栏
下面的代码，将添加一个按钮到头部标题文本的左侧，添加一个按钮到头部标题文本的右侧
<div data-role="header">
<a href="http://www.mamicode.com/#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
<a href="http://www.mamicode.com/#" data-role="button">搜索</a>
</div>
下面的代码，将添加一个按钮到头部标题文本的左侧：
<div data-role="header">
<a href="http://www.mamicode.com/#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
</div>
如果您把按钮链接放置在 <h1> 元素之后，将无法显示右侧的文本。要添加一个按钮到头部标题的右侧，请指定 class 为 "ui-btn-right"：
<div data-role="header">
<h1>欢迎来到我的主页</h1>
<a href="http://www.mamicode.com/#" data-role="button" class="ui-btn-right">搜索</a>
</div>
皓轩的jquery mobile之路（二）