jQuery-Mobile学习（页面）

一、基础样式
首先页面三个基础的样式。

   <div data-role="page">
        <div data-role="header">
            <h1>这是页头</h1>
        </div>
        <div data-role="main">
           <p>这是主体</p>
        </div>
        <div data-role="footer" data-position="fixed" >
            <p>这是页脚</p>
        </div>
    </div>

一个页面由三个基本部分组成。首先所有的都需要放在一个大的div里面。这个div有一个data-role=“page”.一个html页面里可以有多个页面。也就是分别放在<div data-role="page"></div>里面。同样也可以写在多个html页面里面。data-role=”header”,data-role=”main”,data-role=”footer”分别是头部主体页脚。现在底部添加data-position=”fixed”。就可以把页脚固定在底部。
*代码效果*

二、页面跳转过渡
JQuery-Mobile有一个好处就是在页面里可以写多个页面。实现跳转的方式也很简单。在<div data-role="page" id="p1"></div>给所在的页面加一个id值就可以。在页面里面直接把id值给a标签。就可以跳转。

<div data-role="page" id="p1">
        <div data-role="header">
            <h1>这是页面1</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="#p2">跳转到页面2</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>这是页脚</h1>
        </div>
    </div>
    <div data-role="page" id="p2">
        <div data-role="header">
            <h1>这是页面2</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="#p1">跳转到页面1</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>这是页脚</h1>
        </div>
    </div>

*代码效果*

由于跳转效果。无法很好的展示。只可以这样。
当我们给a标签里面添加一些。新的属性的时候就会有不同效果。在给

<a href="#p2" data-transition="fade">跳转到页面2</div>

data-transition实现页面跳转。
fade 默认，淡入到下一页
flip 向后向前翻转到下一页
flow 抛出当前页进入下一页
slide 向右向左滑动到下一页
slidefade 向右向左滑动并淡入进入下一页
slideup 从下到上滑动进入下一页
slidedown 从上到下滑动进入下一页
turn 转向下一页
none 无过渡效果
由于页面效果。无法展示。可以自己尝试一下。

注：页面条状可以跳转到另外的页面。也就是另一个html文件。我们只需要把文件名给a标签的href。<a href="2.html">跳转到页面2</a>

三、页面作为弹出框

<div data-role="page" id="p1">
        <div data-role="header">
            <h1>这是页面1</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="#p2">跳转到页面2</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>这是页脚</h1>
        </div>
    </div>
    <div data-role="page" id="p2" data-dialog="true">
        <div data-role="header">
            <h1>这是页面2</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="#p1">跳转到页面1</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>这是页脚</h1>
        </div>
    </div>

我们只需要在需要变成弹出框的页面里加data-dialog=”true”

<div data-role="page" data-dialog="true"></div>

完整代码

<div data-role="page" id="p1">
        <div data-role="header">
            <h1>这是页面1</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="#p2">跳转到页面2</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>这是页脚</h1>
        </div>
    </div>
    <div data-role="page" id="p2" data-dialog="true">
        <div data-role="header">
            <h1>这是页面2</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="#p1">跳转到页面1</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>这是页脚</h1>
        </div>
    </div>

当我们点击页面1的链接时候就会弹出页面2作为提示框。data-dialog=“true”。就可以很容易把另外一个页面变成弹出框。我们以后写弹出框再也不会很痛苦了。

*代码效果*