jquery mobile入门【page】

终于开始了手机端jquery的学习，有demo，有api，写起来还是很容易哒。太好了，开始。

首先，jquery mobile要加入的是：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

viewport是什么呢？转载了一篇别人的文章。就是下一篇。。

content设置屏幕的宽是设备的宽，原始缩放比例是1，即不缩放。 

<link href="jquery.mobile-1.4.5.min.css" rel="stylesheet">  引入jquery mobile的css样式
<script src="jquery-2.1.3.min.js"></script>         jquery mobile是建立在jquery的基础上的

<script src="jquery.mobile-1.4.5.min.js"></script>    引入jquery mobile的js文件

然后关于page，是有多漂亮简洁！

这是两个page  page1点击链接跳转到page2，同理，page2也是如此。

代码：

<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>
    <div role="main">
        <a href="#page2">跳转到第二个页面</a>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
        <p>main<p>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>footer</h1>
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>
    <div role="main">
        <a href="#page1">跳转到第一个页面</a>
        <p>main<p>

    </div>
    <div data-role="footer" data-position="fixed">
        <h1>footer</h1>
    </div>
</div>

可见，一个page的基本元素：

一个容器div，role为page，里面一个头部一个身体，一个脚部。

<div data-role="page" id="page2">   一个div给它一个role为page  id是为了区分不同的页面
    <div data-role="header" data-position="fixed">   给这个page一个头部role为header    fixed是为了让头部固定在顶端，点击一下会隐藏，再点击一下出现。
        <h1>header</h1>
    </div>
    <div role="main">    给这个page一个body，这里不是data-role而是设置role，为什么要不同意呢，，呃呃呃。。。
        <a href="#page1">跳转到第一个页面</a>
        <p>main<p>

    </div>
    <div data-role="footer" data-position="fixed">  这里给page一个footer，也设置fixed
        <h1>footer</h1>
    </div>
</div>