皓轩的jquery mobile之路（二）

jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。

编写代码要注意最外层div需要添加data-role="page" ，标题需要添加data-role="header"，内容需要添加data-role="content"，底部需要添加data-role="footer"。

代码：

----------------------------------------------------------

<div data-role="footer">
<h1>页面底部内容</h1>
</div>
</div>

----------------------------------------------------------

jQuery Mobile 页面切换效果

1. 页面切换效果可被应用于任何使用 data-transition 属性的链接或表单提交

代码：

<a href="#div2" data-transition="slide">切换到div2</a>

<a href="#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="#div2" data-transition="flow">切换到div2</a>

<a href="#div1" data-transition="flow" data-direction="reverse">切换到div1</a>

jQuery Mobile 按钮

1. 在 jQuery Mobile 中，按钮可通过三种方式创建：

使用 <button> 元素
使用<input type="button" value="按钮"> 元素
使用带有 <a href="#" data-role="button">按钮</a> 的 <a> 元素

在什么场景用那种按钮：

data-role="button" 用于页面之间的链接 input 和button用于表单提交

代码：

<a href="#div2" data-role="button">访问第二个页面</a>

<a href="#div1" data-role="button">访问第二个页面</a>

<div data-role="content">
<p><a href="#div2" data-role="button">访问第二个页面</a></p>
</div>

<div data-role="footer">
<h1>页面底部内容</h1>
</div>
</div>

<div data-role="content">
<p><a href="#div1" data-role="button">访问第二个页面</a></p>
</div>

<div data-role="footer">
<h1>页面底部内容</h1>
</div>
</div>

2. 按钮默认情况下都是占满屏幕宽度，所以提供了data-inline="true"让按钮的宽度和字一样宽

<a href="#pagetwo" data-role="button" data-inline="true">按钮宽度和我一样</a>

3. jqmobile组合按钮，组合顾名思义是几个按钮拼接在一起，那么就有两种情况，一种是一个按钮占一行（默认），一种是几个按钮占一行；所以提供data-role="controlgroup" 属性和 data-type="horizontal|vertical"对按钮布局。

代码：

<div data-role="content">
    <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><br>

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

4. jqmobile后退按钮需要添加 data-rel="back"。

代码：

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="#anylink" data-role="button" data-icon="arrow-l">Search</a>

7. 图标定位添加data-iconpos=""/顶部（top）、右侧（right）、底部（bottom）、左侧（left）。

代码：

8. 只显示图标添加data-iconpos="notext"

代码：

jQuery Mobile 工具栏

下面的代码，将添加一个按钮到头部标题文本的左侧，添加一个按钮到头部标题文本的右侧

<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button">搜索</a>
</div>

下面的代码，将添加一个按钮到头部标题文本的左侧：

<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
</div>

如果您把按钮链接放置在 <h1> 元素之后，将无法显示右侧的文本。要添加一个按钮到头部标题的右侧，请指定 class 为 "ui-btn-right"：

<div data-role="header">
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>