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>