皓轩的jquery mobile之路（二）

浏览数：29 / 时间：2015年06月09日

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="#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="page" id="div1">
<div data-role="header">
    <h1>页面标题</h1>
</div>

<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="page" id="div2">
<div data-role="header">
    <h1>页面标题</h1>
</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="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="#" 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>

<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>